/* About drawer (details.so Reveal Navigation 3.0, adapted). Clicking the name slides the whole page
   left and scales it to .96 to reveal the drawer behind it. Palette mapped to the site's tokens. */
[data-side-reveal-navigation] {
  --surface-1: var(--surface);
  --text-1: var(--ink);
  --text-2: var(--muted);
  --border-1: var(--surface-stroke);
  --border-2: var(--surface-stroke);
  --accent: var(--ink);
  --on-accent: var(--ink);
}
[data-theme="dark"] [data-side-reveal-navigation] { --surface-1: #0a0a0a; }
[data-side-reveal-navigation], [data-side-reveal-navigation] *, [data-side-reveal-navigation] *::before, [data-side-reveal-navigation] *::after { box-sizing: border-box; }
[data-side-reveal-navigation] .drawer p, [data-side-reveal-navigation] .drawer ul { margin: 0; padding: 0; }
[data-side-reveal-navigation] .drawer li { list-style: none; }
[data-side-reveal-navigation] .drawer a { color: inherit; text-decoration: none; }
[data-side-reveal-navigation] .cover { margin: 0; padding: 0; border: 0; background: none; color: inherit; font: inherit; cursor: pointer; }
[data-side-reveal-navigation] {
  --drawer-width: 560px;
  --drawer-gap: 16px;
  position: relative; height: 100dvh; overflow: hidden; isolation: isolate;
  background: var(--surface-1); color: var(--text-1);
}
@media (max-width: 900px) { [data-side-reveal-navigation] { --drawer-width: 420px; } }
@media (max-width: 600px) { [data-side-reveal-navigation] { --drawer-width: 100%; --drawer-gap: 0px; } }
[data-side-reveal-navigation] .drawer {
  position: absolute; inset: 0 0 0 auto; z-index: 1; width: var(--drawer-width); visibility: hidden;
  overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; background: var(--surface-1);
}
[data-side-reveal-navigation] .drawer .drawer-content { display: flex; flex-direction: column; gap: 36px; min-height: 100%; padding: 96px 40px 64px 24px; }
@media (max-width: 600px) { [data-side-reveal-navigation] .drawer .drawer-content { padding: 88px 24px 56px 20px; } }
[data-side-reveal-navigation] .drawer .drawer-head { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: -12px; }
/* Unicorn Studio scene (project rHyK3k7ZZo17NRTM9VjN), left-aligned above the hello. */
[data-side-reveal-navigation] .about-scene { width: 120px; height: 120px; flex: none; border-radius: 50%; overflow: hidden;
  border: 6px solid white; box-shadow: 0 20px 31px -3px rgba(0, 0, 0, 0.10); isolation: isolate; }
[data-side-reveal-navigation] .drawer .drawer-content .eyebrow { color: var(--text-2); font-size: 15px; line-height: 1.5; }
[data-side-reveal-navigation] .drawer-close { width: 44px; height: 44px; margin: -12px -12px -12px 0; display: grid; place-items: center; border: 0; border-radius: 999px;
  background: transparent; color: var(--ink); cursor: pointer; transition: background-color 150ms ease, transform 150ms var(--ease-out); }
[data-side-reveal-navigation] .drawer-close svg { width: 18px; height: 18px; }
@media (hover: hover) and (pointer: fine) { [data-side-reveal-navigation] .drawer-close:hover { background: color-mix(in srgb, var(--ink) 6%, transparent); } }
[data-side-reveal-navigation] .drawer-close:active { transform: scale(.94); }
[data-side-reveal-navigation] .drawer-close:focus-visible { outline: 2px solid currentColor; outline-offset: -2px; }
[data-side-reveal-navigation] .drawer .drawer-content { padding-top: 40px; }
[data-side-reveal-navigation] .drawer .drawer-content .legal { margin-top: -8px; color: var(--text-2); font-size: 13px; line-height: 1.5; }
[data-side-reveal-navigation] .drawer .drawer-content .divider { height: 1px; flex-shrink: 0; margin-top: -8px; background: var(--border-1); transform-origin: right center; }
/* About content sizing inside the drawer. */
/* Hello: 40px on a 14" MacBook Pro (1512px-wide viewport), scaling with the window; 32px floor on
   phones, 56px ceiling on big screens. */
[data-side-reveal-navigation] .drawer { --ab-hello: clamp(32px, calc(40 / 1512 * 100vw), 56px); --ab-bio: 16px; --ab-quote: 17px; }
[data-side-reveal-navigation] .page {
  position: absolute; inset: 0; z-index: 2; overflow: hidden; transform-origin: 50% 50%; background: var(--bg);
}
[data-side-reveal-navigation] .page .page-content {
  position: relative; height: 100%; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain;
  scrollbar-width: thin; scrollbar-color: var(--border-2) var(--bg);
  /* The site's body frame now lives here (this element owns scrolling). */
  display: grid; grid-template-rows: auto 1fr auto; padding: var(--pad);
}
[data-side-reveal-navigation] .page .cover { position: absolute; z-index: 1; inset: 0; width: 100%; height: 100%; }
[data-side-reveal-navigation] .page .cover:disabled { pointer-events: none; }
[data-side-reveal-navigation][data-active] .drawer { visibility: visible; }
[data-side-reveal-navigation][data-active] .page-content { overflow-y: hidden; }
/* Host page: body no longer frames or scrolls (page-content does). */
body:has([data-side-reveal-navigation]) { display: block; padding: 0; }

/* Kind words: a fanned stack of playing-card-shaped (5:7) cards, after the offer stack on
   viktaenergy.com/products/stall-to-store. Front card flat; the next two tilt out behind it; the
   leaving card flings off left or right. Quote set in Geist Serif, sized by JS to fill the card. */
.ab-quotes.is-cards { gap: 0; }
.ab-stage { position: relative; height: calc(var(--card-h) + 64px); --card-w: min(320px, 72%); --card-h: calc(var(--card-w-px, 320px) * 7 / 5); }
.ab-card { position: absolute; top: 50%; left: 50%; width: var(--card-w); aspect-ratio: 5 / 7; display: grid; grid-template-rows: auto 1fr auto; gap: 14px;
  padding: 24px 24px 22px; overflow: hidden; border-radius: 24px; background: var(--bg); color: var(--ink);
  border: 1px solid rgb(18 18 18 / 8%); box-shadow: 0 24px 56px rgb(0 0 0 / 10%);
  transform-origin: center; transition: transform .72s cubic-bezier(.16, 1, .3, 1), opacity .55s; pointer-events: none; }
.ab-card[data-tone="1"] { background: #121212; color: #fff; border-color: #121212; }
.ab-card[data-tone="1"] .ab-role { color: #8a8a8a; }
.ab-card[data-tone="2"] { background: #ececec; }
[data-theme="dark"] .ab-card { background: #1b1b1b; border-color: rgb(255 255 255 / 7%); box-shadow: 0 24px 56px rgb(0 0 0 / 55%); }
[data-theme="dark"] .ab-card[data-tone="1"] { background: #f4f4f4; color: #121212; border-color: #f4f4f4; }
[data-theme="dark"] .ab-card[data-tone="1"] .ab-role { color: #7a7a7a; }
[data-theme="dark"] .ab-card[data-tone="2"] { background: #2a2a2a; }
.ab-card[data-position="front"] { z-index: 4; opacity: 1; transform: translate3d(-50%, -50%, 0) rotate(0deg) scale(1); pointer-events: auto; }
.ab-card[data-position="second"] { z-index: 3; opacity: 1; transform: translate3d(calc(-50% - 27px), calc(-50% + 9px), 0) rotate(-8deg) scale(.95); }
.ab-card[data-position="third"] { z-index: 2; opacity: 1; transform: translate3d(calc(-50% + 29px), calc(-50% + 17px), 0) rotate(8deg) scale(.9); }
.ab-card[data-position="hidden"] { z-index: 1; opacity: 0; transform: translate3d(-50%, calc(-50% + 24px), 0) scale(.84); }
.ab-card[data-position="exit-left"] { z-index: 5; opacity: 0; transform: translate3d(-175%, calc(-50% - 25px), 0) rotate(-18deg) scale(.94); }
.ab-card[data-position="exit-right"] { z-index: 5; opacity: 0; transform: translate3d(75%, calc(-50% - 25px), 0) rotate(18deg) scale(.94); }
.ab-card .ab-qmark { width: 20px; color: currentColor; }
.ab-card blockquote { min-height: 0; overflow: hidden; font-family: "Geist Serif", Georgia, serif; font-size: 28px; line-height: 1.04; letter-spacing: -.025em; text-wrap: pretty; }
.ab-card figcaption { gap: 2px; }
.ab-card .ab-who { font-size: 17px; letter-spacing: -.01em; }
/* Arrow buttons: same as the offer stack (grey disc that swells; arrow slides through on hover). */
.ab-controls { display: flex; justify-content: center; gap: 20px; }
.ab-controls button { position: relative; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%;
  background: transparent; color: var(--ink); cursor: pointer; }
.ab-controls button::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: #e8e8e8; transition: transform 400ms cubic-bezier(.19, 1, .22, 1); }
[data-theme="dark"] .ab-controls button::before { background: #262626; }
@media (hover: hover) { .ab-controls button:hover::before { transform: scale(1.06); } }
.ab-controls button:active::before { transform: scale(.98); }
.ab-controls button:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.ab-arrow { position: absolute; z-index: 1; inset: 0; overflow: clip; border-radius: inherit; }
.ab-arrow svg { position: absolute; top: 50%; left: 50%; width: 18px; height: 16px; margin: -8px 0 0 -9px; transition: transform 500ms cubic-bezier(.19, 1, .22, 1); }
.ab-arrow svg:first-child { transform: translateX(0); }
.ab-arrow svg:last-child { transform: translateX(-48px); }
@media (hover: hover) { .ab-controls button:hover svg:first-child { transform: translateX(48px); } .ab-controls button:hover svg:last-child { transform: translateX(0); } }
.ab-controls [data-prev] .ab-arrow { transform: rotate(180deg); }
.ab-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
@media (prefers-reduced-motion: reduce) { .ab-card, .ab-controls button::before, .ab-arrow svg { transition: none; } }
[data-side-reveal-navigation] .drawer .ab-awards dl > div:last-child { border-bottom: 0; } /* no closing rule: the © line ends the panel */