/* YABI 2.0 v3 – Služby. Návrh: Services / Content / Desktop 674:6137, mobil. Zdieľa .intro/.faq z home.css. */
.svc-page{max-width:calc(var(--content) + 2 * var(--gutter));margin:0 auto;padding:220px var(--gutter) 120px;display:flex;flex-direction:column;gap:160px}
.svc-h2{font-size:64px;line-height:64px;letter-spacing:-2.56px}

/* Intro */
.svc-intro{position:relative;display:flex;flex-direction:column;gap:72px}
.svc-intro__title{font-size:120px;line-height:120px;letter-spacing:-6px;max-width:1100px}
.svc-intro__copy{display:flex;flex-direction:column;gap:36px;align-items:flex-start;max-width:560px}
.svc-badge{position:absolute;right:37px;top:24px;width:220px;height:220px;border-radius:50%;background:var(--orange);color:var(--ink);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;font-size:32px;line-height:32px;letter-spacing:-.8px;transform:rotate(8deg)}
.svc-badge strong{font-weight:700}

/* Papier so zahnutým rohom (CSS namiesto SVG) */
.paper{--cut:52px;--bg:var(--paper-dark);--fg:var(--ink);position:relative;isolation:isolate;color:var(--fg);filter:drop-shadow(0 24px 24px rgba(0,10,23,.12))}
.paper::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--bg);border-radius:var(--r-main);clip-path:polygon(0 0,calc(100% - var(--cut)) 0,100% var(--cut),100% 100%,0 100%)}
.paper::after{content:"";position:absolute;top:0;right:0;width:var(--cut);height:var(--cut);background:rgba(0,11,22,.2);clip-path:polygon(0 0,100% 100%,0 100%);border-bottom-left-radius:6px}

/* S čím pomáhame */
.svc-offer{display:flex;flex-direction:column;gap:56px}
.offer{list-style:none;margin:0;padding:0;position:relative;height:400px}
.offer__card{position:absolute;width:296px;height:360px;padding:32px;display:flex;flex-direction:column;justify-content:space-between}
.offer__title{font-size:48px;line-height:48px;letter-spacing:-2.16px;max-width:220px}
.offer__text{max-width:232px}
.offer__card--1{--bg:var(--red);--fg:var(--paper);left:calc(4.66px);top:8px;transform:rotate(-1.5deg)}
.offer__card--2{--bg:var(--primary);--fg:var(--paper);left:calc(25.37% + 3px);top:31px;transform:rotate(1deg)}
.offer__card--3{--bg:var(--green);left:calc(51.25% + 3px);top:9.5px;transform:rotate(-1deg)}
.offer__card--4{--bg:var(--orange);left:calc(100% - 300.6px);top:31.8px;transform:rotate(1.5deg)}
.langs{display:flex;align-items:center;gap:20px;font-size:32px;line-height:32px;letter-spacing:-.8px}
.langs__key{display:inline-flex;align-items:center;justify-content:center;width:56px;height:56px;border-radius:var(--r-btn);background:var(--ink);color:var(--paper);font-weight:700;font-size:24px;letter-spacing:-.17px;transform:rotate(4deg);flex:none}
.langs__key--en{transform:rotate(-5deg)}

/* Pre koho */
.svc-audience{display:flex;gap:48px;align-items:flex-start}
.svc-audience__title{flex:none;width:320px;font-size:48px;line-height:48px;letter-spacing:-2.16px}
.svc-audience__text{flex:1;font-size:48px;line-height:48px;letter-spacing:-2.16px}

/* Proces – vejár kariet */
.fan-panel{background:var(--ink);color:var(--paper);border-radius:var(--r-main);padding:64px 48px;display:flex;flex-direction:column;gap:48px;overflow:clip}
.fan-panel__head{display:flex;justify-content:space-between;align-items:flex-end;gap:48px}
.fan-panel__heading{display:flex;flex-direction:column;gap:20px;align-items:flex-start}
.chip--dark{background:var(--white-5);border-color:var(--white-20);color:var(--paper)}
.chip--dark::before{background:var(--paper)}
.fan-panel__perex{max-width:380px}
.fan{list-style:none;margin:0;padding:0;position:relative;height:521px;--w:232px}
.fan__card{--bg:var(--red);--fg:var(--paper);--tagbg:var(--paper);--tagfg:var(--ink);position:absolute;width:var(--w);height:420px;left:calc(var(--x) * (100% - var(--w)));top:var(--y);transform:rotate(var(--r));background:var(--bg);color:var(--fg);border-radius:var(--r-main);padding:24px;display:flex;flex-direction:column;justify-content:space-between;box-shadow:0 16px 28px -6px rgba(0,0,0,.3);transition:transform .25s ease,top .25s ease,box-shadow .25s ease;outline:none}
/* Obal obsahu karty (role=group, aria-roledescription=slide) – li ostáva listitem; obal preberá flex rozloženie li. */
.fan__slide{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;justify-content:space-between}
.fan__card--blue{--bg:var(--primary)}
.fan__card--green{--bg:var(--green)}
.fan__card--orange{--bg:var(--orange)}
.fan__card--dark{--fg:var(--ink);--tagbg:var(--ink);--tagfg:var(--paper)}
.fan__card--1{--x:.054;--y:49px;--r:-9deg}
.fan__card--2{--x:.2373;--y:19px;--r:-5deg}
.fan__card--3{--x:.416;--y:30px;--r:0deg}
.fan__card--4{--x:.6077;--y:11px;--r:1.5deg}
.fan__card--5{--x:.7913;--y:39px;--r:5deg}
.fan__card--6{--x:.9724;--y:86px;--r:9deg}
@media (hover:hover){.fan__card:hover{top:calc(var(--y) - 40px);transform:rotate(0deg);box-shadow:0 32px 48px -6px rgba(0,0,0,.45);z-index:2}}
.fan__card:focus-visible{top:calc(var(--y) - 40px);transform:rotate(0deg);box-shadow:0 0 0 3px var(--paper),0 32px 48px -6px rgba(0,0,0,.45);z-index:2}
.fan__top{display:flex;justify-content:space-between;font-weight:700}
.fan__num{font-size:48px;line-height:48px;letter-spacing:-2.16px}
.fan__mini{font-size:16px;line-height:24px}
.fan__copy{display:flex;flex-direction:column;gap:12px}
.fan__title{font-size:32px;line-height:32px;letter-spacing:-.8px}
.fan__text{font-size:14px;line-height:20px;letter-spacing:-.14px}
.fan__you{display:flex;gap:10px;align-items:flex-start;font-size:14px;line-height:20px;font-weight:500}
.fan__tag{flex:none;background:var(--tagbg);color:var(--tagfg);border-radius:var(--r-chip);padding:4px 8px}
.fan-carousel{display:flex;flex-direction:column;gap:inherit}
.fan-dots{display:none}
.fan-hint--mob{display:none}

/* Materiály */
.svc-mat{display:flex;gap:64px;align-items:center}
.svc-mat__copy{flex:none;width:440px;display:flex;flex-direction:column;gap:28px}
.svc-mat__copy p{max-width:420px}
.mat{list-style:none;margin:0;padding:0;flex:1;min-width:0;position:relative;height:440px}
.mat__card{--cut:40px;position:absolute;width:230px;height:250px;padding:28px;display:flex;flex-direction:column;justify-content:flex-end;gap:16px}
.mat__card p{max-width:174px}
.mat__title{font-size:48px;line-height:48px;letter-spacing:-2.16px}
.mat__card--1{left:calc(.02 * (100% - 230px));top:48px;transform:rotate(4deg)}
.mat__card--2{left:calc(.485 * (100% - 230px));top:23px;transform:rotate(-3deg)}
.mat__card--3{left:calc(.943 * (100% - 230px));top:54px;transform:rotate(2deg)}
.mat__note{position:absolute;left:calc(.68 * (100% - 420px));top:318px;width:420px;border:1.5px dashed var(--ink);border-radius:var(--r-main);padding:24px 28px;display:flex;flex-direction:column;gap:12px;transform:rotate(-1deg);background:var(--paper)}

/* Po spustení */
.svc-after{background:var(--primary);color:var(--paper);border-radius:var(--r-main);padding:72px 64px;display:flex;gap:64px;align-items:center}
.svc-after__copy{flex:1;min-width:0;display:flex;flex-direction:column;gap:28px}
.svc-after__copy p{max-width:520px}
.svc-after__img{flex:none;width:500px;height:340px;object-fit:contain;border-radius:var(--r-main)}

@media (max-width:1279px){
  .svc-intro__title{font-size:96px;line-height:96px;letter-spacing:-4.8px}
  .svc-badge{width:180px;height:180px;font-size:26px;line-height:26px;right:0}
  .offer{height:auto;display:grid;grid-template-columns:repeat(2,1fr);gap:32px}
  .offer__card{position:relative;left:auto;top:auto;width:auto;height:320px}
  .svc-audience__text{font-size:36px;line-height:40px;letter-spacing:-1.4px}
  .svc-mat{flex-direction:column;align-items:stretch}
  .svc-mat__copy{width:auto}
  .mat{flex:none;width:760px;max-width:100%;margin:0 auto}
  .svc-after{flex-direction:column;align-items:stretch}
  .svc-after__img{width:100%;max-width:500px;height:auto;align-self:center}
}
@media (max-width:1023px){
  .svc-page{gap:120px}
  .svc-intro__title{font-size:64px;line-height:64px;letter-spacing:-2.8px;padding-right:200px}
  .svc-intro__title .hero__line{white-space:normal}
  .svc-audience{flex-direction:column;gap:24px}
  .svc-audience__title{width:auto}
  /* Vejár → vodorovný posuv so snapom */
  .fan{height:auto;display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:0;padding:12px 4px 24px;margin:0 -4px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .fan::-webkit-scrollbar{display:none}
  .fan__card{position:relative;left:auto;top:auto;flex:none;width:260px;height:380px;transform:none;scroll-snap-align:start}
  .fan__card:nth-child(odd){transform:rotate(-2deg)}
  .fan__card:nth-child(even){transform:rotate(2deg)}
  .fan__card:focus-visible{top:auto}
  /* Pager: bodka 8 × 8, aktívna 24 × 8. Tlačidlo 24 × 24 px (aktívne 40 × 24) s bodkou v strede (target-size),
     preto medzera medzi bodkami 16 px; záporný okraj drží prvú bodku zarovnanú s textom. */
  .fan-dots{display:flex;margin-block:-8px;margin-inline-start:-8px}
  .fan-dots[hidden]{display:none}
  .fan-dots button{position:relative;width:24px;height:24px;padding:0;border:0;background:none;cursor:pointer}
  .fan-dots button::before{content:"";position:absolute;left:8px;top:8px;width:8px;height:8px;border-radius:4px;background:rgba(255,255,255,.3)}
  .fan-dots button[aria-current="true"]{width:40px}
  .fan-dots button[aria-current="true"]::before{width:24px;background:var(--paper)}
  .fan-dots button:focus-visible{outline-color:var(--paper);outline-offset:0;border-radius:4px}
  .fan-hint--desk{display:none}.fan-hint--mob{display:inline}
  .fan-panel__head{flex-direction:column;align-items:flex-start;gap:20px}
  .fan-panel{gap:32px}
}
/* Mobil podľa rámu Services / Mobile 684:2643 (390 px): sekcie 160 px od seba, nadpisy 44/48, text 18/24. */
@media (max-width:767px){
  .svc-page{padding:216px var(--gutter) 120px;gap:160px}
  .svc-h2{font-size:44px;line-height:48px;letter-spacing:-1.32px}
  .svc-intro{gap:72px}
  .svc-intro__title{font-size:44px;line-height:48px;letter-spacing:-1.32px;padding-right:0}
  .svc-intro__title .hero__line{white-space:normal}
  .svc-intro__copy{gap:36px;max-width:none}
  .svc-intro__copy .t-p-lg{font-size:18px;line-height:24px;letter-spacing:-.36px}
  .svc-intro__copy .btn{width:213px}
  .svc-badge{top:auto;bottom:-34px;right:0;width:121px;height:121px;font-size:18px;line-height:24px;letter-spacing:-.36px;gap:0}
  .svc-badge strong{font-size:16px;letter-spacing:-.16px}
  .svc-offer{gap:56px}
  /* Karty 350 × 360, text pri spodnom okraji; rozostup ako v návrhu (16 px medzi otočenými kartami). */
  .offer{grid-template-columns:1fr;gap:23px;padding-block:4.5px}
  .offer__card{height:360px;padding:24px}
  .offer__card--1{transform:rotate(-1.5deg)}.offer__card--2{transform:rotate(1deg)}.offer__card--3{transform:rotate(-1deg)}.offer__card--4{transform:rotate(1.5deg)}
  .offer__title{font-size:32px;line-height:36px;letter-spacing:-.8px;max-width:none}
  .offer__text{font-size:18px;line-height:24px;letter-spacing:-.36px;max-width:none}
  .langs{flex-wrap:wrap;font-size:32px;line-height:32px;letter-spacing:-.8px;gap:24px 20px}
  .langs__text{flex-basis:100%}
  .svc-audience{gap:24px}
  .svc-audience__title{font-size:32px;line-height:36px;letter-spacing:-.8px}
  .svc-audience__text{font-size:18px;line-height:24px;letter-spacing:-.36px}
  .fan-panel{padding:40px 24px;margin-inline:0;gap:32px}
  .fan-panel__head{gap:16px}
  .fan-panel__perex{font-size:18px;line-height:24px;letter-spacing:-.36px}
  .fan{padding:24px 4px}
  .fan__card{width:232px;height:420px}
  .fan__card:nth-child(odd){transform:rotate(2.5deg)}
  .fan__card:nth-child(even){transform:rotate(-2.5deg)}
  .fan-dots{margin-block:-8px}
  .svc-mat{gap:64px}
  .svc-mat__copy{gap:28px}
  .svc-mat__copy p{font-size:18px;line-height:24px;letter-spacing:-.36px}
  /* Karty 350 × 220 otočené 4° / −3° / 2°, poznámka 350 × 140 (−1°); odstupy podľa návrhu. */
  .mat{height:auto;width:auto;display:flex;flex-direction:column;gap:0;padding-top:12px}
  .mat__card{position:relative;left:auto;top:auto;width:100%;height:220px}
  .mat__card--1{transform:rotate(4deg)}
  .mat__card--2{transform:rotate(-3deg);margin-top:55px}
  .mat__card--3{transform:rotate(2deg);margin-top:13px}
  .mat__card p{max-width:none}
  .mat__title{font-size:32px;line-height:36px;letter-spacing:-.8px}
  .mat__note{position:relative;left:auto;top:auto;width:100%;min-height:140px;margin-top:31px;padding:24px 28px}
  .svc-after{padding:72px 24px;gap:0}
  .svc-after__copy p{font-size:18px;line-height:24px;letter-spacing:-.36px}
  .svc-after__img{width:100%;height:340px;max-width:none}
}

/* Paper cards lift and tilt only for desktop pointers and full motion. */
@media (min-width:768px) and (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
  .offer__card,.mat__card{transition:translate .3s cubic-bezier(.22,1,.36,1),rotate .3s ease,filter .3s ease}
  .offer__card:hover,.mat__card:hover{translate:0 -12px;rotate:-2deg;filter:drop-shadow(0 32px 28px rgba(0,10,23,.2));z-index:3}
  .offer__card:nth-child(even):hover,.mat__card:nth-child(even):hover{rotate:2deg}
}
/* Mobile: content-height paper cards, tighter rhythm, smaller fold that never covers the title. */
@media (max-width:767px){
  .offer{gap:16px}
  .offer__card{--cut:32px;height:auto;justify-content:flex-start;gap:12px}
  .offer__title{max-width:calc(100% - 8px)}

  .mat__card{--cut:32px;height:auto;padding:24px;justify-content:flex-start;gap:8px}
  .mat__title{max-width:calc(100% - 8px)}
  .mat__card--2{margin-top:32px}
  .mat__card--3{margin-top:24px}
  .mat__note{min-height:0;margin-top:24px}
}

/* ================================================================
   PATCH → append to the very END of css/sluzby.css
   "Pre koho to je / Who it is for" redesign on /sluzby/ and /en/sluzby/ (Figma 986:85428, 1280 × 580).
   Scoped to .svc-aud (section also keeps .svc-audience; (0,2,0) selectors beat the old .svc-audience rules
   in every media query). No other .svc section, shared font rule or Home is touched. Design only, no animation.
   Markup unchanged (svc-audience-sk.html / svc-audience-en.html).
   ================================================================ */

/* Desktop grid: two equal halves like the 1280 frame: (1280 − 48) / 2 = 616px each.
   Narrower content boxes split evenly too, e.g. 1200px viewport − 2 × gutter (40px) = 1120 → 536 + 48 + 536,
   so the text column is never squeezed by a fixed 616px illustration column. */
.svc-audience.svc-aud{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:48px;align-items:center}
.svc-aud__copy{display:flex;flex-direction:column;align-items:flex-start;gap:24px;max-width:560px}
/* Headline size not in the export notes: 48/52 like the other services h2 at this size – verify against Figma. */
.svc-aud__title{font-size:48px;line-height:52px;letter-spacing:-2.16px}
.svc-aud__not{color:var(--ink-gray);text-decoration:line-through;text-decoration-thickness:.06em}
.svc-aud__yes{color:var(--primary)}
.svc-aud__text{max-width:480px;font-size:18px;line-height:24px;letter-spacing:-.36px;color:var(--ink-gray)}
/* Screen readers hear "…priniesť nie pekný obrázok, ale dopyty…" instead of an unannounced strike-through. */
.svc-aud__sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}

/* Illustration: 580px tall box (art width W = column width, 536–616px on desktop).
   Rotated browser centred; notes and badge placed inside the box with insets that cover their rotation. */
.svc-aud__art{position:relative;height:580px;display:grid;place-items:center}
/* 400 × 450 at 4° → bounding box ≈ 430 × 477, i.e. x (W − 430)/2 … (W + 430)/2, y 51…529: inside the box. */
.svc-aud__browser{width:400px;height:450px;display:flex;flex-direction:column;background:var(--paper);border:1px solid var(--grey-20);border-radius:24px;box-shadow:0 24px 48px -16px rgba(0,10,23,.18);overflow:hidden;transform:rotate(4deg)}
.svc-aud__bar{display:flex;align-items:center;gap:16px;padding:14px 18px;border-bottom:1px solid var(--grey-20)}
.svc-aud__dots{display:flex;gap:6px}
.svc-aud__dots>span{width:10px;height:10px;border-radius:50%;background:var(--grey-20)}
.svc-aud__url{flex:1;height:22px;border-radius:999px;background:var(--paper-dark)}
.svc-aud__page{flex:1;display:flex;flex-direction:column;align-items:flex-start;gap:12px;padding:32px 28px}
.svc-aud__sk{display:block;width:100%;height:12px;border-radius:6px;background:var(--paper-dark)}
.svc-aud__sk--h{width:78%;height:22px;border-radius:8px}
.svc-aud__sk--h2{width:56%;height:22px;border-radius:8px}
.svc-aud__sk--short{width:64%}
/* Visual order inside the mock (DOM unchanged): skeleton → tiles → CTA + call at the bottom of the page,
   so the mid-left notification lies over skeleton tiles and never over the blue CTA. */
.svc-aud__tiles{order:1;display:flex;gap:12px;width:100%;margin-top:8px}
.svc-aud__tiles>span{flex:1;height:72px;border-radius:12px;background:var(--paper-dark)}
.svc-aud__cta-wrap{order:2;position:relative;display:inline-flex;margin-top:auto}
.svc-aud__call{order:2;font-size:14px;line-height:20px;letter-spacing:-.14px;color:var(--primary);text-decoration:underline;text-underline-offset:2px}
.svc-aud__cta{padding:14px 22px;border-radius:999px;background:var(--primary);color:var(--paper);font-size:12px;line-height:14px;font-weight:500;letter-spacing:.02em;text-transform:uppercase;white-space:nowrap}
.svc-aud__cursor{position:absolute;right:-14px;bottom:-16px;display:block;width:26px;height:26px}

/* Notifications: white, radius 24, soft shadow; first top-right, second mid-left, third bottom-right.
   Width min(268px, 46% of W): 268px at W 616, ≈ 246px at W 536 (keeps the bottom-right card clear of the CTA).
   Insets 8px: a ±2° turn of a ~130px tall card adds ≈ 130 · sin 2° / 2 ≈ 2.3px per side, so the rotated
   corners stay inside the art box (no horizontal scroll). The box-shadow may extend into the page gutter;
   shadows do not create scroll and nothing clips this section. */
.svc-aud__note{position:absolute;z-index:1;display:flex;align-items:flex-start;gap:12px;width:min(268px,46%);margin:0;padding:16px;background:var(--paper);border-radius:24px;box-shadow:0 16px 32px -8px rgba(0,10,23,.16)}
.svc-aud__note--1{top:32px;right:8px;transform:rotate(-2deg)}
/* Mid-left, below the badge (badge ends at 232px → 24px gap) and above the CTA (≈ 409px). */
.svc-aud__note--2{top:256px;left:8px;transform:rotate(1.5deg)}
.svc-aud__note--3{bottom:32px;right:8px;transform:rotate(-1deg)}
.svc-aud__plus{flex:none;display:flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:10px;font-size:16px;line-height:1;font-weight:700}
.svc-aud__plus--blue{background:var(--primary);color:var(--paper)}
.svc-aud__plus--green{background:var(--green);color:var(--ink)}
.svc-aud__plus--orange{background:var(--orange);color:var(--ink)}
.svc-aud__note-body{display:flex;flex-direction:column;gap:2px;min-width:0}
.svc-aud__meta{font-size:12px;line-height:16px;color:var(--ink-gray)}
.svc-aud__note-title{font-size:16px;line-height:22px;font-weight:500;letter-spacing:-.16px}
.svc-aud__note-text{font-size:14px;line-height:20px;letter-spacing:-.14px}
/* Badge at the browser's upper-left corner as in the reference (≈ left 24 / top 100 in the 580 art).
   The rotated browser's top-left corner is at ≈ (W/2 − 184, 52) and its left edge at x ≈ W/2 − 190 here,
   so the 132px circle (x 24–156, y 100–232) overlaps that corner. It stays left of the top notification
   (x ≥ W − 8 − 46% W ≥ 260px) and clear of the copy column (48px grid gap). A circle keeps its box when rotated. */
.svc-aud__badge{position:absolute;z-index:2;left:24px;top:100px;display:flex;align-items:center;justify-content:center;width:132px;height:132px;margin:0;padding:16px;border-radius:50%;background:var(--orange);color:var(--ink);font-size:18px;line-height:20px;font-weight:500;letter-spacing:-.36px;text-align:center;transform:rotate(-10deg)}

/* Tablet: copy above, illustration below, same composition up to 616px wide. */
@media (max-width:1199px){
  .svc-audience.svc-aud{grid-template-columns:minmax(0,1fr);gap:48px}
  .svc-aud__art{width:min(616px,100%);justify-self:center}
}

/* Mobile proposal (no export): copy first, then the browser, then the three notes in reading order,
   overlapping the browser a little. Real text sizes (12/14/16px), nothing scaled or clipped at 320–390px. */
@media (max-width:767px){
  .svc-audience.svc-aud{gap:40px}
  .svc-aud__title{font-size:32px;line-height:36px;letter-spacing:-.8px}
  /* 56px top padding reserves room for the badge inside the art box (badge 96px: 56px above the browser,
     40px over its top-left corner), so it never reaches up towards the copy. */
  .svc-aud__art{height:auto;display:flex;flex-direction:column;align-items:center;padding-top:56px}
  /* 2° on a ~360px tall mock adds ≈ 6px per side; the 12px side margins absorb it. */
  .svc-aud__browser{width:calc(100% - 24px);max-width:360px;height:auto;transform:rotate(2deg)}
  .svc-aud__page{padding:24px 20px 20px}
  .svc-aud__tiles>span{height:56px}
  .svc-aud__cta-wrap{margin-top:16px}
  /* Unrotated in flow, so no rotation reserve is needed; 12px side margin. */
  .svc-aud__note{position:relative;top:auto;right:auto;bottom:auto;left:auto;width:min(300px,calc(100% - 24px));margin-top:12px;transform:none}
  .svc-aud__note--1{align-self:flex-end;margin-top:-40px}
  .svc-aud__note--2{align-self:flex-start}
  .svc-aud__note--3{align-self:flex-end}
  .svc-aud__badge{top:0;left:0;width:96px;height:96px;padding:10px;font-size:14px;line-height:16px;letter-spacing:-.14px}
}

.svc-aud__caption{grid-column:2;margin:-32px 0 0;text-align:center}@media(max-width:1199px){.svc-aud__caption{grid-column:1}}