/* ---------- Fonts (self-hosted from Google Fonts; latin-ext carries the Latvian letters) ---------- */
@font-face{font-family:"Parkinsans";font-weight:300 800;font-style:normal;font-display:swap;
  src:url(fonts/parkinsans-latin-ext-wght-normal.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-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Parkinsans";font-weight:300 800;font-style:normal;font-display:swap;
  src:url(fonts/parkinsans-latin-wght-normal.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:"Hanken Grotesk";font-weight:100 900;font-style:normal;font-display:swap;
  src:url(fonts/hanken-grotesk-latin-ext-wght-normal.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-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Hanken Grotesk";font-weight:100 900;font-style:normal;font-display:swap;
  src:url(fonts/hanken-grotesk-latin-wght-normal.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}

/* ---------- Tokens (from the Figma file) ---------- */
:root{
  --bg:#121212;          /* page: dark grey, not pure black */
  --ink:#000;            /* text on yellow */
  --white:#fff;
  --muted:#818181;       /* footer text */
  --tile:#444;           /* logo placeholders */
  --yellow:#f9e54c;
  --g:clamp(16px,4vw,32px);
  --max:1236px;
  --radius:18px;
  --head:"Parkinsans",system-ui,sans-serif;
  --body:"Hanken Grotesk",system-ui,sans-serif;
  --h2:clamp(2rem,1.3rem + 2.6vw,3rem);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0;background:var(--bg);color:var(--white);
  font-family:var(--body);font-size:15px;line-height:1.35;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden;
}
@media (max-width:640px){body{font-size:16px}}
::selection{background:var(--yellow);color:var(--ink)}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
p{margin:0}
h1,h2,h3{font-family:var(--head);font-weight:600;line-height:1;margin:0;text-wrap:balance}
h2{font-size:var(--h2)}
:focus-visible{outline:3px solid var(--yellow);outline-offset:3px;border-radius:6px}
.card :focus-visible{outline-color:var(--ink)}
.skip{position:absolute;left:1rem;top:-4rem;z-index:100;background:var(--yellow);color:var(--ink);padding:.6rem 1rem;font-weight:700;border-radius:6px}
.skip:focus{top:1rem}
.wrap{width:min(var(--max),100% - 2 * var(--g));margin-inline:auto}

#embers{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:0}
main,.top,.foot{position:relative;z-index:1}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.6em;
  min-height:48px;padding:0 30px;border-radius:5px;border:0;
  font:400 24px/1 var(--body);text-decoration:none;cursor:pointer;
  transition:transform .16s cubic-bezier(.2,.8,.2,1),background-color .16s,color .16s,box-shadow .16s;
}
.btn .i-heart{width:26px;height:26px;flex:none;transition:transform .2s cubic-bezier(.2,.8,.2,1)}
.btn:hover .i-heart{transform:scale(1.15)}
.btn:active{transform:scale(.97)}
.btn--yellow{background:var(--yellow);color:var(--ink)}
.btn--yellow:hover{box-shadow:0 0 0 3px rgba(249,229,76,.25)}
.btn--dark{background:var(--ink);color:var(--white)}
.btn--dark:hover{background:#262626}
.btn--light{background:var(--white);color:var(--ink)}
.btn--light:hover{background:#f1f1f1}
@media (max-width:640px){.btn{font-size:20px;padding:0 22px}.btn .i-heart{width:22px;height:22px}}

/* ---------- Header ---------- */
.top{display:flex;align-items:center;justify-content:space-between;padding-top:62px}
.top__logo img{width:65px;height:65px}
@media (max-width:640px){.top{padding-top:20px}.top__logo img{width:52px;height:52px}}

/* ---------- Hero + main player ---------- */
.hero{text-align:center;padding-top:22px}
.hero__mark{margin:0 auto;width:min(290px,62vw)}
.hero__mark img{width:100%}
.hero__lead{font:600 clamp(2rem,1.3rem + 2.6vw,3rem)/1.1 var(--head);margin-top:52px}
.hero__body{max-width:540px;margin:34px auto 0}

.player{margin:64px auto 0;max-width:815px}
.wave{display:block;width:100%;height:52px}
.controls{display:flex;align-items:center;justify-content:center;gap:22px;margin-top:46px}  /* 44px buttons, 24px icons: ~32px visual gap as in Figma */
.controls .ctl svg{width:24px;height:24px}
.controls .play svg{width:26.8%;height:35%}          /* Figma: 26x34 glyph in the 97px circle */
.controls .play .i-play{transform:translate(13.5%,4.4%)}
.ctl{
  display:grid;place-items:center;width:44px;height:44px;padding:0;border:0;border-radius:50%;
  background:none;color:var(--white);cursor:pointer;transition:transform .14s cubic-bezier(.2,.8,.2,1),opacity .14s;
}
.ctl svg{width:28px;height:28px}
.ctl:hover{opacity:.8}
.ctl:active{transform:scale(.9)}
.ctl,.play,#ansis-seek{touch-action:manipulation;-webkit-tap-highlight-color:transparent}  /* no double-tap-zoom swallowing quick taps on iOS */
.play{
  position:relative;display:grid;place-items:center;flex:none;
  width:97px;height:97px;padding:0;border:0;border-radius:50%;
  background:var(--yellow);color:var(--ink);cursor:pointer;
  transition:transform .16s cubic-bezier(.2,.8,.2,1),box-shadow .2s;
}
.play svg{width:40%;height:40%;grid-area:1/1}
.play .i-play{transform:translateX(6%)}
.play:hover{box-shadow:0 0 0 8px rgba(249,229,76,.16)}
.play:active{transform:scale(.95)}
.play .i-pause,.play[data-state="playing"] .i-play{display:none}
.play[data-state="playing"] .i-pause{display:block}
.play .spinner{grid-area:1/1;width:100%;height:100%;border-radius:50%;border:3px solid transparent;border-top-color:var(--ink);opacity:0;pointer-events:none}
.play.is-loading .spinner{opacity:.55;animation:spin .9s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.play.is-loading .spinner{animation:none}}
.player__error{margin-top:1rem;color:var(--yellow)}
@media (max-width:640px){
  .hero__lead{margin-top:36px}.hero__body{margin-top:22px}
  .player{margin-top:44px}.wave{height:44px}
  .controls{margin-top:32px;gap:22px}.play{width:84px;height:84px}
}

/* ---------- Mini player (follows in the corner) ---------- */
.mini{
  position:fixed;z-index:40;top:55px;right:max(var(--g),(100vw - var(--max)) / 2);
  display:flex;align-items:center;gap:10px;width:351px;height:69px;padding:0 16px;
  background:var(--white);color:var(--ink);border-radius:8px;box-shadow:0 10px 30px rgba(0,0,0,.35);
  opacity:0;transform:translateY(-10px) scale(.98);pointer-events:none;
  transition:opacity .2s ease-out,transform .24s cubic-bezier(.2,.8,.2,1);
}
.mini.is-shown{opacity:1;transform:none;pointer-events:auto}
.mini[hidden]{display:none}
/* Geometry measured from the Figma prototype: 18px icons, 21px / 21px / 30px spacing, 42px play */
.mini{gap:0;padding:0 17.5px 0 18px}
.mini .ctl{width:32px;height:44px;margin:0 -7px;border-radius:6px;color:var(--ink)}  /* 32px hit area, 18px footprint */
.mini .ctl svg{width:18px;height:18px}
.play--sm{width:42px;height:42px;margin:0 21px;background:#f6e668}  /* Figma mini yellow */
.play--sm svg{width:11.5px;height:15px}
.play--sm .i-play{transform:translateX(1.75px)}
.play--sm:hover{box-shadow:0 0 0 5px rgba(249,229,76,.35)}
.play--sm .spinner{border-width:2px}
.wave--mini{flex:1;min-width:0;height:37px;margin-left:30px}
@media (max-width:640px){
  .mini{top:auto;bottom:max(12px,env(safe-area-inset-bottom));left:50%;right:auto;width:min(351px,100% - 24px);
        transform:translate(-50%,10px) scale(.98)}
  .mini.is-shown{transform:translate(-50%,0)}
}
@media (prefers-reduced-motion:reduce){.mini,.mini.is-shown{transition:opacity .15s}}

/* ---------- Yellow cards ---------- */
.card{background:var(--yellow);color:var(--ink);border-radius:var(--radius)}

/* Timeline */
.story{margin-top:120px;padding:58px clamp(20px,6vw,82px) 46px;text-align:center}
.timeline{--off:55px;position:relative;display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:20px;padding-top:12px}
/* the curve sits at each column's dot height: label (32px) + gap (12px) + half a dot (11px) = --off */
.timeline__curve{position:absolute;left:0;width:100%;top:calc(12px + var(--off));height:170px;color:var(--bg);overflow:visible}
.moment{position:relative;padding-top:calc(var(--y) * 1px);display:flex;flex-direction:column;align-items:center}
.moment h3{font-size:24px;line-height:32px}
.dot{width:22px;height:22px;border-radius:50%;background:var(--bg);margin:12px 0 22px;position:relative}
.moment p{max-width:292px;font-size:14px;line-height:1.3}
.moment p + p{margin-top:1.2em}
.moment strong{font-weight:700}
/* photos sit just above the first month label (column 1 centre, label top = 12px + 150px) */
.photos{position:absolute;left:calc((100% - 48px) / 6);top:calc(12px + 150px - 206px);transform:translateX(-50%);display:flex;align-items:flex-end;z-index:1}
.photo{
  display:block;padding:0;border:0;background:none;cursor:zoom-in;border-radius:14px;
  width:140px;transition:transform .22s cubic-bezier(.2,.8,.2,1);
}
.photo img{width:100%;aspect-ratio:3/4;object-fit:cover;border-radius:14px;box-shadow:0 6px 18px rgba(0,0,0,.25)}
.photo:first-child{transform:rotate(-6deg) translateX(10px)}
.photo:last-child{transform:rotate(5deg) translate(-10px,4px)}
.photo:hover{transform:rotate(0) scale(1.05);z-index:1}
.numbers[hidden]{display:none}

/* Stacked layout below 1240px: narrower than that, the photos run into the centred heading */
@media (max-width:1240px){
  .story{text-align:left;padding:40px 24px 36px}
  .story h2{text-align:center}
  .timeline{display:block;max-width:600px;margin:28px auto 0;padding-top:0}   /* one centred column on tablets */
  .timeline__curve{display:none}
  .moment{padding:0 0 30px 34px;align-items:flex-start}
  .moment::before{content:"";position:absolute;left:10px;top:12px;bottom:-12px;width:3px;background:var(--bg);border-radius:2px}
  .moment:last-child::before{bottom:auto;height:12px}
  .dot{position:absolute;left:0;top:5px;margin:0}
  .moment p{max-width:none}
  .moment h3{margin-bottom:10px}
  .photos{position:static;transform:none;margin:0 0 26px;justify-content:center}
  .photo{width:min(140px,38vw)}
}

/* Lightbox */
.lightbox{padding:0;border:0;background:none;max-width:min(92vw,640px);max-height:92vh;overflow:visible}
.lightbox::backdrop{background:rgba(10,10,10,.85)}
.lightbox img{max-height:88vh;width:auto;border-radius:14px}
.lightbox__close{position:absolute;top:-14px;right:-14px;width:40px;height:40px;border-radius:50%;border:0;background:var(--white);color:var(--ink);display:grid;place-items:center;cursor:pointer}
.lightbox__close svg{width:20px;height:20px}
.lightbox[open]{animation:pop .22s cubic-bezier(.2,.8,.2,1)}
@keyframes pop{from{opacity:0;transform:scale(.96)}}
@media (prefers-reduced-motion:reduce){.lightbox[open]{animation:none}}

/* ---------- Quote ---------- */
.quote{margin:88px auto 0;text-align:center}
.quote__marks{width:63px;margin:0 auto}
.quote blockquote{margin:46px auto 0;max-width:621px}
.quote__text{width:100%}
.quote figcaption{margin-top:44px}

/* ---------- Wavy dividers ---------- */
.wavy{
  border:0;height:9px;margin-top:100px;margin-bottom:0;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='9' viewBox='0 0 22 9'%3E%3Cpath d='M0 4.5C5.5-.5 5.5 9.5 11 4.5S16.5-.5 22 4.5' fill='none' stroke='%23404040' stroke-width='1.6'/%3E%3C/svg%3E") repeat-x center/22px 9px;
}

/* ---------- Thanks + logos ---------- */
.thanks{text-align:center;padding-top:96px}
.thanks p{margin-top:30px}
.thanks .hl{color:var(--yellow)}
.logos{list-style:none;padding:0;margin:78px auto 0;max-width:875px;display:flex;flex-wrap:wrap;justify-content:center;gap:25px}  /* 9 logos: 5 + 4, centred */
.logos li{flex:none;width:155px;aspect-ratio:1;border-radius:8px;background:var(--tile);display:grid;place-items:center;overflow:hidden}
.logos li{transition:background-color .25s ease}
/* white logo by default; on hover the tile turns white and the logo shows in the company's own colours
   (many of them are black or dark, so they need the light tile) */
.logos img{grid-area:1/1;width:70%;height:70%;object-fit:contain;transition:opacity .25s ease}
.logos__c{opacity:0}
@media (hover:hover){
  .logos li:hover{background:var(--white)}
  .logos li:hover img{opacity:0}
  .logos li:hover .logos__c{opacity:1}
}
@media (prefers-reduced-motion:reduce){.logos li,.logos img{transition:none}}
@media (max-width:940px){.logos{max-width:493px;gap:14px}.logos li{width:calc((100% - 28px) / 3)}}   /* 3 x 3 */
@media (max-width:520px){.logos{gap:10px}.logos li{width:calc((100% - 20px) / 3)}}

/* ---------- Ansis ---------- */
.ansis{text-align:center;padding-top:128px}
.ansis__avatar{width:97px;height:97px;border-radius:50%;object-fit:cover;margin:0 auto}
.ansis h2{font-size:clamp(1.75rem,1.3rem + 1.6vw,2.25rem);color:var(--yellow);margin-top:24px}
.ansis p{max-width:465px;margin:22px auto 0}
.ansis__player{position:relative;width:min(322px,100%);height:62px;margin:40px auto 0;display:grid;place-items:center}
.play--md{width:62px;height:62px;position:relative;z-index:1}
.play--md:hover{box-shadow:0 0 0 6px rgba(249,229,76,.16)}
.play--md svg{width:17px;height:22px}               /* Figma glyph size */
.play--md .i-play{transform:translateX(2.5px)}
#ansis-seek{
  position:absolute;inset:0;width:100%;height:100%;margin:0;background:none;cursor:pointer;
  -webkit-appearance:none;appearance:none;--p:0%;
}
#ansis-seek::-webkit-slider-runnable-track{height:3px;border-radius:2px;background:linear-gradient(90deg,var(--yellow) var(--p),#424242 var(--p))}
#ansis-seek::-moz-range-track{height:3px;border-radius:2px;background:linear-gradient(90deg,var(--yellow) var(--p),#424242 var(--p))}
/* No visible knob: the yellow fill alone shows progress. The thumb stays (invisible, 2px) so dragging works. */
#ansis-seek::-webkit-slider-thumb{-webkit-appearance:none;width:2px;height:12px;margin-top:-4.5px;background:transparent;border:0}
#ansis-seek::-moz-range-thumb{width:2px;height:12px;background:transparent;border:0}
#ansis-seek:focus-visible{outline:2px solid rgba(249,229,76,.5);outline-offset:4px;border-radius:8px}

/* ---------- Help card ---------- */
.help{margin-top:128px;padding:62px clamp(20px,5vw,60px) 64px;text-align:center}
.help p{max-width:539px;margin:28px auto 0;color:var(--bg)}
.help__actions{display:flex;flex-wrap:wrap;justify-content:center;gap:34px;margin-top:40px}
.contacts{list-style:none;padding:0;margin:50px 0 0;display:flex;flex-wrap:wrap;justify-content:center;gap:14px 60px}
.contacts a{display:inline-flex;align-items:center;gap:10px;text-decoration:none}
.contacts a:hover{text-decoration:underline;text-underline-offset:3px}
.contacts svg{width:24px;height:24px;flex:none}
@media (max-width:640px){.help__actions{gap:14px}.contacts{flex-direction:column;align-items:center}}

/* ---------- Footer ---------- */
main .wavy:last-child{margin-top:124px}
.foot{display:flex;align-items:flex-start;gap:16px;padding:60px 0 calc(80px + env(safe-area-inset-bottom))}
.foot img{width:65px;height:65px}
.foot__addr{color:var(--muted);line-height:1.33}
.foot > a{margin-left:auto;text-decoration:none}
.foot > a:hover{text-decoration:underline;text-underline-offset:3px}
@media (max-width:640px){.foot{flex-wrap:wrap;padding-bottom:110px}.foot > a{margin-left:81px}}