/* smrnc-agency.sk — shared styles (keyframes come verbatim from the design) */
@keyframes wDrop { 0%{transform:translateY(-1.4em) rotate(-6deg); opacity:0;} 18%{opacity:1;} 52%{transform:translateY(0) rotate(0deg) scale(1,1);} 66%{transform:translateY(0.06em) scale(1.26,0.62);} 82%{transform:translateY(0) scale(1,1);} 100%{transform:translateY(0) scale(1,1);} }
@keyframes wFade { 0%{opacity:0; transform:translateY(26px);} 100%{opacity:1; transform:translateY(0);} }
@keyframes wStamp { 0%{transform:scale(2.4) rotate(-10deg); opacity:0;} 55%{transform:scale(0.94) rotate(-2deg); opacity:1;} 75%{transform:scale(1.04) rotate(-2deg);} 100%{transform:scale(1) rotate(-2deg);} }
@keyframes wCurtain { 0%,58%{transform:translateY(0);} 82%,100%{transform:translateY(-101%);} }
@keyframes wHold { 0%,60%{opacity:1;} 78%,100%{opacity:0; visibility:hidden;} }
@keyframes wFly1 { 0%{transform:translate(-260px,-160px) rotate(-24deg); opacity:0;} 12%{opacity:1;} 52%{transform:translate(0,0) rotate(0deg); opacity:1;} 64%,100%{transform:translate(0,0); opacity:0;} }
@keyframes wFly2 { 0%{transform:translate(240px,-190px) rotate(18deg); opacity:0;} 12%{opacity:1;} 52%{transform:translate(0,0) rotate(0deg); opacity:1;} 64%,100%{opacity:0;} }
@keyframes wFly3 { 0%{transform:translate(-300px,120px) rotate(14deg); opacity:0;} 12%{opacity:1;} 52%{transform:translate(0,0) rotate(0deg); opacity:1;} 64%,100%{opacity:0;} }
@keyframes wFly4 { 0%{transform:translate(280px,150px) rotate(-16deg); opacity:0;} 12%{opacity:1;} 52%{transform:translate(0,0) rotate(0deg); opacity:1;} 64%,100%{opacity:0;} }
@keyframes hDrop { 0%,6%{transform:translateY(-1.4em) rotate(-6deg); opacity:0;} 12%{opacity:1;} 26%{transform:translateY(0) rotate(0deg) scale(1,1);} 32%{transform:translateY(0.06em) scale(1.26,0.62);} 40%,100%{transform:translateY(0) scale(1,1); opacity:1;} }
@keyframes hStamp { 0%,6%{transform:scale(2.4) rotate(-10deg); opacity:0;} 24%{transform:scale(0.94) rotate(-2deg); opacity:1;} 30%{transform:scale(1.05) rotate(-2deg);} 38%,100%{transform:scale(1) rotate(-2deg); opacity:1;} }
@keyframes hSlap { 0%,4%{transform:translate(120%,-60%) rotate(16deg); opacity:0;} 10%{opacity:1;} 26%{transform:translate(0,0) rotate(-2deg);} 31%{transform:translate(0,0) rotate(-4.5deg);} 38%,100%{transform:translate(0,0) rotate(-2deg); opacity:1;} }
@keyframes hStampEarly { 0%,4%{transform:scale(2.2) rotate(-9deg); opacity:0;} 16%{transform:scale(0.95) rotate(-2deg); opacity:1;} 21%{transform:scale(1.04) rotate(-2deg);} 26%,100%{transform:scale(1) rotate(-2deg); opacity:1;} }
@keyframes hDropLate { 0%,16%{transform:translateY(-1.4em) rotate(-6deg); opacity:0;} 22%{opacity:1;} 36%{transform:translateY(0) rotate(0deg) scale(1,1);} 42%{transform:translateY(0.06em) scale(1.26,0.62);} 50%,100%{transform:translateY(0) scale(1,1); opacity:1;} }
@keyframes sDrop { 0%,6%{transform:translateY(-120%) rotate(-6deg); opacity:0;} 12%{opacity:1;} 26%{transform:translateY(0) rotate(0deg) scale(1,1);} 32%{transform:translateY(1.6%) scale(1.26,0.62);} 40%,100%{transform:translateY(0) scale(1,1); opacity:1;} }
@keyframes sDropLate { 0%,16%{transform:translateY(-120%) rotate(-6deg); opacity:0;} 22%{opacity:1;} 36%{transform:translateY(0) rotate(0deg) scale(1,1);} 42%{transform:translateY(1.6%) scale(1.26,0.62);} 50%,100%{transform:translateY(0) scale(1,1); opacity:1;} }
@keyframes iStamp { 0%{transform:scale(2.4) rotate(-10deg); opacity:0;} 55%{transform:scale(0.94) rotate(-2deg); opacity:1;} 75%{transform:scale(1.05) rotate(-2deg);} 100%{transform:scale(1) rotate(-2deg); opacity:1;} }
@keyframes sDropOnce { 0%{transform:translateY(-120%) rotate(-6deg); opacity:0;} 16%{opacity:1;} 52%{transform:translateY(0) rotate(0deg) scale(1,1);} 66%{transform:translateY(1.6%) scale(1.26,0.62);} 82%,100%{transform:translateY(0) scale(1,1); opacity:1;} }
@keyframes wCore { 0%,46%{transform:scale(0.6); opacity:0;} 60%{transform:scale(1.18); opacity:1;} 72%{transform:scale(0.94);} 84%,100%{transform:scale(1); opacity:1;} }

html { color-scheme: only light; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
/* nothing may ever pan the page sideways - whatever a device does to fonts */
html, body { overflow-x: hidden; overflow-x: clip; }
html, body { margin: 0; background: #B79CFF; font-family: Comfortaa, sans-serif; }
a { color: #6B4BD6; text-decoration: none; }
.page { background: #B79CFF; }
.page > div { width: 100% !important; }
:focus-visible { outline: 2px solid #6B4BD6; outline-offset: 3px; }
input::placeholder, textarea::placeholder { color: rgb(167, 158, 180); }
.page input, .page textarea, .page button { box-sizing: border-box; max-width: 100%; }
button { cursor: pointer; font-family: Comfortaa, sans-serif; }

/* intro plays once per session; afterwards everything sits in its landed state */
.no-intro [data-anim] { animation: none !important; }
@media (prefers-reduced-motion: reduce) {
  [data-anim] { animation: none !important; }
}

/* image slots: dashed placeholder until an image is set */
[data-img] { position: relative; display: block; }
[data-img]:not(.has-img)::before {
  content: attr(data-ph);
  position: absolute; inset: 6px;
  display: flex; align-items: center; justify-content: center; text-align: center;
  border: 2px dashed rgba(107, 75, 214, 0.45); border-radius: 12px;
  font: 700 11px/1.5 "Space Mono", Consolas, Menlo, monospace; letter-spacing: 0.06em;
  color: #6B4BD6; padding: 10px; box-sizing: border-box;
}
[data-img] img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* responsive: design grids collapse gracefully */
@media (max-width: 1020px) {
  [style*="grid-template-columns: repeat(4"] { grid-template-columns: repeat(2, 1fr) !important; }
  [style*="grid-template-columns: repeat(3"] { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 860px) {
  [style*="grid-template-columns: 1.15fr"] { grid-template-columns: 1fr !important; }
}
@media (max-width: 600px) {
  [style*="grid-template-columns: repeat(4"],
  [style*="grid-template-columns: repeat(3"],
  /* minmax(0, 1fr), not 1fr: a bare 1fr will not shrink below the card's
     min-content width, so on a 320px screen the card ran past the edge and
     the badge on it was clipped. */
  [style*="grid-template-columns: repeat(2"] { grid-template-columns: minmax(0, 1fr) !important; }
}
/* header rows wrap on narrow screens — both the bar and its link group */
@media (max-width: 760px) {
  .page [style*="justify-content: space-between"][style*="padding: 24px"],
  .page [style*="justify-content: space-between"][style*="padding: 22px"] {
    flex-wrap: wrap; gap: 14px; justify-content: center !important;
  }
  .page [style*="justify-content: space-between"][style*="padding: 24px"] > div,
  .page [style*="justify-content: space-between"][style*="padding: 22px"] > div {
    flex-wrap: wrap; justify-content: center; row-gap: 10px; gap: 16px !important;
  }
}

/* the hero sticker never outgrows a small screen */
.page [style*="width: 400px"] { width: min(400px, 86vw) !important; }
.page [style*="width: 400px"] svg { width: 100%; height: auto; }

/* --- polish ------------------------------------------------------------ */
/* buttons: the brand's micro-squash on hover, nothing else moves */
.page a[style*="border-radius: 999px"], .page button[type="submit"] {
  transition: transform .18s cubic-bezier(.3,.7,.3,1), box-shadow .18s cubic-bezier(.3,.7,.3,1);
}
.page a[style*="border-radius: 999px"]:hover, .page button[type="submit"]:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(34, 26, 40, 0.18);
}
.page a[style*="border-radius: 999px"]:active, .page button[type="submit"]:active {
  transform: translateY(0) scale(0.97);
}
/* very large screens: type and bands hold the design scale */
@media (min-width: 2000px) {
  .page { font-size: 17px; }
}

/* the lila opening fills the first screen and ends like the sticker does:
   rounded corners with a solid offset shadow lip */
.hero-block {
  min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column;
  background: #B79CFF;
  border-radius: 0 0 clamp(22px, 4vw, 36px) clamp(22px, 4vw, 36px);
  box-shadow: 0 12px 0 rgba(34, 26, 40, 0.22);
  margin-bottom: 12px;
}
.hero-block .hero-mid { flex: 1 1 auto; justify-content: center; }

/* --- brand replacements for browser defaults ---------------------------- */
::selection { background: #221A28; color: #FAF8F4; }
.page input:-webkit-autofill, .page textarea:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 1000px #FAF8F4 inset; -webkit-text-fill-color: #221A28;
}
.page .f-err { border-color: #6B4BD6 !important; background: #F1EDFC !important; }
.page .f-msg {
  display: flex; align-items: center; gap: 7px;
  font: 700 12px/1.4 "Space Mono", Consolas, Menlo, monospace; letter-spacing: 0.06em;
  color: #6B4BD6; text-transform: uppercase;
}
.page .f-msg svg { flex: 0 0 auto; }
.page .f-note {
  font: 700 13px/1.5 "Space Mono", Consolas, Menlo, monospace; letter-spacing: 0.05em;
  color: #6B4BD6; text-transform: uppercase;
}

/* mobile: the closing CTA stacks and breathes instead of crowding */
@media (max-width: 640px) {
  .cta-ink { padding-top: clamp(60px, 11vh, 90px) !important; padding-bottom: clamp(56px, 10vh, 84px) !important; gap: 30px !important; }
  .cta-row { flex-direction: column; gap: 20px !important; margin-top: 4px; }
  /* the caron confetti crowds the text on a narrow screen — desktop keeps it */
  .cta-ink > span[style*="position: absolute"] { display: none; }
}

/* caron lives in the wordmark's own coordinate space - it can never drift */
@keyframes caronDrop {
  0%, 6% { transform: translateY(-380%) rotate(-6deg); opacity: 0; }
  12% { opacity: 1; }
  26% { transform: translateY(0) rotate(0deg) scale(1, 1); }
  32% { transform: translateY(4%) scale(1.26, 0.62); }
  40%, 100% { transform: translateY(0) scale(1, 1); opacity: 1; }
}
.no-intro .caron-p { animation: none !important; }
@media (prefers-reduced-motion: reduce) { .caron-p { animation: none !important; } }

/* Safari 14 (pre-2021) has no aspect-ratio - the padding-top box keeps the
   4:5 team photos identical there. Modern browsers never enter this block. */
@supports not (aspect-ratio: 1 / 1) {
  .page [style*="aspect-ratio"][style*="overflow: hidden"] {
    position: relative; height: 0 !important; padding-top: 125% !important;
  }
  .page [style*="aspect-ratio"][style*="overflow: hidden"] > [data-img] {
    position: absolute; top: 0; left: 0; right: 0; bottom: 0; height: 100% !important;
  }
}

/* -----------------------------------------------------------------------
   Forced-dark armor: aggressive browser dark modes (Samsung Internet,
   MIUI...) invert background-color but leave background-image alone.
   Painting every surface with a same-color gradient makes the palette
   inversion-proof even where color-scheme: only light is ignored. */
html, body, .page, .hero-block { background-image: linear-gradient(#B79CFF, #B79CFF); }
.page [style*="background: rgb(183, 156, 255)"] { background-image: linear-gradient(#B79CFF, #B79CFF) !important; }
.page [style*="background: rgb(250, 248, 244)"] { background-image: linear-gradient(#FAF8F4, #FAF8F4) !important; }
.page [style*="background: rgb(241, 238, 244)"] { background-image: linear-gradient(#F1EEF4, #F1EEF4) !important; }
.page [style*="background: rgb(241, 237, 252)"] { background-image: linear-gradient(#F1EDFC, #F1EDFC) !important; }
.page [style*="background: rgb(34, 26, 40)"]  { background-image: linear-gradient(#221A28, #221A28) !important; }
.page > div[style*="background: rgb(250, 248, 244)"] { background-image: linear-gradient(#FAF8F4, #FAF8F4) !important; }

/* --- portfolio cards ---------------------------------------------------- */
[data-pf-region] { display: flex; flex-direction: column; gap: 18px; }
.pf-card {
  display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: 32px;
  background: #FAF8F4; background-image: linear-gradient(#FAF8F4, #FAF8F4);
  border: 1px solid rgba(0, 0, 0, 0.07); border-radius: 22px; padding: 28px; align-items: stretch;
}
.pf-side { display: flex; flex-direction: column; gap: 14px; position: relative; }
.pf-logo {
  width: 210px; height: 140px; border-radius: 14px;
  background: #FFFFFF; background-image: linear-gradient(#FFFFFF, #FFFFFF);
  border: 1px solid rgba(0, 0, 0, 0.06);
  overflow: hidden; display: flex; align-items: center; justify-content: center;
  padding: 14px; box-sizing: border-box;
}
.pf-logo img { max-width: 100%; max-height: 100%; object-fit: contain; display: block; }
.pf-logo-ph { font: 500 12px Comfortaa, sans-serif; color: #948C9E; text-align: center; padding: 8px; }
.pf-title {
  margin: 0; font: 700 clamp(21px, 2.2vw, 28px)/1.2 Comfortaa, sans-serif;
  letter-spacing: -0.02em; color: #221A28;
}
/* heading cards list the brands they collect as small logo tiles */
.pf-logos { display: grid; grid-template-columns: repeat(2, 105px); gap: 8px; }
.pf-logo-sm {
  position: relative; width: 105px; height: 70px; border-radius: 10px;
  background: #FFFFFF; background-image: linear-gradient(#FFFFFF, #FFFFFF);
  border: 1px solid rgba(0, 0, 0, 0.06);
  display: flex; align-items: center; justify-content: center;
  padding: 8px; box-sizing: border-box; overflow: hidden;
}
.pf-logo-sm img { max-width: 100%; max-height: 100%; object-fit: contain; display: block; }
.pf-logo-add {
  border: 2px dashed rgba(107, 75, 214, .5); background: #F1EDFC;
  color: #6B4BD6; font: 700 12px Comfortaa, sans-serif; cursor: pointer;
}
.pf-logo-sm .pf-x { top: 3px; right: 3px; min-width: 20px; height: 20px; font-size: 11px; padding: 0 5px; }
.pf-desc { font: 500 13px/1.65 Comfortaa, sans-serif; color: #6B6070; }
.pf-tags { display: flex; gap: 6px; flex-wrap: wrap; margin-top: auto; }
.pf-tag { border: 1.5px solid #B79CFF; color: #6B4BD6; border-radius: 999px; padding: 5px 12px; font: 700 10.5px Comfortaa, sans-serif; }
.pf-media { display: flex; gap: 12px; flex-wrap: wrap; align-items: flex-start; justify-content: flex-end; }

/* One rule for every card: the copy column takes the slack, the clips hug the
   right edge, and they all start on the same top line. A wide clip keeps its own
   proportions - it is not stretched to a reel's height. */
@media (min-width: 901px) {
  .pf-card { grid-template-columns: minmax(230px, 1fr) auto; align-items: center; }
  .pf-side { justify-content: center; }
  .pf-tags { margin-top: 4px; }
  .pf-desc { max-width: 52ch; }
  .pf-media[data-count="1"] .pf-tile { height: 370px; width: 208px; }
  .pf-media[data-count="1"] .pf-tile.pf-wide { width: 560px; height: 315px; }
  .pf-media[data-count="2"] .pf-tile { height: 331px; width: 186px; }
  .pf-media[data-count="2"] .pf-tile.pf-wide { width: 460px; height: 259px; }
}
.pf-tile {
  position: relative; flex: none; width: 138px; height: 246px; border-radius: 14px;
  background: #E4DEEE; background-image: linear-gradient(#E4DEEE, #E4DEEE);
  overflow: hidden; display: flex; align-items: center; justify-content: center; cursor: pointer;
  transition: transform .18s cubic-bezier(.3,.7,.3,1), box-shadow .18s cubic-bezier(.3,.7,.3,1);
}
.pf-tile:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(34, 26, 40, 0.16); }
.pf-tile.pf-wide { width: 437px; max-width: 100%; }
.pf-tile img, .pf-tile video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pf-play {
  position: relative; z-index: 2; width: 38px; height: 38px; border-radius: 999px; background: #B79CFF;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 3px 10px rgba(34, 26, 40, 0.28);
}
.pf-play svg { margin-left: 2px; }
.pf-lbl { position: absolute; left: 12px; bottom: 11px; right: 12px; z-index: 2; font: 700 12px Comfortaa, sans-serif; color: #FAF8F4; text-shadow: 0 1px 3px rgba(34,26,40,.6); }
.pf-empty {
  border: 2px dashed rgba(107, 75, 214, 0.45); border-radius: 20px;
  padding: clamp(36px, 6vw, 64px) 24px; display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center;
}
.pf-empty-t { font: 700 21px/1.25 Comfortaa, sans-serif; color: #221A28; }
.pf-empty-d { font: 500 13.5px/1.65 Comfortaa, sans-serif; color: #6B6070; max-width: 46ch; }
@media (max-width: 900px) {
  .pf-card { grid-template-columns: 1fr; gap: 20px; }
  .pf-side { padding-bottom: 4px; }
  /* everything visible at once instead of a strip that scrolls out of sight */
  .pf-media { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; overflow: visible; }
  .pf-media .pf-tile { width: 100%; height: auto; aspect-ratio: 9 / 16; }
  .pf-media .pf-tile.pf-wide { grid-column: 1 / -1; aspect-ratio: 16 / 9; }
  .pf-media[data-count="1"] { grid-template-columns: 1fr; justify-items: center; }
  .pf-media[data-count="1"] .pf-tile { max-width: 250px; }
  .pf-media[data-count="1"] .pf-tile.pf-wide { max-width: 100%; }
  .pf-play { width: 46px; height: 46px; }
  @supports not (aspect-ratio: 1 / 1) {
    .pf-media .pf-tile { height: 330px; }
    .pf-media .pf-tile.pf-wide { height: 190px; }
  }
}
/* --- video lightbox ------------------------------------------------------ */
.pf-box { position: fixed; inset: 0; z-index: 200; background: rgba(19, 13, 24, 0.9); display: flex; align-items: center; justify-content: center; padding: 20px; }
.pf-box-inner { position: relative; display: flex; }
/* width carries both limits, so the clip fits the window whichever way it runs
   out of room - and a band of backdrop always stays clickable around it */
.pf-box-frame {
  position: relative; height: auto;
  width: min(960px, 92vw, calc(84vh * 16 / 9)); aspect-ratio: 16 / 9;
  background: #221A28; border-radius: 18px; overflow: hidden; box-shadow: 0 20px 70px rgba(0,0,0,.5);
}
.pf-box-inner.reel .pf-box-frame {
  aspect-ratio: 9 / 16;
  width: min(460px, 86vw, calc(82vh * 9 / 16));
}
.pf-box-frame iframe, .pf-box-frame video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
/* closing is a click on the backdrop - the cursor says so */
.pf-box { cursor: pointer; }
.pf-box:focus { outline: none; }
.pf-box-frame { cursor: auto; }
@supports not (aspect-ratio: 1 / 1) {
  .pf-box-frame { width: min(960px, 92vw, calc(84vh * 16 / 9)); height: 0; padding-top: 56.25%; }
  .pf-box-inner.reel .pf-box-frame { width: min(380px, 86vw, calc(82vh * 9 / 16)); height: 0; padding-top: 177.8%; }
}
/* --- editor-only portfolio controls -------------------------------------- */
.pf-x { position: absolute; top: 6px; right: 6px; z-index: 5; border: 0; background: #221A28; color: #FAF8F4; border-radius: 999px; min-width: 26px; height: 26px; font: 700 13px Comfortaa, sans-serif; cursor: pointer; padding: 0 8px; }
.pf-x-client { position: static; align-self: flex-start; margin-top: 8px; }
.pf-tile.pf-add { border: 2px dashed rgba(107,75,214,.5); background: #F1EDFC; color: #6B4BD6; font: 700 13px Comfortaa, sans-serif; cursor: pointer; }
.pf-add-client { border: 2px dashed rgba(107,75,214,.5); background: #F1EDFC; color: #6B4BD6; border-radius: 18px; padding: 20px; font: 700 15px Comfortaa, sans-serif; cursor: pointer; }

.pf-ph-txt { opacity: .55; border-style: dashed !important; cursor: pointer; }

/* portfolio: reordering controls (editor only) */
.pf-ctl { display: flex; align-items: center; gap: 6px; margin-top: 10px; align-self: flex-start; }
.pf-ctl .pf-x-client { margin-top: 0; }
.pf-x-move { position: static; min-width: 26px; padding: 0; font-size: 14px; line-height: 1; }
.pf-x-move[disabled] { opacity: .3; cursor: default; }
/* the client name is invisible on the site, so the control shows its value */
.pf-x-name { position: static; margin-top: 0; max-width: 190px; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }
.pf-card.pf-moved { animation: pf-moved 1.4s ease; }
@keyframes pf-moved {
  0%, 60% { box-shadow: 0 0 0 3px #6B4BD6; }
  100% { box-shadow: 0 0 0 3px rgba(107,75,214,0); }
}

/* the sentence under a page heading: no hard cap, the fitter keeps it on one line */
.hero-lead { max-width: 100%; }

/* Footer bottom row. The address is stored with line breaks so the phone can
   stack it; on wider screens those breaks are dropped and it reads as one line
   (each break is preceded by a space, so the words stay apart when it does).
   The row's layout lives in an inline style, so the phone rules have to win. */
.foot-bot [data-e$="-f2"] br { display: none; }

@media (max-width: 600px) {
  /* brand details down the left, address flush right, both ending on the same
     line so the footer is squared off on both edges */
  .foot-bot { display: grid !important; grid-template-columns: 1fr auto;
    align-items: end !important; column-gap: 20px !important; row-gap: 4px !important;
    justify-content: stretch !important; }
  .foot-meta { display: contents !important; }
  .foot-bot [data-e$="-f1"] { grid-column: 1; grid-row: 1; }
  .foot-bot [data-e$="-f3"] { grid-column: 1; grid-row: 2; }
  .foot-bot [data-e$="-f4"] { grid-column: 1; grid-row: 3; }
  .foot-bot [data-e$="-f2"] { grid-column: 2; grid-row: 1 / 4; align-self: end;
    text-align: right; }
  .foot-bot [data-e$="-f2"] br { display: inline; }
}

/* Spacing scale for a heading and the single line that supports it. The gap is
   tied to the heading's size, so a bigger heading gets more air and the pair
   still reads as one unit:
     heading <= 20px  ->  8px      (cards, numbered sections)
     heading 21-32px  -> 12px      (section headings, sub-page h1 + lead)
     heading >= 33px  -> 16px      (the dark call-to-action band)
   A heading followed by paragraphs is a different pair and keeps more room. */
.cta-head { gap: 16px; }

/* Pricing-card tiers: a name with its price on one line and a note beneath.
   Every colour is taken from the card through currentColor, so the light cards
   and the dark one share one set of rules. The box collapses to nothing when a
   card has no tiers, which is how every card starts. */
.tier-box { display: flex; flex-direction: column; }
.tier-box:empty { display: none; }
.tier-row {
  position: relative; padding: 11px 13px; display: flex; flex-direction: column; gap: 3px;
  border: 1.5px solid rgba(34, 26, 40, .12);
  border-color: color-mix(in srgb, currentColor 14%, transparent);
  border-radius: 12px;
}
.tier-row + .tier-row { margin-top: 8px; }
.tier-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.tier-name { font: 700 13.5px Comfortaa, sans-serif; color: inherit; }
.tier-price { font: 700 12.5px "Space Mono", Consolas, Menlo, monospace; color: inherit; white-space: nowrap; }
.tier-note { font: 500 11.5px / 1.45 Comfortaa, sans-serif; color: inherit; opacity: .62; }

/* Shown in the lightbox when a clip will not decode on this device, so a
   failure reaches the visitor instead of leaving them with a black box. */
.pf-fail {
  display: flex; flex-direction: column; gap: 10px; align-items: center; text-align: center;
  padding: 34px 26px; background: #221A28; color: #FAF8F4; border-radius: 18px;
  max-width: 30ch; font: 500 14px/1.6 Comfortaa, sans-serif;
}
.pf-fail b { font: 700 16px Comfortaa, sans-serif; }
.pf-fail span { color: #A197AE; font-size: 13px; }
.pf-fail a {
  color: #221A28; background: #B79CFF; border-radius: 999px; padding: 9px 18px;
  font: 700 13px Comfortaa, sans-serif; text-decoration: none;
}
.pf-fail a + a { background: transparent; color: #B79CFF; border: 1.5px solid #B79CFF; }

/* A grid row is as tall as its tallest card, so the one carrying three tiers
   was stretching the three beside it into empty space. Each card ends after its
   own content instead. Fixed column fractions were the other way to even it up,
   and they broke below 1440px: the four cards only just fit across 1200px, so
   any share taken from one pushed another past its own minimum. */
/* the grid carries align-items: stretch in an inline style, which wins
   against the stylesheet unless this says otherwise */
[data-grid$="sluzby-g1"] { align-items: start !important; }

/* Phone touch-ups from the pre-client check. The portfolio tags are a 10.5px
   pill that reads fine on a desktop and too small held in a hand; the header
   logo is a 25px-tall link, so its hit area grows without the mark moving. */
@media (max-width: 600px) {
  .pf-tag { font-size: 12px; }
}
a[aria-label="šmrnc - domov"] { position: relative; }
a[aria-label="šmrnc - domov"]::after { content: ""; position: absolute; inset: -11px -8px; }