/* Sweet SFX About 1.1.2: the About Us page in the home page's look and sizes (Home Hero / Version Guide): eyebrows,
   heavy Varela Round headings, Poppins text, red-underlined links, grey "carpet" panels (#f5f5f7), rounded photos.
   Fills its container (the page's 88% one, as on the home page). Everything is scoped to #sweet-sfx-about and set
   explicitly, so the theme's own heading, link and button styles don't reach in.
   Sizes: as the home page's at a laptop (headings 48, text 15, eyebrows 12, links 13.5, tile names 13.5, buttons 14),
   and scaled up on big screens as the home page is: --k = width / 1400, held back by the screen's height, between 1
   and 2.1 (set by about.js; phones stay at 1). */

#sweet-sfx-about { --k: 1; --red: #e50914; --carpet: #f5f5f7; --ab-head: 78px; width: 100%; color: #000; font-family: Poppins, sans-serif; font-weight: 300; font-size: calc(15px * var(--k)); line-height: 1.65; text-align: left; }
#sweet-sfx-about *, #sweet-sfx-about *::before, #sweet-sfx-about *::after { box-sizing: border-box; }
#sweet-sfx-about img { display: block; max-width: 100%; height: auto; border: 0; box-shadow: none; border-radius: 0; }
#sweet-sfx-about p { max-width: 70ch; margin: 0 0 calc(16px * var(--k)); padding: 0; color: inherit; font: inherit; text-align: justify; } /* justified, as the About Us text always was (owner); about 70 characters a line */
#sweet-sfx-about a { color: inherit; text-decoration: underline; text-underline-offset: 3px; box-shadow: none; }
#sweet-sfx-about a:hover { color: var(--red); }
#sweet-sfx-about figure { margin: 0; }
#sweet-sfx-about ol { list-style: none; margin: 0; padding: 0; }
#sweet-sfx-about button { margin: 0; font: inherit; color: inherit; background: none; border: 0; border-radius: 0; box-shadow: none; text-transform: none; letter-spacing: normal; }

#sweet-sfx-about .ab-sec { padding: calc(110px * var(--k)) 0 0; }
#sweet-sfx-about .ab-sec:last-child { padding-bottom: calc(120px * var(--k)); }
#sweet-sfx-about .ab-eyebrow { display: inline-flex; align-items: center; gap: calc(10px * var(--k)); margin: 0 0 calc(14px * var(--k)); color: var(--red); font-size: max(12px, calc(10px * var(--k))); font-weight: 600; line-height: 1; letter-spacing: .2em; text-transform: uppercase; }
#sweet-sfx-about .ab-eyebrow::before { content: ""; width: calc(28px * var(--k)); height: calc(2px * var(--k)); background: var(--red); }
#sweet-sfx-about .ab-title { margin: 0 0 calc(22px * var(--k)); padding: 0; color: #000; font-family: "Varela Round", sans-serif; font-weight: 900; font-size: calc(48px * var(--k)); line-height: 1.04; letter-spacing: -.015em; text-transform: none; } /* as the home page's Categories heading */
#sweet-sfx-about .ab-link { display: inline-flex; align-items: center; gap: calc(8px * var(--k)); margin-top: calc(8px * var(--k)); padding-bottom: calc(3px * var(--k)); border-bottom: calc(2px * var(--k)) solid var(--red); color: #000; font-size: max(13.5px, calc(12px * var(--k))); font-weight: 600; text-decoration: none; }
#sweet-sfx-about .ab-link::after { content: ""; width: calc(7px * var(--k)); height: calc(7px * var(--k)); border-right: calc(2px * var(--k)) solid currentColor; border-top: calc(2px * var(--k)) solid currentColor; transform: rotate(45deg); transition: transform .25s; }
#sweet-sfx-about .ab-link:hover { color: var(--red); }
#sweet-sfx-about .ab-link:hover::after { transform: translateX(4px) rotate(45deg); }
#sweet-sfx-about p a[href^="mailto"] { font-weight: 600; text-decoration: none; border-bottom: calc(2px * var(--k)) solid var(--red); }

/* 1. Who we are: text | covers of the games we've worked on (still: they aren't links) */
#sweet-sfx-about .ab-who { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: calc(70px * var(--k)); align-items: center; }
#sweet-sfx-about .ab-who.no-covers { grid-template-columns: minmax(0, 1fr); }
#sweet-sfx-about .ab-covers { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: calc(18px * var(--k)); }
#sweet-sfx-about .ab-cover img { width: 100%; aspect-ratio: 1; object-fit: cover; filter: drop-shadow(0 calc(12px * var(--k)) calc(18px * var(--k)) rgba(0,0,0,.18)); } /* the covers' own rounded, see-through corners */

/* 2. The videos: black, as the home page's player bar, with a faint glow of the current video; the heading and the
   list beside the video. The video is about two-thirds of the panel, or what the screen's height allows (less the
   site's header and the panel's padding), so all of it fits on one screen. The list is as tall as the video and
   scrolls rather than stretching it. */
#sweet-sfx-about .ab-vids { position: relative; isolation: isolate; display: flex; gap: calc(34px * var(--k)); padding: calc(34px * var(--k)); background: #0e0e10; color: #fff; border-radius: calc(22px * var(--k)); overflow: hidden; box-shadow: 0 30px 70px rgba(0,0,0,.22); }
#sweet-sfx-about .ab-glow { position: absolute; inset: -20%; z-index: -1; background-size: cover; background-position: center; filter: blur(70px) saturate(1.2); opacity: .16; transition: opacity .8s ease; }
#sweet-sfx-about .ab-glow::after { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse at 60% 40%, transparent 20%, #0e0e10 70%); }
#sweet-sfx-about .ab-vids .ab-title { color: #fff; margin-bottom: calc(18px * var(--k)); }
#sweet-sfx-about .ab-side { position: relative; flex: 1 1 calc(260px * var(--k)); min-width: calc(260px * var(--k)); }
#sweet-sfx-about .ab-in { position: absolute; inset: 0; display: flex; flex-direction: column; }
#sweet-sfx-about .ab-in > * { max-width: calc(560px * var(--k)); } /* very wide screens: the list stays a list */
#sweet-sfx-about .ab-yt { align-self: flex-start; display: inline-flex; align-items: center; gap: calc(8px * var(--k)); margin-top: calc(14px * var(--k)); padding-bottom: calc(3px * var(--k)); border-bottom: calc(2px * var(--k)) solid var(--red); color: #fff; font-size: max(13.5px, calc(12px * var(--k))); font-weight: 600; text-decoration: none; white-space: nowrap; }
#sweet-sfx-about .ab-yt::after { content: ""; width: calc(7px * var(--k)); height: calc(7px * var(--k)); border-right: calc(2px * var(--k)) solid currentColor; border-top: calc(2px * var(--k)) solid currentColor; transform: rotate(45deg); }
#sweet-sfx-about .ab-yt:hover { color: #fff; }
#sweet-sfx-about .ab-cards { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr); grid-auto-rows: min-content; gap: calc(6px * var(--k)); padding: 2px 6px 2px 0; overflow-y: auto; scrollbar-width: thin; scrollbar-color: #333 transparent; }
#sweet-sfx-about .ab-cards button { display: grid; grid-template-columns: calc(96px * var(--k)) minmax(0, 1fr); align-items: center; gap: calc(12px * var(--k)); width: 100%; padding: calc(5px * var(--k)); border-radius: calc(12px * var(--k)); text-align: left; cursor: pointer; transition: background .2s; }
#sweet-sfx-about .ab-cards button:hover { background: rgba(255,255,255,.06); }
#sweet-sfx-about .ab-cards button.is-on { background: rgba(255,255,255,.08); }
#sweet-sfx-about .ab-th { position: relative; display: block; aspect-ratio: 16 / 9; border-radius: calc(8px * var(--k)); overflow: hidden; outline: 2px solid transparent; outline-offset: 2px; transition: outline-color .2s; }
#sweet-sfx-about .ab-th img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.85) brightness(.8); transition: filter .3s; }
#sweet-sfx-about .ab-cards button:hover img, #sweet-sfx-about .ab-cards .is-on img { filter: none; }
#sweet-sfx-about .ab-cards .is-on .ab-th { outline-color: var(--red); }
#sweet-sfx-about .ab-t { display: block; color: #bbb; font-family: "Varela Round", sans-serif; font-size: calc(13.5px * var(--k)); font-weight: 900; line-height: 1.3; transition: color .2s; } /* as the home page's tile names */
#sweet-sfx-about .ab-cards button:hover .ab-t, #sweet-sfx-about .ab-cards .is-on .ab-t { color: #fff; }
#sweet-sfx-about .ab-bars { position: absolute; right: 5px; bottom: 5px; display: none; align-items: flex-end; gap: calc(2px * var(--k)); height: calc(16px * var(--k)); padding: calc(3px * var(--k)) calc(4px * var(--k)); border-radius: 5px; background: var(--red); }
#sweet-sfx-about .ab-bars i { width: calc(2px * var(--k)); height: 100%; background: #fff; border-radius: 1px; transform-origin: bottom; animation: ab-eq .9s ease-in-out infinite; }
#sweet-sfx-about .ab-bars i:nth-child(2) { animation-delay: -.3s; }
#sweet-sfx-about .ab-bars i:nth-child(3) { animation-delay: -.6s; }
@keyframes ab-eq { 0%, 100% { transform: scaleY(.3); } 50% { transform: scaleY(1); } }
#sweet-sfx-about .ab-vids.is-playing .is-on .ab-bars { display: flex; } /* only while the YouTube player says it's playing */
#sweet-sfx-about .ab-stage { position: relative; flex: none; width: min(65%, calc((100vh - var(--ab-head) - 152px) * 16 / 9)); aspect-ratio: 16 / 9; border-radius: calc(14px * var(--k)); overflow: hidden; background: #000; box-shadow: 0 20px 50px rgba(0,0,0,.5); perspective: 1400px; }
#sweet-sfx-about .ab-poster { position: absolute; inset: 0; display: block; width: 100%; height: 100%; padding: 0; cursor: pointer; transform-style: preserve-3d; }
#sweet-sfx-about .ab-poster img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s cubic-bezier(.2,.7,.2,1); }
#sweet-sfx-about .ab-poster:hover img { transform: scale(1.03); }
#sweet-sfx-about .ab-poster::after { content: ""; position: absolute; inset: 0; background: rgba(0,0,0,.12); transition: background .3s; } /* a light dim; nothing over the video's own text */
#sweet-sfx-about .ab-poster:hover::after { background: rgba(0,0,0,0); }
#sweet-sfx-about .ab-play { position: absolute; z-index: 1; left: 50%; top: 50%; width: calc(84px * var(--k)); height: calc(84px * var(--k)); transform: translate(-50%, -50%); border-radius: 50%; background: var(--red); transition: transform .25s; animation: ab-ring 2.2s ease-out infinite; }
#sweet-sfx-about .ab-play::before { content: ""; position: absolute; left: 39%; top: 50%; transform: translateY(-50%); border-left: calc(25px * var(--k)) solid #fff; border-top: calc(16px * var(--k)) solid transparent; border-bottom: calc(16px * var(--k)) solid transparent; }
#sweet-sfx-about .ab-poster:hover .ab-play { transform: translate(-50%, -50%) scale(1.08); }
@keyframes ab-ring { 0% { box-shadow: 0 14px 34px rgba(0,0,0,.35), 0 0 0 0 rgba(255,255,255,.45); } 70%, 100% { box-shadow: 0 14px 34px rgba(0,0,0,.35), 0 0 0 calc(24px * var(--k)) rgba(255,255,255,0); } }
#sweet-sfx-about .ab-stage iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* 3. Our studios: the grey carpet, photo | text, then up to three more photos */
#sweet-sfx-about .ab-carpet { position: relative; background: var(--carpet); border-radius: calc(22px * var(--k)); padding: calc(56px * var(--k)); }
#sweet-sfx-about .ab-studio { display: grid; grid-template-columns: minmax(0, 1fr) 48%; gap: calc(60px * var(--k)); align-items: center; } /* 1.1.3: the text as wide as Ultimate's (owner) */
#sweet-sfx-about .ab-studio.no-photo { grid-template-columns: minmax(0, 1fr); }
#sweet-sfx-about .ab-big { border-radius: calc(18px * var(--k)); overflow: hidden; aspect-ratio: 16 / 10.5; box-shadow: 0 22px 50px rgba(0,0,0,.16); }
#sweet-sfx-about .ab-big img { width: 100%; height: 100%; object-fit: cover; }
#sweet-sfx-about .ab-strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(18px * var(--k)); margin-top: calc(34px * var(--k)); }
#sweet-sfx-about .ab-strip.is-2 { grid-template-columns: repeat(2, 1fr); }
#sweet-sfx-about .ab-strip.is-1 { grid-template-columns: 1fr; }
#sweet-sfx-about .ab-strip img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: calc(14px * var(--k)); }

/* 4. Ultimate Source Sessions, and Get in touch under it, beside the Ultimate jars (their white background takes the
   carpet's grey) with a red badge */
#sweet-sfx-about .ab-ult { display: grid; grid-template-columns: minmax(0, 1fr) 48%; gap: calc(60px * var(--k)); align-items: center; } /* 1.1.3: the same columns as Our studios, so both texts line up (owner) */
#sweet-sfx-about .ab-ult.no-jars { grid-template-columns: minmax(0, 1fr); }
#sweet-sfx-about .ab-ult p:last-of-type { margin-bottom: 0; }
#sweet-sfx-about .ab-ult p, #sweet-sfx-about .ab-studio p { max-width: none; } /* 1.1.2: out to the divider line, still justified (owner) */
#sweet-sfx-about .ab-jars { position: relative; width: min(100%, calc(560px * var(--k)), 69.2%); margin: 0 auto; } /* 1.1.3: the jars' old size (36% of the box), in the middle of their wider column */
@media (min-width: 901px) { #sweet-sfx-about .ab-studio > :last-child, #sweet-sfx-about .ab-ult > :last-child { padding-right: calc(40px * var(--k)); } } /* 1.1.3: both texts in a little from the right, level (owner) */
#sweet-sfx-about .ab-jars img { width: 100%; mix-blend-mode: multiply; }
#sweet-sfx-about .ab-badge { position: absolute; left: 4%; top: 6%; display: grid; place-content: center; width: 30%; aspect-ratio: 1; border-radius: 50%; background: var(--red); color: #fff; text-align: center; box-shadow: 0 12px 26px rgba(0,0,0,.18); transform: rotate(-8deg); }
#sweet-sfx-about .ab-badge b { font-family: "Varela Round", sans-serif; font-weight: 900; font-size: calc(40px * var(--k)); line-height: 1; }
#sweet-sfx-about .ab-badge small { margin-top: 4px; font-size: calc(11px * var(--k)); font-weight: 600; letter-spacing: .12em; text-transform: uppercase; line-height: 1.2; }
#sweet-sfx-about .ab-touch { margin-top: calc(38px * var(--k)); padding-top: calc(34px * var(--k)); border-top: 1px solid #e0e0e5; }
#sweet-sfx-about .ab-touch.is-alone { margin-top: 0; padding-top: 0; border-top: 0; }
#sweet-sfx-about .ab-touch .ab-title { margin-bottom: calc(14px * var(--k)); }
#sweet-sfx-about .ab-cta { display: flex; flex-wrap: wrap; align-items: center; gap: calc(16px * var(--k)) calc(26px * var(--k)); margin-top: calc(22px * var(--k)); }
#sweet-sfx-about .ab-btn { display: inline-flex; align-items: center; gap: calc(10px * var(--k)); padding: calc(16px * var(--k)) calc(30px * var(--k)); border-radius: 999px; background: var(--red); color: #fff; font-size: calc(14px * var(--k)); font-weight: 600; line-height: 1.2; text-decoration: none; box-shadow: 0 10px 24px rgba(0,0,0,.14); transition: transform .2s, background .2s; }
#sweet-sfx-about .ab-btn::before { content: ""; width: calc(16px * var(--k)); height: calc(12px * var(--k)); flex: none; border: 2px solid currentColor; border-radius: 2px; background: linear-gradient(to top right, transparent calc(50% - 1px), currentColor 50%, transparent calc(50% + 1px)) left / 50% 100% no-repeat, linear-gradient(to top left, transparent calc(50% - 1px), currentColor 50%, transparent calc(50% + 1px)) right / 50% 100% no-repeat; } /* an envelope */
#sweet-sfx-about .ab-btn:hover, #sweet-sfx-about .ab-btn:focus { color: #fff; transform: translateY(-2px); background: #c80711; }
#sweet-sfx-about .ab-sign { font-family: "Varela Round", sans-serif; font-size: calc(20px * var(--k)); line-height: 1.3; } /* as the home page's player-bar title */

/* As you scroll (only once about.js is running, so nothing stays hidden without it): sections rise in */
#sweet-sfx-about.is-js .ab-rise { opacity: 0; transform: translateY(26px); transition: opacity .8s ease, transform .8s cubic-bezier(.2,.8,.2,1); }
#sweet-sfx-about.is-js .ab-rise.is-in { opacity: 1; transform: none; }

/* Phones and upright tablets: one column; the video on top, the list in a grid below; headings as the home page's
   on phones */
@media (max-width: 900px) {
  #sweet-sfx-about { --k: 1; font-size: 15px; }
  #sweet-sfx-about p { max-width: none; } /* 1.1.1: one column here, so the text runs the full width, as the covers and photos (owner) */
  #sweet-sfx-about .ab-sec { padding-top: 70px; }
  #sweet-sfx-about .ab-sec:last-child { padding-bottom: 70px; }
  #sweet-sfx-about .ab-title, #sweet-sfx-about .ab-vids .ab-title { font-size: 34px; }
  #sweet-sfx-about .ab-who, #sweet-sfx-about .ab-studio, #sweet-sfx-about .ab-ult { grid-template-columns: 1fr; gap: 30px; }
  #sweet-sfx-about .ab-covers { gap: 10px; }
  #sweet-sfx-about .ab-carpet { padding: 30px 22px; border-radius: 18px; }
  #sweet-sfx-about .ab-vids { flex-direction: column; padding: 24px 18px; gap: 18px; }
  #sweet-sfx-about .ab-stage { width: 100%; }
  #sweet-sfx-about .ab-side { order: 2; flex: none; min-width: 0; }
  #sweet-sfx-about .ab-in { position: static; }
  #sweet-sfx-about .ab-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; overflow: visible; padding: 0; }
  #sweet-sfx-about .ab-cards button { display: block; padding: 0; }
  #sweet-sfx-about .ab-cards button.is-on { background: none; }
  #sweet-sfx-about .ab-t { margin-top: 6px; font-size: 12px; }
  #sweet-sfx-about .ab-jars { width: 100%; max-width: 360px; margin: 0 auto; }
  #sweet-sfx-about .ab-strip { grid-template-columns: 1fr 1fr; }
  #sweet-sfx-about .ab-strip.is-3 img:last-child { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  #sweet-sfx-about.is-js .ab-rise { opacity: 1 !important; transform: none !important; transition: none !important; }
  #sweet-sfx-about .ab-play, #sweet-sfx-about .ab-bars i { animation: none; }
}

/* The theme turns buttons pink on hover and focus (Hello Elementor's reset): every button here sets its own */
#sweet-sfx-about .ab-poster:hover, #sweet-sfx-about .ab-poster:focus, #sweet-sfx-about .ab-poster:active { background: none; color: inherit; }
#sweet-sfx-about .ab-cards button:focus, #sweet-sfx-about .ab-cards button:active { background: rgba(255,255,255,.06); color: inherit; }
#sweet-sfx-about .ab-cards button.is-on:focus, #sweet-sfx-about .ab-cards button.is-on:hover { background: rgba(255,255,255,.08); }
#sweet-sfx-about button:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; }
@media (max-width: 900px) {
  #sweet-sfx-about .ab-cards button:focus, #sweet-sfx-about .ab-cards button:active, #sweet-sfx-about .ab-cards button.is-on:focus, #sweet-sfx-about .ab-cards button.is-on:hover { background: none; }
}

/* Tablets and phones (Elementor's 1024px): the page's boxed container goes full width there, so the block keeps the
   home page's 5% sides */
@media (max-width: 1024px) {
  #sweet-sfx-about { padding-left: 5%; padding-right: 5%; }
}
@media (max-width: 767px) {
  #sweet-sfx-about .ab-sec:first-child { padding-top: 30px; } /* the owner left the video opener off phones: the block starts under the header */
}

/* (1.1.4) (owner, 25 Oct 2026) One rule for the site's red labels: 12px up to 1512 wide, growing gently above it (about 13px at 1920, 15px at 2K, at most 17px), .2em spacing, the line 28/12 of the text and the gap 10/12, everywhere (Home Hero, Version Guide, About, Product Page, the shop's trail, 404). Before, each plugin scaled with its own --k, so at 2K they ranged from 12 to 18px. */
#sweet-sfx-about .ab-eyebrow { font-size: clamp(12px, calc(12px + (100vw - 1512px) * .0028), 19px) !important; letter-spacing: .2em !important; gap: .834em !important; }
#sweet-sfx-about .ab-eyebrow::before { flex: none; width: 2.334em !important; height: max(2px, .167em) !important; }

/* (1.1.5) (owner, 25 Oct 2026) One rule for the headings under the red labels: 44px up to 1512 wide, growing gently above it (about 47px at 1920, 52px at 2K, 62px at 4K, at most 64px), 34px on phones; tablets keep their own size. The red labels now also keep growing past 2K (at most 19px, the player captions 17px) so they stay in step on 4K. */
@media (min-width: 1025px) { html body #sweet-sfx-about .ab-title { font-size: clamp(44px, calc(44px + (100vw - 1512px) * .00763), 64px) !important; } }
@media (max-width: 767px) { html body #sweet-sfx-about .ab-title { font-size: 34px !important; } }

/* (1.1.6) (owner, 25 Oct 2026) One gap between sections, and above the footer: twice the heading size, 88px of white space at 1512, 104 at 2K, about 124 on 4K (at most 128), measured from the last text, picture or box of one section to the first of the next (the red label, or the section's grey box). The home hero and the top of the product page keep their own spacing (owner). Screens 1025px and wider; tablets and phones keep theirs. Before: 110 × k above each section (110 at 1512, 135 at 2K) and 120 × k under the last. The video opener and Who we are are unchanged. */
@media (min-width: 1025px) {
  html body #sweet-sfx-about > .ab-sec ~ .ab-sec { padding-top: clamp(88px, calc(88px + (100vw - 1512px) * .01527), 128px) !important; }
  html body #sweet-sfx-about > .ab-sec:last-of-type { padding-bottom: clamp(88px, calc(88px + (100vw - 1512px) * .01527), 128px) !important; }
}

/* (1.1.9, owner: "more inline so the jars are lined up with Ultimate Source Sessions, and the Sounding Sweet logo much bigger
   next to Get in touch"; its label the same as Beyond the shop and Work with us) Two rows: the jars beside the Ultimate text
   (tops level), the logo beside Get in touch (its label level with Work with us: the same space above it as the divider
   leaves). The jars a quarter smaller (291px at 1512) so they sit beside the Ultimate text; the logo 340px at 1512.
   The logo box is a plain block (not flex), so its label sits on a line as Work with us does and the two are level. */
#sweet-sfx-about .ab-ult.has-brand { grid-template-areas: "jars text" "brand touch"; align-items: start; row-gap: 0; }
#sweet-sfx-about .ab-ult.has-brand > .ab-ult-right { display: contents; }
#sweet-sfx-about .ab-ult.has-brand .ab-jars { grid-area: jars; width: min(100%, calc(291px * var(--k))); }
#sweet-sfx-about .ab-ult.has-brand .ab-ult-text { grid-area: text; }
#sweet-sfx-about .ab-ult.has-brand .ab-touch { grid-area: touch; }
#sweet-sfx-about .ab-brand { grid-area: brand; display: block; margin-top: calc(38px * var(--k)); padding-top: calc(34px * var(--k)); text-align: center; }
#sweet-sfx-about .ab-brand a { display: block; }
#sweet-sfx-about .ab-brand img { display: block; width: min(100%, calc(340px * var(--k))); height: auto; margin: calc(6px * var(--k)) auto 0; mix-blend-mode: multiply; transition: transform .25s cubic-bezier(.2,.8,.2,1); }
#sweet-sfx-about .ab-brand a:hover img { transform: scale(1.04); }
@media (min-width: 901px) { #sweet-sfx-about .ab-ult.has-brand .ab-ult-text, #sweet-sfx-about .ab-ult.has-brand .ab-touch { padding-right: calc(40px * var(--k)); } }
/* Phones and small tablets: one column, in reading order: jars, Ultimate, the logo, Get in touch */
@media (max-width: 900px) {
  #sweet-sfx-about .ab-ult.has-brand { grid-template-areas: "jars" "text" "brand" "touch"; row-gap: 30px; }
  #sweet-sfx-about .ab-ult.has-brand .ab-jars { width: 100%; max-width: 300px; }
  #sweet-sfx-about .ab-brand { margin-top: 0; padding-top: 0; }
  #sweet-sfx-about .ab-brand img { width: min(70%, 260px); }
  #sweet-sfx-about .ab-ult.has-brand .ab-touch { margin-top: 0; }
}

/* (1.1.9, owner: "shading in the bottom of the jars so they don't look square") the jar picture's white is lifted a touch (its floor
   is a light grey, a square edge on the carpet) and its sides and bottom fade out, leaving the jars and a soft shadow */
#sweet-sfx-about .ab-jars img { filter: brightness(1.04);
  -webkit-mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent), linear-gradient(to bottom, transparent, #000 4%, #000 84%, transparent 98%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent), linear-gradient(to bottom, transparent, #000 4%, #000 84%, transparent 98%);
  mask-composite: intersect; }
/* (1.1.9, owner: both logos side by side, Sounding Sweet "a bit bigger so that it matches the height of Sweet SFX") the two
   logos the same height (110px at 1512) with a thin line between; Sweet SFX is see-through, so it isn't blended */
#sweet-sfx-about .ab-brand-logos { display: flex; align-items: center; justify-content: center; gap: calc(26px * var(--k)); margin-top: calc(6px * var(--k)); }
#sweet-sfx-about .ab-brand .ab-brand-logos img { width: auto; max-width: 100%; height: calc(110px * var(--k)); margin: 0; }
#sweet-sfx-about .ab-brand .ab-brand-logos .ab-brand-sfx { mix-blend-mode: normal; flex: none; }
#sweet-sfx-about .ab-brand-rule { width: 1px; align-self: stretch; background: #d6d6dc; flex: none; }
#sweet-sfx-about .ab-brand-logos a { flex: 0 1 auto; min-width: 0; }
@media (max-width: 900px) {
  #sweet-sfx-about .ab-brand-logos { gap: 16px; }
  #sweet-sfx-about .ab-brand .ab-brand-logos img { height: 70px; }
}