/* ==========================================================
   1. DESIGN TOKENS
   Change these values to restyle the whole site.

   Colour hierarchy (keep it in this order):
     deep navy  >  icy blue  >  white / silver  >  a little orange
   Orange is a seasoning, not a theme: tags, tiny details, a few hover
   states. If you catch yourself using it for big areas, stop.
   ========================================================== */
:root {
  /* Foundation */
  --color-bg: #060a14;
  --color-surface: #0b1226;
  --color-surface-raised: #0f1833;
  --color-border: rgba(var(--rgb-silver), 0.14);
  --color-text: #f1f5fc;
  --color-text-muted: #9aa8c0;

  /* Icy blue: links, lines, small details, focus rings */
  --color-accent: #4aa3ff;
  --color-accent-bright: #86c5ff;
  --color-accent-dark-text: #04101f;
  --color-accent-glow: rgba(74, 163, 255, 0.35);

  /* Button blue. Deeper than the icy blue so white text stays readable. */
  --color-button: #1c64dc;
  --color-button-hover: #2576f2;

  /* White / cool silver */
  --color-silver: #c8d2e2;

  /* The one secondary accent. --color-orange-ink is the dark text used on it. */
  --color-orange: #ff8a3d;
  --color-orange-bright: #ffa86b;
  --color-orange-ink: #1c1004;

  /* The --rgb-* values let you write rgba(var(--rgb-silver), 0.1).
     Violet is only used for one very faint patch of atmosphere. */
  --rgb-blue: 74, 163, 255;
  --rgb-silver: 200, 210, 226;
  --rgb-orange: 255, 138, 61;
  --rgb-violet: 130, 112, 225;

  /* Typography. Bricolage Grotesque has the character, Figtree keeps body
     text friendly and readable. Both are loaded from Google Fonts in the
     <head> of each page; the system fonts are the fallback. */
  --font-display: "Bricolage Grotesque", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --font-main: "Figtree", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;

  /* Spacing scale */
  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2rem;
  --space-5: 3rem;
  --space-6: 5rem;
  --space-7: 7rem;

  /* Layout */
  --container-width: 1200px;
  --container-padding: 1.25rem;
  --header-height: 4.5rem;
  --radius: 8px;
  --radius-button: 12px;
  --radius-mega: 20px;   /* mega menu panel */
  --radius-card: 14px;   /* cards and previews inside the mega menu */
  --mega-edge: 1rem;     /* minimum gap between a mega menu and the screen edge */
  --transition: 0.12s ease;
  --spring: cubic-bezier(0.34, 1.4, 0.64, 1);
}

/* ==========================================================
   2. BASE
   ========================================================== */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: var(--header-height);
}

body {
  margin: 0;
  min-height: 100vh;
  background-color: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-main);
  font-size: 1rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, p, ul, figure, blockquote {
  margin: 0;
}

[hidden] {
  display: none !important;
}

ul {
  padding: 0;
  list-style: none;
}

a {
  color: inherit;
  text-decoration: none;
}

img {
  max-width: 100%;
}

:focus-visible {
  outline: 2px solid var(--color-accent-bright);
  outline-offset: 3px;
}

::selection {
  background: var(--color-accent);
  color: var(--color-accent-dark-text);
}

.container {
  width: 100%;
  max-width: var(--container-width);
  margin: 0 auto;
  padding: 0 var(--container-padding);
}

h1, h2, h3 {
  font-family: var(--font-display);
}

/* ==========================================================
   3. BACKGROUND
   One fixed layer behind all content, made of (bottom to top):
   - deep navy base with large, soft blue "distant light" areas
     and one very faint violet patch on the left edge
   - the design grid (.site-background::before, see 3b below)
   - cursor light (a soft glow that follows the mouse)
   - very faint grain so the colour does not look flat
   ========================================================== */
.site-background {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
  background:
    var(--season-glow, none),
    radial-gradient(ellipse 60% 55% at 72% 22%, rgba(45, 110, 230, 0.12), transparent 70%),
    radial-gradient(ellipse 55% 50% at 12% 12%, rgba(35, 80, 190, 0.08), transparent 70%),
    radial-gradient(ellipse 60% 50% at 25% 90%, rgba(30, 70, 170, 0.07), transparent 70%),
    radial-gradient(ellipse 50% 45% at 92% 88%, rgba(55, 95, 205, 0.05), transparent 70%),
    radial-gradient(ellipse 36% 40% at 0% 52%, rgba(var(--rgb-violet), 0.03), transparent 70%),
    linear-gradient(180deg, #070e22 0%, #060b1a 55%, #050914 100%);
}

/* ----------------------------------------------------------
   SEASONAL BACKGROUND TINT
   script.js sets <html data-season="halloween | christmas | summer"> while a
   season is on. Each season adds 2 soft colour glows to the background above.
   They are plain static gradients painted once into the fixed background layer
   (no animation, no blur, no extra elements), so the cost is effectively zero.
   Halloween = orange + purple, Christmas = red + green, Summer = yellow.
   Make them stronger or fainter by changing the last number (the opacity).
   ---------------------------------------------------------- */
html[data-season="halloween"] {
  --season-glow:
    radial-gradient(ellipse 55% 50% at 6% 18%, rgba(255, 140, 40, 0.10), transparent 70%),
    radial-gradient(ellipse 55% 50% at 94% 80%, rgba(150, 80, 230, 0.12), transparent 70%);
}
html[data-season="christmas"] {
  --season-glow:
    radial-gradient(ellipse 55% 50% at 6% 18%, rgba(235, 60, 60, 0.10), transparent 70%),
    radial-gradient(ellipse 55% 50% at 94% 80%, rgba(50, 190, 110, 0.10), transparent 70%);
}
html[data-season="summer"] {
  --season-glow:
    radial-gradient(ellipse 60% 50% at 94% 12%, rgba(255, 200, 60, 0.11), transparent 70%),
    radial-gradient(ellipse 55% 45% at 8% 88%, rgba(255, 190, 70, 0.07), transparent 70%);
}

/* The soft light that follows the mouse takes the season's colour too (R, G, B) */
html[data-season="halloween"] { --cursor-rgb: 255, 145, 50; }
html[data-season="christmas"] { --cursor-rgb: 255, 85, 85; }
html[data-season="summer"]    { --cursor-rgb: 255, 205, 70; }

/* ==========================================================
   3b. DESIGN GRID BACKGROUND
   A quiet "designer's canvas": a fine grid, a few dots, soft light
   between sections and two tiny coordinate tags. It is drawn with plain
   CSS gradients only: no image files, no canvas, no script and no
   animation, so it costs next to nothing.

   How it is built (all behind the content, nothing can be clicked or
   blocked):
   1. THE GRID: the fixed layer .site-background::before. Big squares, a
      finer grid inside them, a dot at every third crossing, and a soft dark
      oval in the middle so the grid stays calmer behind the text.
   2. SECTION DETAILS (the sections' own background, scrolls with the page):
      - every section: soft blue light along its top and bottom edge, so the
        change from one section to the next is a glow, not a line
      - hero areas of the inner pages: a cluster of dots fading out from the
        top-right corner (.page-hero::after and friends)
      - Portfolio: a faint dot lattice and two margin guides
      - Reviews: one ring and one hairline
      - footer: plain (it already fades to solid navy)
      On the homepage the full-width hero artwork covers the background, so
      the grid starts below it and the artwork stays the focus.
   3. TINY TAGS: html::after and body::after, two barely visible labels
      in the bottom corners. Decorative only (hidden from screen readers).

   MASTER DIAL: --bp below.  1 = as designed, 0 = the whole design grid
   disappears, 1.5 = bolder.  To remove it for good, delete this section.
   ========================================================== */
:root {
  --bp: 0.6;           /* design grid + section glow strength (was 1; lower = darker page) */
  --bp-grid: 96px;     /* size of the big squares */
  --bp-minor: 24px;    /* size of the fine squares inside them */

  --bp-line:       rgba(var(--rgb-blue), calc(0.085 * var(--bp)));  /* big grid lines */
  --bp-fine:       rgba(var(--rgb-blue), calc(0.035 * var(--bp)));  /* fine grid lines */
  --bp-dot:        rgba(var(--rgb-blue), calc(0.45 * var(--bp)));   /* dots at crossings */
  --bp-dot-fade:   rgba(var(--rgb-blue), calc(0.50 * var(--bp)));   /* hero dot cluster */
  --bp-lattice:    rgba(var(--rgb-blue), calc(0.16 * var(--bp)));   /* portfolio dots */
  --bp-guide:      rgba(var(--rgb-blue), calc(0.14 * var(--bp)));   /* ring */
  --bp-guide-soft: rgba(var(--rgb-blue), calc(0.09 * var(--bp)));   /* hairlines, guides */
  --bp-tag:        rgba(var(--rgb-blue), calc(0.34 * var(--bp)));   /* tiny labels */
  --bp-calm:       rgba(6, 10, 20, calc(0.4 * var(--bp)));         /* calmer grid behind the middle */

  /* Soft light across the line between two sections: the lower half is painted
     by the section above (its bottom edge), the upper half by the section
     below (its top edge). Both halves are equally bright right at the line,
     so there is no edge, only a glow that fades out in both directions.
     The glow is at most 140px deep and never more than half the section's
     height, so short strips do not get a double dose of light. */
  --bp-glow-top:    radial-gradient(ellipse 55% min(140px, 50%) at 50% 0, rgba(var(--rgb-blue), calc(0.085 * var(--bp))), transparent 100%);
  --bp-glow-bottom: radial-gradient(ellipse 55% min(140px, 50%) at 50% 100%, rgba(var(--rgb-blue), calc(0.085 * var(--bp))), transparent 100%);
  --bp-divider:     var(--bp-glow-top), var(--bp-glow-bottom);
}

/* ----- 1. The grid (fixed, painted once, never repainted) ----- */
.site-background::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(ellipse 60% 74% at 50% 48%, var(--bp-calm), transparent 100%),
    radial-gradient(circle at 0.5px 0.5px, var(--bp-dot) 0 1.6px, transparent 2.3px),
    linear-gradient(90deg, var(--bp-line) 1px, transparent 1px),
    linear-gradient(180deg, var(--bp-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--bp-fine) 1px, transparent 1px),
    linear-gradient(180deg, var(--bp-fine) 1px, transparent 1px);
  background-size:
    100% 100%,
    calc(var(--bp-grid) * 3) calc(var(--bp-grid) * 3),
    var(--bp-grid) var(--bp-grid),
    var(--bp-grid) var(--bp-grid),
    var(--bp-minor) var(--bp-minor),
    var(--bp-minor) var(--bp-minor);
  background-position: center, 0 0, 0 0, 0 0, 0 0, 0 0;
  background-repeat: no-repeat, repeat, repeat, repeat, repeat, repeat;
}

/* ----- 2. Soft light between sections -----
   Every full-width section gets a gentle glow at its top and bottom edge, so
   the change from one section to the next is light, not a line. The hero
   areas add the bottom half and the footer the top half.
   (Zero-specificity rule, so a section can add its own details below.) */
:where(.work, .perks, .socials, .reviews, .review-archive, .review-featured, .portfolio,
       .about-journey, .about-progress, .home-compare, .about-glimpse, .news, .news-strip, .x-posts,
       .contact-trust, .contact-checklist-section, .contact-bottom,
       .pc-status-strip, .pc-catalogue, .pc-custom, .payments, .process, .faq,
       .page-cta) {
  background-image: var(--bp-divider);
}

/* ----- 2. Section details ----- */

.page-hero,
.about-hero,
.contact-hero {
  background-image: var(--bp-glow-bottom);
}

/* Hero areas of the inner pages: a cluster of dots that fades out from the
   top-right corner. It sits behind the text (z-index -1), never blocks
   clicks, and stays inside the hero. */
.page-hero::after,
.about-hero::after,
.contact-hero::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  z-index: -1;
  width: min(54%, 740px);
  height: 100%;
  background-image: radial-gradient(circle, var(--bp-dot-fade) 0 1.2px, transparent 1.9px);
  background-size: 18px 18px;
  -webkit-mask-image: radial-gradient(ellipse 100% 100% at 100% 0, #000 0%, rgba(0, 0, 0, 0.55) 38%, transparent 78%);
  mask-image: radial-gradient(ellipse 100% 100% at 100% 0, #000 0%, rgba(0, 0, 0, 0.55) 38%, transparent 78%);
  pointer-events: none;
}

/* Portfolio: faint dot lattice and two margin guides, like an artboard */
.portfolio {
  background-image:
    radial-gradient(circle, var(--bp-lattice) 0 1px, transparent 1.7px),
    linear-gradient(90deg, transparent calc(5% - 0.5px), var(--bp-guide-soft) 5%, transparent calc(5% + 0.5px)),
    linear-gradient(90deg, transparent calc(95% - 0.5px), var(--bp-guide-soft) 95%, transparent calc(95% + 0.5px)),
    var(--bp-divider);
  background-size: 48px 48px, auto, auto, auto, auto;
}

/* Reviews: one ring on the left and one hairline */
.reviews,
.review-archive {
  background-image:
    radial-gradient(circle 900px at 8% 42%, transparent 0 419px, var(--bp-guide) 419.5px 421px, transparent 421.5px),
    linear-gradient(104deg, transparent calc(62% - 0.5px), var(--bp-guide-soft) 62%, transparent calc(62% + 0.5px)),
    var(--bp-divider);
}

/* ----- 3. Tiny tags (fixed, decorative, never read out by screen readers) ----- */
html::after,
body::after {
  position: fixed;
  z-index: -1;
  bottom: 0.85rem;
  font: 500 10px/1 ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  letter-spacing: 0.14em;
  color: var(--bp-tag);
  pointer-events: none;
  user-select: none;
}

html::after {
  content: "01  /  X: 240  Y: 120" / "";
  left: 1.1rem;
}

body::after {
  content: "02  /  GRID 96" / "";
  right: 1.1rem;
}

/* ----- Smaller screens: bigger squares, no fine grid, fewer details ----- */
@media (max-width: 860px) {
  :root {
    --bp-grid: 72px;
  }

  .site-background::before {
    background-image:
      radial-gradient(ellipse 100% 72% at 50% 48%, var(--bp-calm), transparent 100%),
      radial-gradient(circle at 0.5px 0.5px, var(--bp-dot) 0 1.6px, transparent 2.3px),
      linear-gradient(90deg, var(--bp-line) 1px, transparent 1px),
      linear-gradient(180deg, var(--bp-line) 1px, transparent 1px);
    background-size:
      100% 100%,
      calc(var(--bp-grid) * 3) calc(var(--bp-grid) * 3),
      var(--bp-grid) var(--bp-grid),
      var(--bp-grid) var(--bp-grid);
    background-position: center, 0 0, 0 0, 0 0;
    background-repeat: no-repeat, repeat, repeat, repeat;
  }

  .page-hero::after,
  .about-hero::after,
  .contact-hero::after {
    width: 80%;
    height: 70%;
    background-size: 16px 16px;
  }

  .portfolio {
    background-image:
      radial-gradient(circle, var(--bp-lattice) 0 1px, transparent 1.7px),
      var(--bp-divider);
    background-size: 40px 40px, auto, auto;
  }

  .reviews,
  .review-archive {
    background-image:
      radial-gradient(circle 600px at 0 30%, transparent 0 259px, var(--bp-guide) 259.5px 261px, transparent 261.5px),
      var(--bp-divider);
  }

  html::after,
  body::after {
    display: none;
  }
}


/* Soft light that follows the cursor (position is set by script.js).
   Many gentle colour stops, so there is no visible edge or circle. */
.cursor-light {
  position: absolute;
  top: 0;
  left: 0;
  width: 360px;
  height: 360px;
  margin: -180px 0 0 -180px;
  background: radial-gradient(circle,
    rgba(var(--cursor-rgb, 74, 163, 255), 0.09) 0%,
    rgba(var(--cursor-rgb, 74, 163, 255), 0.065) 18%,
    rgba(var(--cursor-rgb, 74, 163, 255), 0.04) 36%,
    rgba(var(--cursor-rgb, 74, 163, 255), 0.016) 54%,
    rgba(var(--cursor-rgb, 74, 163, 255), 0.005) 66%,
    transparent 76%);
  opacity: 0;
  transition: opacity 0.4s ease;
  will-change: transform;
}

.cursor-light.is-active {
  opacity: 1;
}

/* Very faint film grain (tiny built-in pattern, no image file) */
.site-background::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 200px 200px;
  opacity: 0.045;
}

/* ==========================================================
   4. BUTTONS
   One flat surface each. No halves, no offset layers, no sliding panels.
   Hover = a small lift, a tiny scale, a touch brighter, a soft shadow.
   ========================================================== */
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.8rem 1.55rem;
  border: 1px solid transparent;
  border-radius: var(--radius-button);
  font: inherit;
  font-size: 0.97rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.005em;
  cursor: pointer;
  transition: background-color var(--transition), border-color var(--transition),
              box-shadow 0.15s ease, transform 0.18s var(--spring);
}

.button:hover {
  transform: translateY(-2px) scale(1.025);
}

.button:active {
  transform: translateY(0) scale(0.98);
}

.button-primary {
  background-color: var(--color-button);
  color: #fff;
  box-shadow: 0 6px 16px -8px rgba(28, 100, 220, 0.7);
}

.button-primary:hover {
  background-color: var(--color-button-hover);
  box-shadow: 0 14px 26px -12px rgba(37, 118, 242, 0.8);
}

/* Quieter sibling: a flat silver-tinted surface */
.button-secondary {
  border-color: rgba(var(--rgb-silver), 0.28);
  background-color: rgba(var(--rgb-silver), 0.08);
  color: var(--color-text);
}

.button-secondary:hover {
  border-color: rgba(var(--rgb-silver), 0.5);
  background-color: rgba(var(--rgb-silver), 0.15);
  box-shadow: 0 12px 24px -14px rgba(0, 0, 0, 0.9);
}

.button-lg {
  padding: 0.95rem 1.8rem;
  font-size: 1.02rem;
}

/* ==========================================================
   5. HEADER, NAVIGATION AND MEGA MENUS
   ========================================================== */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
}

/* The navbar band: a slightly lighter navy than the page, a thin icy-blue
   line underneath and a soft shadow, so it reads as its own strip without
   becoming a big glass panel. */
.site-header::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-color: rgba(10, 17, 36, 0.95);
  /* Same strip as before, with just the bottom corners softly rounded. */
  border-bottom: 1px solid rgba(var(--rgb-blue), 0.16);
  border-radius: 0 0 1.1rem 1.1rem;
  box-shadow: 0 10px 24px -14px rgba(0, 0, 0, 0.75);
  pointer-events: none;
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: var(--header-height);
}


.site-logo {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 800;
  letter-spacing: -0.03em;
}

/* Height is fixed, width follows automatically, so the logo is never stretched */
.site-logo-image {
  display: block;
  width: auto;
  height: 2.25rem;
  transform-origin: 50% 50%;
  transition: transform 0.25s var(--spring), filter 0.3s ease;
}

/* Logo hover (every page): BRICK FULL STOP.
   An orange brick (the same one that ends the headings) drops in to the right of the logo and
   lands on its baseline, so the logo reads like a word with a full stop: "[logo]."
   The brick squashes and bounces once on landing and stays put while the mouse is over the logo;
   the logo itself gets a small knock and an orange flash as it lands. The brick is the ::before
   layer, so no HTML change is needed.
   Tweak: --brick-size = size, --brick-gap = space between logo and brick, --brick-base = how far
   above the bottom edge it sits (raise it for a higher full stop), --brick-fall = how far above
   its final spot it starts. The 0.9s values set the speed (change both together). */
.site-logo {
  --brick-size: 0.5rem;
  --brick-gap: 0.3rem;
  --brick-base: 0.12rem;
  --brick-fall: -1.7rem;
}

.site-logo::before {
  content: "";
  position: absolute;
  left: calc(100% + var(--brick-gap));
  bottom: var(--brick-base);
  z-index: 2;
  width: var(--brick-size);
  height: var(--brick-size);
  border-radius: 0.08rem;
  background-color: var(--color-orange);
  box-shadow: 0 0 10px rgba(var(--rgb-orange), 0.55);
  opacity: 0;
  transform: translateY(var(--brick-fall)) rotate(-35deg);
  transform-origin: 50% 100%;
  pointer-events: none;
  transition: opacity 0.15s ease, transform 0.2s ease;
}

.site-logo:hover .site-logo-image,
.site-logo:focus-visible .site-logo-image {
  transform: translateY(-1px);
  filter: brightness(1.08) drop-shadow(0 0 8px rgba(var(--rgb-blue), 0.5));
  animation: site-logo-knock 0.9s linear;
}

.site-logo:hover::before,
.site-logo:focus-visible::before {
  opacity: 1;
  transform: rotate(12deg);
  animation: site-logo-brick 0.9s linear;
}

.site-logo:active .site-logo-image {
  transform: scale(0.95);
  animation: none;
}

/* Both animations share one timeline: the brick lands at 40%, the logo reacts at 40% */
@keyframes site-logo-brick {
  0%   { opacity: 0; transform: translateY(var(--brick-fall)) rotate(-35deg); animation-timing-function: cubic-bezier(0.55, 0, 0.9, 0.55); }
  12%  { opacity: 1; }
  40%  { opacity: 1; transform: translateY(0) rotate(12deg); animation-timing-function: ease-out; }
  46%  { transform: translateY(0) rotate(12deg) scale(1.3, 0.7); animation-timing-function: cubic-bezier(0.2, 0.6, 0.4, 1); }
  58%  { transform: translateY(-0.4rem) rotate(22deg) scale(0.95, 1.08); animation-timing-function: cubic-bezier(0.55, 0, 0.9, 0.55); }
  72%  { transform: translateY(0) rotate(12deg) scale(1.15, 0.85); animation-timing-function: ease-out; }
  86%, 100% { opacity: 1; transform: translateY(0) rotate(12deg) scale(1); }
}

/* The knock: a small recoil away from the brick and a warm orange flash, then it settles */
@keyframes site-logo-knock {
  0%, 38% { transform: none; filter: brightness(1) drop-shadow(0 0 0 rgba(var(--rgb-orange), 0)); }
  43%     { transform: translateX(-2px); filter: brightness(1.25) drop-shadow(0 0 10px rgba(var(--rgb-orange), 0.75)); }
  62%     { transform: translateX(0.5px); filter: brightness(1.12) drop-shadow(0 0 9px rgba(var(--rgb-blue), 0.55)); }
  100%    { transform: translateY(-1px); filter: brightness(1.08) drop-shadow(0 0 8px rgba(var(--rgb-blue), 0.5)); }
}

/* Reduced motion: no animation, but the brick still appears, already sitting next to the logo */
@media (prefers-reduced-motion: reduce) {
  .site-logo:hover .site-logo-image,
  .site-logo:focus-visible .site-logo-image,
  .site-logo:hover::before,
  .site-logo:focus-visible::before { animation: none; }
  .site-logo:hover::before,
  .site-logo:focus-visible::before { opacity: 1; transform: rotate(12deg); }
}

/* Label under the logo: a small orange pill with a house that pops in beneath the logo (centred),
   a beat after the brick has landed. The text is set here, in one place, so every page matches
   without editing each page's HTML (the data-tooltip attribute in the HTML is no longer used).
   Change the wording on the --logo-label line. */
.site-logo {
  --logo-label: "Home";
}

@media (hover: hover) {
  .site-logo::after {
    content: var(--logo-label);
    position: absolute;
    top: calc(100% + 0.55rem);
    left: 50%;
    z-index: 5;
    padding: 0.3rem 0.8rem 0.3rem 1.75rem;
    border-radius: 999px;
    background-color: var(--color-orange);
    background-image:
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231c1004' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 11l9-8 9 8'/%3E%3Cpath d='M5 10v10h5v-6h4v6h5V10'/%3E%3C/svg%3E"),
      linear-gradient(180deg, var(--color-orange-bright), var(--color-orange));
    background-repeat: no-repeat;
    background-position: left 0.6rem center, 0 0;
    background-size: 0.85rem 0.85rem, 100% 100%;
    box-shadow: 0 10px 20px -10px rgba(0, 0, 0, 0.85), 0 0 0 3px rgba(var(--rgb-orange), 0.18);
    color: var(--color-orange-ink);
    font-family: var(--font-main);
    font-size: 0.8rem;
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: 0;
    white-space: nowrap;
    opacity: 0;
    transform: translate(-50%, -6px) scale(0.9);
    transform-origin: 50% 0;
    pointer-events: none;
    transition: opacity 0.12s ease, transform 0.2s var(--spring);
  }

  .site-logo:hover::after,
  .site-logo:focus-visible::after {
    opacity: 1;
    transform: translate(-50%, 0) scale(1);
    /* waits for the brick to land, and does not flash when the mouse only passes by */
    transition: opacity 0.15s ease 0.45s, transform 0.35s var(--spring) 0.45s;
  }
}

/* The menu is as tall as the header, so the mouse can travel from a
   nav item down into its mega menu without leaving the hover area */
.site-menu {
  display: flex;
  align-items: stretch;
  align-self: stretch;
  justify-content: space-between;
  flex: 1;
  margin-left: var(--space-5);
}

.site-nav {
  display: flex;
}

.nav-list {
  display: flex;
  gap: var(--space-4);
}

.nav-item {
  display: flex;
  align-items: center;
}

.site-menu > .button {
  align-self: center;
}

.nav-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.4rem 0;
  border: 0;
  background: none;
  color: var(--color-text-muted);
  font: inherit;
  font-size: 0.95rem;
  cursor: pointer;
  transition: color var(--transition);
}

/* Small blue circle under the link: pops in on hover, press and keyboard focus */
.nav-link::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -0.2rem;
  width: 6px;
  height: 6px;
  margin-left: -3px;
  border-radius: 50%;
  background-color: var(--color-accent);
  transform: scale(0);
  transition: transform 0.25s var(--spring);
}

.nav-link:hover,
.nav-link[aria-expanded="true"] {
  color: var(--color-accent-bright);
}

.nav-link:hover::after,
.nav-link:focus-visible::after,
.nav-link[aria-expanded="true"]::after {
  transform: scale(1);
}

.nav-link:active::after {
  transform: scale(1.5);
}

.nav-chevron {
  flex: none;
  transition: transform var(--transition);
}

.nav-link[aria-expanded="true"] .nav-chevron {
  transform: rotate(180deg);
}

/* ----- Mega menu panel -----
   Size is set here. The horizontal position is set by script.js, which
   lines the panel up under the nav item that opens it (see positionMega). */
.mega {
  position: absolute;
  top: 100%;
  left: 0;
  width: min(840px, calc(100% - 2 * var(--mega-edge)));
  margin: 0;
  padding-top: 8px; /* invisible bridge so the menu does not close by accident */
  visibility: hidden;
  opacity: 0;
  transform: translateY(-10px) scale(0.97);
  transform-origin: 0 0; /* script.js moves this to the trigger */
  pointer-events: none;
  /* closing: quick, so the menu never lingers */
  transition: opacity 0.12s ease, transform 0.12s ease, visibility 0s linear 0.12s;
}

.mega-services {
  width: min(640px, calc(100% - 2 * var(--mega-edge)));
}

/* Work menu: one centred column (links, then the banner) */
.mega-work {
  width: min(680px, calc(100% - 2 * var(--mega-edge)));
}

.mega-work .mega-inner {
  grid-template-columns: 1fr;
}

.mega.is-open {
  visibility: visible;
  opacity: 1;
  transform: none;
  pointer-events: auto;
  /* opening: grows out of the nav item and settles softly (no bounce) */
  transition: opacity 0.16s ease, transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), visibility 0s linear 0s;
}

.mega-inner {
  position: relative;
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: var(--space-3);
  padding: var(--space-3);
  background-color: rgba(8, 14, 30, 0.95);   /* no blur behind it (it made opening laggy), so a touch more solid */
  border: 1px solid rgba(110, 170, 255, 0.16);
  border-radius: var(--radius-mega);
  box-shadow: 0 30px 70px -20px rgba(0, 0, 0, 0.85), 0 0 70px -35px var(--color-accent-glow);
}

/* Small notch that points at the nav item (position set by script.js).
   Built from two triangles (a border-coloured one and a fill-coloured one on
   top) that sit ONLY above the panel edge. The old rotated square reached into
   the panel and showed up as a lighter diamond there. */
.mega-inner::before,
.mega-inner::after {
  content: "";
  position: absolute;
  left: var(--mega-caret, 40px);
  pointer-events: none;
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
}

.mega-inner::before {
  top: -9px;
  width: 18px;
  height: 9px;
  margin-left: -9px;
  background-color: rgba(110, 170, 255, 0.34);
}

.mega-inner::after {
  top: -7.6px;
  width: 15.2px;
  height: 7.6px;
  margin-left: -7.6px;
  background-color: var(--mega-notch-fill, #080e1e);
}

.mega-services .mega-inner {
  grid-template-columns: 1.15fr 0.85fr;
}

.mega-main {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.mega-links {
  display: grid;
  gap: 0.3rem;
  align-content: start;
}

.mega-work .mega-links {
  grid-template-columns: repeat(2, 1fr);
}

.mega-link {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
  height: 100%;
  padding: 0.8rem 0.95rem;
  border: 1px solid transparent;
  border-radius: 12px;
  transition: background-color var(--transition), border-color var(--transition),
              transform var(--transition);
}

.mega-link:hover,
.mega-link:focus-visible {
  background-color: rgba(74, 163, 255, 0.07);
  border-color: rgba(110, 170, 255, 0.2);
}

.mega-link:hover {
  transform: translateX(3px);
}

.mega-link-title {
  display: block;
  font-size: 1rem;
  font-weight: 600;
}

.mega-link-text {
  display: block;
  margin-top: 0.15rem;
  color: var(--color-text-muted);
  font-size: 0.86rem;
  line-height: 1.45;
}

.mega-arrow {
  flex: none;
  margin-top: 0.2rem;
  color: var(--color-accent);
  opacity: 0.45;
  transition: opacity var(--transition), transform var(--transition);
}

.mega-link:hover .mega-arrow,
.mega-link:focus-visible .mega-arrow,
.mega-all:hover .mega-arrow,
.mega-all:focus-visible .mega-arrow {
  opacity: 1;
  transform: translateX(3px);
}

.mega-all {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: var(--space-2);
  padding: 0.4rem 0.95rem;
  border-radius: 8px;
  color: var(--color-accent-bright);
  font-size: 0.95rem;
  font-weight: 600;
}

.mega-all .mega-arrow {
  margin-top: 0;
  opacity: 0.8;
}

/* ----- Banner artwork slot (Work menu, under "View all work") ----- */
.mega-banner {
  position: relative;
  aspect-ratio: 16 / 5; /* the original long banner shape (1600 x 500 px) */
  margin-top: var(--space-2);
  overflow: hidden;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  background-color: var(--color-surface);
}

.mega-banner-image {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.35s ease;
}

.mega-banner-image.is-loaded {
  opacity: 1;
}

/* ----- Artwork preview (right side of the mega menu) ----- */
.mega-preview-body {
  transition: opacity 0.18s ease, transform 0.18s ease;
}

.mega-preview-body.is-changing {
  opacity: 0;
  transform: scale(0.985);
}

.mega-preview-frame {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  background-color: var(--color-surface);
}

/* Work menu: the preview stretches to match the height of the left column */
.mega-work .mega-preview-body {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.mega-work .mega-preview-frame {
  flex: 1;
  aspect-ratio: auto;
  min-height: 170px;
}

/* Services menu: keep the preview at its natural shape, centred beside the list */
.mega-services .mega-preview {
  align-self: center;
}

.mega-preview-image {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.mega-preview-placeholder,
.mega-banner-placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  text-align: center;
  background:
    radial-gradient(circle at 20% 90%, rgba(74, 163, 255, 0.18), transparent 60%),
    repeating-linear-gradient(0deg, rgba(150, 190, 255, 0.04) 0 1px, transparent 1px 32px),
    repeating-linear-gradient(90deg, rgba(150, 190, 255, 0.04) 0 1px, transparent 1px 32px);
}

.mega-preview-placeholder::before,
.mega-banner-placeholder::before {
  content: "";
  position: absolute;
  inset: var(--space-2);
  border: 1px dashed rgba(150, 190, 255, 0.2);
  border-radius: 8px;
}

.mega-banner-placeholder {
  background:
    radial-gradient(ellipse 60% 90% at 88% 15%, rgba(74, 163, 255, 0.16), transparent 70%),
    radial-gradient(circle at 12% 100%, rgba(74, 163, 255, 0.12), transparent 60%),
    repeating-linear-gradient(0deg, rgba(150, 190, 255, 0.035) 0 1px, transparent 1px 32px),
    repeating-linear-gradient(90deg, rgba(150, 190, 255, 0.035) 0 1px, transparent 1px 32px);
}

.mega-preview-label,
.mega-banner-label {
  position: relative;
  font-size: 1.05rem;
  font-weight: 600;
}

.mega-preview-hint,
.mega-banner-hint {
  position: relative;
  color: var(--color-text-muted);
  font-size: 0.85rem;
}

.mega-preview-caption {
  display: block;
  margin-top: 0.8rem;
}

.mega-preview-title {
  display: block;
  font-weight: 600;
}

.mega-preview-description {
  display: block;
  margin-top: 0.15rem;
  color: var(--color-text-muted);
  font-size: 0.9rem;
}

/* Highlight of the category whose artwork is showing (desktop only) */
@media (min-width: 861px) {
  .mega-link.is-active {
    background-color: rgba(74, 163, 255, 0.07);
    border-color: rgba(110, 170, 255, 0.2);
  }

  .mega-link.is-active .mega-arrow {
    opacity: 1;
  }
}

/* Page the visitor is currently on */
.nav-link[aria-current="page"] {
  color: var(--color-text);
}

.nav-link[aria-current="page"]::after {
  transform: scale(1);
  background-color: var(--color-orange);
}

/* Small desktops: tighter spacing so five nav items still fit on one line */
@media (min-width: 861px) and (max-width: 1020px) {
  .site-menu {
    margin-left: var(--space-3);
  }

  .nav-list {
    gap: 1.1rem;
  }

  .site-menu > .button {
    margin-left: var(--space-2);
    padding: 0.7rem 1.2rem;
  }
}

/* ----- Menu button: only visible on small screens ----- */
.menu-toggle {
  display: none;
  position: relative;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: transparent;
  color: var(--color-text);
  cursor: pointer;
  transition: border-color var(--transition), color var(--transition);
}

.menu-toggle:hover {
  border-color: var(--color-accent);
  color: var(--color-accent-bright);
}

.menu-toggle-bar {
  position: absolute;
  left: 12px;
  width: 18px;
  height: 2px;
  background-color: currentColor;
  transition: transform var(--transition), top var(--transition);
}

.menu-toggle-bar:nth-child(1) { top: 16px; }
.menu-toggle-bar:nth-child(2) { top: 25px; }

.menu-toggle[aria-expanded="true"] .menu-toggle-bar:nth-child(1) {
  top: 21px;
  transform: rotate(45deg);
}

.menu-toggle[aria-expanded="true"] .menu-toggle-bar:nth-child(2) {
  top: 21px;
  transform: rotate(-45deg);
}

/* ----- Phones and tablets: simple stacked menu ----- */
@media (max-width: 860px) {
  .menu-toggle {
    display: block;
  }

  .site-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-3);
    max-height: calc(100vh - var(--header-height));
    margin: 0;
    padding: var(--space-2) var(--container-padding) var(--space-4);
    overflow-y: auto;
    background-color: var(--color-bg);
    box-shadow: 0 24px 40px -20px rgba(0, 0, 0, 0.7);
  }

  .site-menu.is-open {
    display: flex;
  }

  .site-nav {
    display: block;
  }

  .nav-list {
    flex-direction: column;
    gap: 0;
  }

  .nav-item {
    display: block;
  }

  .nav-link {
    display: flex;
    width: 100%;
    justify-content: space-between;
    padding: 0.9rem 0;
    border-bottom: 1px solid var(--color-border);
    font-size: 1.05rem;
  }

  .nav-link::after {
    display: none;
  }

  .site-menu > .button {
    align-self: stretch;
    width: 100%;
  }

  /* Mega menus become simple expandable lists */
  .mega,
  .mega-services {
    position: static;
    display: none;
    width: auto;
    margin: 0;
    padding: 0;
    visibility: visible;
    opacity: 1;
    transform: none;
    pointer-events: auto;
    transition: none;
  }

  .mega.is-open {
    display: block;
  }

  .mega-inner,
  .mega-services .mega-inner {
    display: block;
    padding: 0.5rem 0 0.5rem 0.75rem;
    background: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }

  .mega-work .mega-links {
    grid-template-columns: 1fr;
  }

  .mega-link {
    align-items: center;
    min-height: 3.25rem;
    padding: 0.7rem 0.6rem;
  }

  .mega-link:hover {
    transform: none;
  }

  .mega-all {
    margin-top: var(--space-1);
  }

  /* Artwork previews, the banner slot and the notch are skipped on small screens */
  .mega-preview,
  .mega-inner::before,
  .mega-inner::after {
    display: none;
  }
}

/* "View all work": orange only when it is hovered */
.mega-all {
  transition: color var(--transition);
}

.mega-all:hover,
.mega-all:focus-visible {
  color: var(--color-orange-bright);
}

.mega-all:hover .mega-arrow,
.mega-all:focus-visible .mega-arrow {
  color: var(--color-orange-bright);
}

/* ----- Social icons next to "Commission Me" -----
   Small, quiet, secondary to the main links. Hover: tiny lift, icy blue,
   and a small label. The URLs live in script.js (SOCIAL_LINKS). */
.nav-socials {
  display: flex;
  align-items: center;
  align-self: center;
  gap: 0.1rem;
  margin-left: auto;
  padding-left: var(--space-3);
}

.nav-socials + .button {
  margin-left: var(--space-2);
}

.nav-social {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 8px;
  color: var(--color-text-muted);
  transition: color var(--transition), background-color var(--transition),
              transform 0.18s var(--spring);
}

.nav-social svg {
  display: block;
  width: 1.05rem;
  height: 1.05rem;
}

.nav-social:hover,
.nav-social:focus-visible {
  background-color: rgba(var(--rgb-blue), 0.1);
  color: var(--color-accent-bright);
  transform: translateY(-2px) scale(1.08);
}

/* Small label under the icon (mouse users) */
@media (hover: hover) {
  .nav-social::after {
    content: attr(data-tooltip);
    position: absolute;
    top: calc(100% + 0.3rem);
    left: 50%;
    z-index: 5;
    padding: 0.2rem 0.6rem;
    border: 1px solid rgba(var(--rgb-silver), 0.22);
    border-radius: 6px;
    background-color: var(--color-surface-raised);
    color: var(--color-text);
    font-family: var(--font-main);
    font-size: 0.75rem;
    font-weight: 600;
    white-space: nowrap;
    opacity: 0;
    transform: translate(-50%, -3px);
    pointer-events: none;
    transition: opacity 0.12s ease, transform 0.18s var(--spring);
  }

  .nav-social:hover::after,
  .nav-social:focus-visible::after {
    opacity: 1;
    transform: translate(-50%, 0);
  }
}

/* Small desktops: a little tighter so everything still fits on one line */
@media (min-width: 861px) and (max-width: 1020px) {
  .nav-socials {
    padding-left: var(--space-1);
  }

  .nav-social {
    width: 1.7rem;
    height: 1.7rem;
  }

  .nav-socials + .button {
    margin-left: 0.5rem;
  }
}

/* Phones: a simple row of icons above the Commission Me button */
@media (max-width: 860px) {
  .nav-socials {
    align-self: flex-start;
    gap: 0.5rem;
    margin-left: 0;
    padding-left: 0;
  }

  .nav-social {
    width: 2.75rem;
    height: 2.75rem;
    border: 1px solid var(--color-border);
  }

  .nav-socials + .button {
    margin-left: 0;
  }
}

/* ==========================================================
   6. HERO
   Left: the name set big and staggered, a short line, two buttons and
   quick links to the categories.
   Right: a small collage of two pieces, one tilted a little, one printed
   with a white sticker edge. script.js fills in the images and adds a very
   small cursor-driven depth shift on large screens.
   ========================================================== */
.hero {
  position: relative;
  display: flex;
  align-items: center;
  padding: var(--space-4) 0 var(--space-5);
  /* Was `overflow: hidden`, which cut the season decor off at the top of the
     hero (the decor reaches up behind the top bar by --header-height, like on
     every other page). Sideways overflow is still clipped, so the page
     never gets a horizontal scrollbar. */
  overflow-x: clip;
  overflow-y: visible;
}

/* Soft blue light behind the artwork, fainter behind the headline */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 45% 70% at 76% 50%, rgba(60, 130, 255, 0.12), transparent 70%),
    radial-gradient(ellipse 40% 60% at 18% 40%, rgba(40, 90, 210, 0.06), transparent 70%);
  pointer-events: none;
}

/* Hairline at the bottom of the hero, fading out at both ends */
.hero::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(74, 163, 255, 0.4), transparent);
}

.hero-inner {
  position: relative;
  display: grid;
  gap: var(--space-5);
  align-items: center;
}

/* ----- Text side ----- */
.hero-content {
  max-width: 38rem;
  animation: fade-in 0.7s ease both;
}

/* Three lines, the middle one pushed in and tinted icy blue */
.hero-title {
  font-size: clamp(3.2rem, 14vw, 6rem);
  font-weight: 800;
  line-height: 0.92;
  letter-spacing: -0.045em;
}

.hero-line {
  display: block;
}

.hero-line-indent {
  padding-left: 0.55em;
  color: var(--color-accent-bright);
}

/* A small orange block where the full stop would be (see also .section-title) */
.brick {
  display: inline-block;
  width: 0.17em;
  height: 0.17em;
  margin-left: 0.07em;
  border-radius: 0.03em;
  background-color: var(--color-orange);
  transform: rotate(12deg);
}

.hero-text {
  max-width: 30rem;
  margin-top: var(--space-3);
  color: var(--color-text-muted);
  font-size: 1.1rem;
  line-height: 1.65;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
  margin-top: var(--space-4);
}

/* Buttons + social icons stack in one column so the icons are centred
   under the buttons. The icons reuse the navbar's .nav-social look. */
.hero-cta {
  display: inline-flex;
  flex-direction: column;
  max-width: 100%;
}

.hero-socials {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.1rem;
  margin-top: var(--space-3);
}

@media (max-width: 860px) {
  .hero-socials {
    gap: 0.5rem;
  }
}

/* Average rating, centred above the hero buttons. Reuses the star
   shapes from .rating-star; the fill width is set by script.js. */
.hero-rating {
  align-self: center;
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  margin-top: var(--space-4);
  padding: 0.4rem 0.95rem 0.4rem 0.8rem;
  border: 1px solid rgba(var(--rgb-blue), 0.25);
  border-radius: 999px;
  background-color: rgba(var(--rgb-silver), 0.05);
  color: var(--color-text-muted);
  font-size: 0.88rem;
  font-weight: 600;
  line-height: 1;
  transition: color var(--transition), border-color var(--transition),
              background-color var(--transition), transform 0.25s var(--spring);
}

.hero-rating[hidden] {
  display: none;
}

.hero-rating:hover,
.hero-rating:focus-visible {
  border-color: var(--color-accent-bright);
  background-color: rgba(var(--rgb-blue), 0.1);
  color: var(--color-text);
  transform: translateY(-2px);
}

.hero-rating-score {
  color: var(--color-text);
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.hero-rating .rating-star {
  width: 15px;
  height: 15px;
}

.hero-rating + .hero-actions {
  margin-top: var(--space-2);
}

/* Quick links to the four categories */
.hero-cats {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: var(--space-4);
}

.cat-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.35rem 0.85rem;
  border: 1px solid rgba(var(--rgb-silver), 0.2);
  border-radius: 999px;
  color: var(--color-text-muted);
  font-size: 0.86rem;
  font-weight: 600;
  line-height: 1.4;
  transition: color var(--transition), border-color var(--transition),
              background-color var(--transition), transform 0.25s var(--spring);
}

.cat-chip:hover,
.cat-chip:focus-visible {
  border-color: var(--color-accent-bright);
  background-color: rgba(var(--rgb-blue), 0.1);
  color: var(--color-text);
  transform: translateY(-2px) rotate(-1.5deg);
}

/* ----- Artwork side (phones: just the main piece) ----- */
.hero-visual {
  position: relative;
  animation: fade-in 0.7s ease 0.15s both;
}

.hero-art {
  margin: 0;
}

.hero-art-main {
  position: relative;
  transform:
    translate3d(calc(var(--mx, 0) * 5px), calc(var(--my, 0) * 5px), 0)
    rotate(1.2deg)
    perspective(1100px)
    rotateX(calc(var(--ty, 0) * -9deg))
    rotateY(calc(var(--tx, 0) * 11deg));
  transition: transform 0.2s ease-out;
}

.hero-art-frame {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border: 1px solid rgba(134, 197, 255, 0.22);
  border-radius: 18px;
  background-color: var(--color-surface);
  box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.9);
}

.hero-art-image {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.6s ease, transform 1s ease;
}

.hero-art-image.is-loaded {
  opacity: 1;
}

@media (hover: hover) {
  .hero-art-main:hover .hero-art-image {
    transform: scale(1.03);
  }
}

/* Shown until your artwork loads (or if the file is missing) */
.hero-art-placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  text-align: center;
  background:
    radial-gradient(circle at 20% 90%, rgba(74, 163, 255, 0.18), transparent 55%),
    repeating-linear-gradient(0deg, rgba(150, 190, 255, 0.04) 0 1px, transparent 1px 44px),
    repeating-linear-gradient(90deg, rgba(150, 190, 255, 0.04) 0 1px, transparent 1px 44px);
}

.hero-art-placeholder::before {
  content: "";
  position: absolute;
  inset: var(--space-2);
  border: 1px dashed rgba(150, 190, 255, 0.2);
  border-radius: 10px;
}

.placeholder-logo {
  position: relative;
  display: block;
  width: auto;
  height: 3.2rem;
  margin-bottom: 0.4rem;
  opacity: 0.85;
}

.hero-art-label,
.hero-art-hint {
  position: relative;
}

.hero-art-label {
  font-size: 1.1rem;
  font-weight: 700;
}

.hero-art-hint {
  color: var(--color-text-muted);
  font-size: 0.9rem;
}

/* The one orange note in the hero */
.hero-sticker {
  position: absolute;
  top: -0.85rem;
  right: 1.2rem;
  z-index: 3;
  padding: 0.3rem 0.85rem;
  border-radius: 8px;
  background-color: var(--color-orange);
  color: var(--color-orange-ink);
  font-size: 0.85rem;
  font-weight: 800;
  line-height: 1.3;
  transform: rotate(4deg);
}

@keyframes fade-in {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ----- Phones: buttons share the full width, easy to tap ----- */
@media (max-width: 479px) {
  .hero-actions .button {
    flex: 1 1 100%;
  }
}

/* ----- Desktop: two columns, the headline gets a little more room ----- */
@media (min-width: 960px) {
  .hero {
    min-height: calc(100vh - var(--header-height));
    min-height: min(calc(100svh - var(--header-height)), 56rem);
    padding: var(--space-5) 0 var(--space-6);
  }

  .hero-inner {
    grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.12fr);
    gap: var(--space-5);
  }

  .hero-title {
    font-size: clamp(3.8rem, 7.2vw, 6.2rem);
  }

  .hero-visual {
    max-width: none;
  }
}

/* ==========================================================
   7. PAGE SECTIONS
   ========================================================== */
.section {
  position: relative;
  padding: var(--space-5) 0 var(--space-6);
}

.section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

.section-title {
  font-size: clamp(2.3rem, 5.2vw, 3.7rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.04em;
}

/* Same small orange block as the hero, after the big headings */
.section-title::after,
.page-title::after {
  content: "";
  display: inline-block;
  width: 0.15em;
  height: 0.15em;
  margin-left: 0.07em;
  border-radius: 0.03em;
  background-color: var(--color-orange);
  transform: rotate(12deg);
}

/* Gentle entrance. Elements get .reveal from script.js, then .is-visible
   when they scroll into view (animation, so hover effects still work after). */
.reveal:not(.is-visible) {
  opacity: 0;
}

.reveal.is-visible {
  animation: reveal-in 0.55s ease backwards;
  animation-delay: calc(var(--reveal-i, 0) * 70ms);
}

@keyframes reveal-in {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}

/* ----- Category glyphs -----
   Every category has its own tiny shape. It appears in tags, filter chips,
   the hero links and review labels. Pure CSS: script.js only sets
   data-category. Orange by default, so the shapes are the small colour. */
[data-category] {
  --glyph: circle(50%);
}

[data-category="GFX"],
[data-category="Renders"]            { --glyph: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); }
[data-category="Thumbnails"],
[data-category="Game Thumbnails"],
[data-category="YouTube Thumbnails"] { --glyph: polygon(18% 4%, 96% 50%, 18% 96%); }
[data-category="Logos"],
[data-category="Branding"],
[data-category="Game Icons"],
[data-category="Profile Pictures"]   { --glyph: polygon(25% 4%, 75% 4%, 100% 50%, 75% 96%, 25% 96%, 0 50%); }
[data-category="UI"],
[data-category="UI/UX"]              { --glyph: inset(6% round 24%); }
[data-category="YouTube Banners"]    { --glyph: inset(22% 0 round 12%); }
[data-category="Commission Sheets"]  { --glyph: inset(4% 14% round 12%); }
[data-category="All"]        { --glyph: circle(50%); }

.tag::before,
.cat-chip::before,
.filter-chip::before,
.review-category::before {
  content: "";
  flex: none;
  width: 0.62em;
  height: 0.62em;
  background-color: var(--glyph-color, var(--color-orange));
  clip-path: var(--glyph);
}

/* Category tag (Featured Work tabs, portfolio captions) */
.tag {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  align-self: flex-start;
  padding: 0.12rem 0.65rem 0.14rem;
  border: 1px solid rgba(var(--rgb-blue), 0.35);
  border-radius: 999px;
  background-color: rgba(var(--rgb-blue), 0.1);
  color: var(--color-accent-bright);
  font-size: 0.78rem;
  font-weight: 700;
  line-height: 1.5;
  white-space: nowrap;
}

/* ----- Homepage featured work ----- */
.work::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 50% 45% at 85% 20%, rgba(45, 110, 230, 0.09), transparent 70%);
  pointer-events: none;
}

.work > .container {
  position: relative;
}

.work-lead {
  max-width: 25rem;
  color: var(--color-text-muted);
  font-size: 1rem;
}

@media (min-width: 760px) {
  .work-lead {
    margin-left: auto;
  }
}

.work-image {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.6s ease, transform 0.9s ease;
}

.work-image.is-loaded {
  opacity: 1;
}

/* Shown until your artwork loads (or if the file is missing) */
.work-placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.2rem;
  padding-bottom: 2.4rem;
  text-align: center;
  background:
    radial-gradient(circle at 18% 92%, rgba(var(--rgb-blue), 0.2), transparent 58%),
    repeating-linear-gradient(0deg, rgba(150, 190, 255, 0.035) 0 1px, transparent 1px 44px),
    repeating-linear-gradient(90deg, rgba(150, 190, 255, 0.035) 0 1px, transparent 1px 44px);
}

.work-placeholder::before {
  content: "";
  position: absolute;
  inset: var(--space-2);
  border: 1px dashed rgba(150, 190, 255, 0.18);
  border-radius: 8px;
}

.work-placeholder-label {
  color: var(--color-text);
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.work-placeholder-hint {
  color: var(--color-accent-bright);
  font-size: 0.85rem;
  font-weight: 600;
}

.work-placeholder-path {
  color: var(--color-text-muted);
  font-size: 0.78rem;
}

/* Homepage featured work: uses the same cards as the portfolio on work.html
   (.portfolio-grid, .portfolio-item, .portfolio-art, .portfolio-caption).
   Only what differs from the portfolio is set here. */
.work-grid .portfolio-item {
  animation: none;
}

.work-grid .portfolio-art {
  cursor: pointer;
}

.work-grid .portfolio-art::after {
  content: "View in portfolio";
}

/* Footer of the section: a dashed line that runs into the button */
.work-footer {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-4);
}

.work-footer-rule {
  flex: 1;
  height: 0;
  border-top: 2px dashed rgba(var(--rgb-silver), 0.18);
}

@media (max-width: 639px) {
  .work-lead {
    font-size: 0.95rem;
  }

  .work-footer .button {
    flex: 1;
  }

  .work-footer-rule {
    display: none;
  }
}

/* ----- Homepage socials ("Find Me Around") -----
   A small hub, not five identical cards: one big community tile, a wide
   YouTube tile with a play badge, two quieter text tiles, and a strip for
   the Roblox profile. Each tile has its own corners and its own tiny tilt
   on hover. Orange only appears on the small details. */
.socials::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 45% 55% at 88% 38%, rgba(var(--rgb-violet), 0.07), transparent 70%);
  pointer-events: none;
}

.socials > .container {
  position: relative;
}

.socials-lead {
  max-width: 25rem;
  color: var(--color-text-muted);
  font-size: 1rem;
}

@media (min-width: 760px) {
  .socials-lead {
    margin-left: auto;
  }
}

/* Mobile first: one column */
.social-hub {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-2);
}

.social-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
  isolation: isolate;
  border: 1px solid rgba(var(--rgb-blue), 0.18);
  border-radius: 14px;
  background-color: var(--color-surface);
  box-shadow: 0 24px 50px -30px rgba(0, 0, 0, 0.9);
  transition: transform 0.3s var(--spring), border-color 0.25s ease, box-shadow 0.3s ease;
}

/* Different corners and a different surface per tile, so they do not read as one card five times */
.social-community { border-radius: 24px; }
.social-github    { border-radius: 22px 8px 22px 8px; }
.social-profile   { border-radius: 10px 26px 10px 26px; }

.social-x {
  background:
    radial-gradient(circle at 100% 0, rgba(var(--rgb-blue), 0.16), transparent 62%),
    var(--color-surface);
}

.social-github {
  background:
    radial-gradient(circle at 0 100%, rgba(var(--rgb-blue), 0.12), transparent 60%),
    var(--color-surface-raised);
}

.social-discord {
  border-radius: 8px 22px 8px 22px;
  background:
    radial-gradient(circle at 100% 100%, rgba(var(--rgb-blue), 0.14), transparent 60%),
    var(--color-surface);
}

/* ----- Artwork slots ----- */
.social-art {
  position: relative;
  flex: none;
  overflow: hidden;
  aspect-ratio: 16 / 10;
  background-color: var(--color-surface-raised);
}

.social-art-image {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.6s ease, transform 0.9s ease;
}

.social-art-image.is-loaded {
  opacity: 1;
}

/* Shown until your artwork loads (or if the file is missing) */
.social-slot {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.2rem;
  text-align: center;
  background:
    radial-gradient(circle at 18% 92%, rgba(var(--rgb-blue), 0.2), transparent 58%),
    repeating-linear-gradient(0deg, rgba(150, 190, 255, 0.035) 0 1px, transparent 1px 44px),
    repeating-linear-gradient(90deg, rgba(150, 190, 255, 0.035) 0 1px, transparent 1px 44px);
}

.social-slot::before {
  content: "";
  position: absolute;
  inset: var(--space-2);
  border: 1px dashed rgba(150, 190, 255, 0.18);
  border-radius: 8px;
}

.social-slot-hint {
  color: var(--color-accent-bright);
  font-size: 0.85rem;
  font-weight: 600;
}

.social-slot-path {
  color: var(--color-text-muted);
  font-size: 0.78rem;
}

/* Play badge on the YouTube tile: the one chunk of orange in this section */
.social-play {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 2;
  width: 2.9rem;
  height: 2.05rem;
  margin: -1.02rem 0 0 -1.45rem;
  border-radius: 0.7rem;
  background-color: var(--color-orange);
  transform: rotate(-4deg);
  transition: transform 0.3s var(--spring);
}

.social-play::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-38%, -50%);
  border-top: 0.45rem solid transparent;
  border-bottom: 0.45rem solid transparent;
  border-left: 0.75rem solid var(--color-orange-ink);
}

/* ----- Text ----- */
.social-body {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  padding: 1.1rem 4rem 1.2rem 1.25rem;
}

.social-x .social-body,
.social-github .social-body,
.social-discord .social-body {
  justify-content: flex-end;
  flex: 1;
  min-height: 8.5rem;
  padding-top: 1.5rem;
}

/* Platform icon, sitting in line with the heading text and centered to it */
.social-icon {
  flex: none;
  display: inline-flex;
  align-items: center;
  color: var(--color-accent-bright);
}

.social-icon svg {
  display: block;
  width: 1.05em;
  height: 1.05em;
}

.social-name {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  color: var(--color-text);
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.03em;
}

.social-community .social-name {
  font-size: 1.5rem;
  letter-spacing: -0.035em;
}

.social-text {
  color: var(--color-text-muted);
  font-size: 0.92rem;
}

/* Arrow chip in the bottom-right corner. Turns orange on hover. */
.social-arrow {
  position: absolute;
  right: 1rem;
  bottom: 1rem;
  z-index: 3;
  box-sizing: content-box;
  padding: 0.5rem;
  border: 1px solid rgba(var(--rgb-silver), 0.28);
  border-radius: 50%;
  background-color: rgba(6, 10, 20, 0.55);
  color: var(--color-text);
  transition: background-color var(--transition), border-color var(--transition),
              color var(--transition), transform 0.3s var(--spring);
}

/* ----- Hover (mouse) and keyboard focus ----- */
.social-tile:focus-visible {
  border-color: rgba(var(--rgb-blue), 0.6);
}

@media (hover: hover) {
  .social-tile:hover {
    border-color: rgba(var(--rgb-blue), 0.5);
    box-shadow: 0 30px 56px -30px rgba(0, 0, 0, 0.95);
    transform: translateY(-4px);
  }

  .social-x:hover       { transform: translateY(-4px) rotate(-0.6deg); }
  .social-github:hover  { transform: translateY(-4px) rotate(0.6deg); }
  .social-discord:hover { transform: translateY(-4px) rotate(-0.6deg); }

  .social-tile:hover .social-art-image {
    transform: scale(1.04);
  }

  .social-youtube:hover .social-play {
    transform: rotate(3deg) scale(1.08);
  }

  .social-tile:hover .social-arrow,
  .social-tile:focus-visible .social-arrow {
    border-color: var(--color-orange);
    background-color: var(--color-orange);
    color: var(--color-orange-ink);
    transform: rotate(8deg);
  }
}

/* Phones: the Roblox profile is a banner of its own above its label */
.social-profile .social-art {
  aspect-ratio: 16 / 7;
}

/* Tablet: two columns. Community, YouTube and the profile run full width. */
@media (min-width: 640px) {
  .social-hub {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-3);
  }

  .social-discord {
    grid-column: 1 / -1;
  }

  .social-discord .social-body {
    min-height: 0;
  }

  .social-profile {
    grid-column: 1 / -1;
    flex-direction: row;
  }

  .social-profile .social-art {
    flex: 1.6;
    aspect-ratio: auto;
    min-height: 9rem;
  }

  .social-profile .social-body {
    flex: 1;
    justify-content: center;
  }
}

/* Desktop: two rows. Community, YouTube and the Roblox profile on top (4 / 5 / 3),
   then X, GitHub and Discord at the same size (4 / 4 / 4). */
@media (min-width: 960px) {
  .social-hub {
    grid-template-rows: minmax(17rem, auto) minmax(9.5rem, auto);
  }

  .social-community { grid-column: 1 / 5;   grid-row: 1; }
  .social-youtube   { grid-column: 5 / 10;  grid-row: 1; }
  .social-profile   { grid-column: 10 / 13; grid-row: 1; flex-direction: column; }
  .social-x         { grid-column: 1 / 5;   grid-row: 2; }
  .social-github    { grid-column: 5 / 9;   grid-row: 2; }
  .social-discord   { grid-column: 9 / 13;  grid-row: 2; }

  /* The artwork takes whatever height is left above the text */
  .social-community .social-art,
  .social-youtube .social-art,
  .social-profile .social-art {
    flex: 1 1 auto;
    aspect-ratio: auto;
    min-height: 7.5rem;
  }

  .social-profile .social-body {
    flex: none;
    justify-content: flex-start;
  }
}

/* ----- Homepage reviews section ----- */
.reviews::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 50% 60% at 15% 45%, rgba(45, 110, 230, 0.08), transparent 70%);
  pointer-events: none;
}

.reviews > .container {
  position: relative;
}

.review-carousel {
  position: relative;
}

/* Scrolls sideways with snapping. Swipe on touch, arrows / dots / arrow keys elsewhere.
   The faded edges sit in the container padding, so cards are never cut mid-content. */
.review-track {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  margin: 0 calc(-1 * var(--container-padding));
  padding: 0.75rem var(--container-padding) 1rem;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-left: var(--container-padding);
  scrollbar-width: none;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 var(--container-padding), #000 calc(100% - var(--container-padding)), transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 var(--container-padding), #000 calc(100% - var(--container-padding)), transparent 100%);
}

.review-track::-webkit-scrollbar {
  display: none;
}

.review-track:focus-visible {
  outline-offset: -4px;
  border-radius: var(--radius-card);
}

.review-track > .review-card {
  flex: 0 0 88%;
  scroll-snap-align: start;
}

.review-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  margin-top: var(--space-1);
}

.review-dots {
  display: flex;
  align-items: center;
}

.review-count {
  color: var(--color-text-muted);
  font-size: 0.9rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.review-dot {
  position: relative;
  width: 22px;
  height: 28px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}

.review-dot::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 6px;
  height: 6px;
  border-radius: 3px;
  background-color: rgba(150, 190, 255, 0.28);
  transform: translate(-50%, -50%);
  transition: width 0.25s ease, background-color 0.25s ease;
}

.review-dot:hover::before {
  background-color: rgba(150, 190, 255, 0.55);
}

.review-dot.is-active::before {
  width: 18px;
  background-color: var(--color-accent);
}

.review-arrows {
  display: flex;
  gap: 0.5rem;
}

.review-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid rgba(var(--rgb-silver), 0.24);
  border-radius: var(--radius-button);
  background-color: rgba(var(--rgb-silver), 0.07);
  color: var(--color-text);
  cursor: pointer;
  transition: background-color var(--transition), border-color var(--transition),
              opacity var(--transition), transform 0.25s var(--spring);
}

.review-arrow:hover {
  border-color: rgba(var(--rgb-silver), 0.5);
  background-color: rgba(var(--rgb-silver), 0.15);
  transform: translateY(-2px);
}

.review-arrow[aria-disabled="true"] {
  opacity: 0.35;
  cursor: default;
  pointer-events: none;
}

/* ----- Review card (used by the carousel and the reviews page) -----
   A chat bubble with a little tail, and the client's name underneath
   where the tail points. The artwork (if there is any) sits at the top
   of the bubble. */
.review-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  transition: transform 0.3s var(--spring);
}

.review-bubble {
  position: relative;
  display: flex;
  flex: 1;
  flex-direction: column;
  border: 1px solid var(--color-border);
  border-radius: 20px 20px 20px 6px;
  background-color: var(--color-surface-raised);
  transition: border-color 0.25s ease;
}

/* The tail: a rotated square with the same fill, so it joins the bubble */
.review-bubble::after {
  content: "";
  position: absolute;
  left: 26px;
  bottom: -8px;
  width: 14px;
  height: 14px;
  border-right: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  border-bottom-right-radius: 3px;
  background-color: var(--color-surface-raised);
  transform: rotate(45deg);
  transition: border-color 0.25s ease;
}

@media (hover: hover) {
  .review-card:hover {
    transform: translateY(-3px);
  }

  .review-card:hover .review-bubble,
  .review-card:hover .review-bubble::after {
    border-color: rgba(134, 197, 255, 0.5);
  }
}

/* Artwork the review is about (shown only when the review has a projectImage) */
.review-art {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border-bottom: 1px solid var(--color-border);
  border-radius: 19px 19px 0 0;
  background-color: var(--color-surface);
}

.review-art-image {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.5s ease, transform 0.8s ease;
}

.review-art-image.is-loaded {
  opacity: 1;
}

@media (hover: hover) {
  .review-card:hover .review-art-image {
    transform: scale(1.03);
  }
}

.review-art-placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.2rem;
  text-align: center;
  background:
    radial-gradient(circle at 20% 90%, rgba(var(--rgb-blue), 0.16), transparent 60%),
    repeating-linear-gradient(0deg, rgba(150, 190, 255, 0.04) 0 1px, transparent 1px 32px),
    repeating-linear-gradient(90deg, rgba(150, 190, 255, 0.04) 0 1px, transparent 1px 32px);
}

.review-art-placeholder::before {
  content: "";
  position: absolute;
  inset: var(--space-2);
  border: 1px dashed rgba(150, 190, 255, 0.2);
  border-radius: 8px;
}

.review-art-label,
.review-art-hint {
  position: relative;
}

.review-art-label {
  font-weight: 700;
}

.review-art-hint {
  color: var(--color-text-muted);
  font-size: 0.85rem;
}

.review-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 0.9rem;
  padding: 1.3rem 1.4rem 1.45rem;
}

.review-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
}

.review-category {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  color: var(--color-accent-bright);
  font-size: 0.86rem;
  font-weight: 700;
}

.review-stars {
  display: inline-flex;
  gap: 2px;
}

.review-star {
  width: 14px;
  height: 14px;
  fill: rgba(150, 190, 255, 0.2);
}

.review-star.is-on {
  fill: var(--color-orange);
}

.review-text {
  color: rgba(241, 245, 252, 0.92);
  line-height: 1.65;
}

/* On the homepage, long reviews are shortened so the cards stay even.
   The reviews page always shows the full text. */
.review-card.is-compact .review-text p {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 7;
  line-clamp: 7;
  overflow: hidden;
}

/* Name row under the bubble */
.review-author {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1.1rem 0.4rem 0 0.4rem;
}

.review-avatar {
  position: relative;
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  overflow: hidden;
  border: 1px solid rgba(134, 197, 255, 0.3);
  border-radius: 50%;
  background-color: var(--color-surface);
  color: var(--color-accent-bright);
  font-family: var(--font-display);
  font-weight: 700;
}

.review-avatar-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.4s ease;
}

.review-avatar-image.is-loaded {
  opacity: 1;
}

.review-name {
  font-size: 0.97rem;
  font-weight: 700;
}

/* Marks example entries so they are never mistaken for real reviews */
.review-placeholder-tag {
  margin-left: auto;
  padding: 0.15rem 0.55rem;
  border: 1px dashed rgba(150, 190, 255, 0.4);
  border-radius: 6px;
  color: var(--color-text-muted);
  font-size: 0.75rem;
  font-weight: 600;
}

.review-empty {
  padding: var(--space-4);
  border: 1px dashed rgba(150, 190, 255, 0.22);
  border-radius: var(--radius-card);
  color: var(--color-text-muted);
  text-align: center;
}

/* ----- Review card fixes: cleaner header, verified badge, premium look ----- */

/* Category label and example/placeholder markers are no longer shown */
.review-category,
.review-placeholder-tag,
.review-art-placeholder {
  display: none;
}

/* With the category gone, the stars sit on the left */
.review-meta {
  justify-content: flex-start;
}

.review-text p + p {
  margin-top: 0.6rem;
}

.review-text {
  overflow-wrap: anywhere;
}

/* Reviews page: every card is exactly as tall as its own text */
.review-grid {
  column-fill: balance;
}

.review-grid .review-card {
  display: block;
  height: auto;
}

.review-grid .review-bubble {
  flex: 0 0 auto;
}

/* Name + verified badge */
.review-name {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-width: 0;
}

.review-verified {
  position: relative;
  flex: none;
  display: inline-flex;
  width: 1.05rem;
  height: 1.05rem;
  color: var(--color-accent);
  filter: drop-shadow(0 0 6px var(--color-accent-glow));
}

.review-verified svg {
  display: block;
  width: 100%;
  height: 100%;
}

.review-verified-seal {
  fill: currentColor;
}

.review-verified-tick {
  stroke: #fff;
  stroke-width: 2.1;
}

@media (hover: hover) {
  .review-verified::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: calc(100% + 0.45rem);
    left: 50%;
    z-index: 5;
    padding: 0.2rem 0.6rem;
    border-radius: 6px;
    background-color: var(--color-orange);
    color: var(--color-orange-ink);
    font-family: var(--font-main);
    font-size: 0.75rem;
    font-weight: 700;
    white-space: nowrap;
    opacity: 0;
    transform: translate(-50%, 4px);
    pointer-events: none;
    transition: opacity 0.12s ease, transform 0.2s var(--spring);
  }

  .review-verified:hover::after {
    opacity: 1;
    transform: translate(-50%, 0);
  }
}

/* Premium background (verified clients + Scott): a deeper navy with an icy
   glow in one corner, a faint warm glow in the other and a fine top highlight */
.review-card.is-premium .review-bubble {
  border-color: rgba(134, 197, 255, 0.4);
  background-color: var(--color-surface-raised);
  background-image:
    radial-gradient(120% 85% at 0% 0%, rgba(var(--rgb-blue), 0.22), transparent 60%),
    radial-gradient(70% 60% at 100% 0%, rgba(var(--rgb-orange), 0.10), transparent 70%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.035), transparent 45%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 18px 38px -22px rgba(var(--rgb-blue), 0.55);
}

.review-card.is-premium .review-bubble::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 14%;
  right: 14%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--color-accent-bright), transparent);
  pointer-events: none;
}

.review-card.is-premium .review-bubble::after {
  border-color: rgba(134, 197, 255, 0.4);
}

.review-card.is-premium .review-avatar {
  border-color: rgba(134, 197, 255, 0.7);
  box-shadow: 0 0 0 3px rgba(var(--rgb-blue), 0.16);
}

@media (hover: hover) {
  .review-card.is-premium:hover .review-bubble,
  .review-card.is-premium:hover .review-bubble::after {
    border-color: rgba(134, 197, 255, 0.75);
  }
}

/* ----- Sub-pages: reviews.html and work.html ----- */
.page-hero {
  position: relative;
  padding: var(--space-6) 0 var(--space-4);
}

.page-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 50% 80% at 20% 40%, rgba(60, 130, 255, 0.10), transparent 70%),
    radial-gradient(ellipse 40% 70% at 90% 30%, rgba(var(--rgb-violet), 0.05), transparent 70%);
  pointer-events: none;
}

.page-hero > .container {
  position: relative;
  animation: fade-in 0.7s ease both;
}

.page-title {
  font-size: clamp(2.8rem, 8vw, 5.2rem);
  font-weight: 800;
  line-height: 0.98;
  letter-spacing: -0.045em;
}

.page-text {
  max-width: 34rem;
  margin-top: var(--space-3);
  color: var(--color-text-muted);
  font-size: 1.125rem;
  line-height: 1.65;
}

.review-archive {
  padding: var(--space-3) 0 var(--space-5);
}

/* Masonry-style columns: cards keep their natural height, so mixed
   short / long reviews and optional artwork still look balanced. */
.review-grid {
  columns: 1;
  column-gap: var(--space-3);
}

.review-grid .review-card {
  width: 100%;
  margin-bottom: var(--space-4);
  break-inside: avoid;
}

.review-grid .review-empty {
  column-span: all;
}

/* Closing call to action: no box, just type and a button on a dashed line */
.page-cta {
  padding: var(--space-3) 0 var(--space-4);
}

.cta-panel {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3) var(--space-5);
  padding-top: var(--space-4);
  border-top: 2px dashed rgba(var(--rgb-silver), 0.2);
}

.cta-title {
  font-size: clamp(1.9rem, 4.4vw, 3rem);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.035em;
}

.cta-text {
  margin-top: 0.4rem;
  color: var(--color-text-muted);
  font-size: 1.05rem;
}

/* ----- Portfolio page (work.html) ----- */
.portfolio {
  padding: var(--space-3) 0 var(--space-5);
}

.filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}

.filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1.1rem;
  border: 1px solid rgba(var(--rgb-silver), 0.26);
  border-radius: 999px;
  background-color: rgba(var(--rgb-silver), 0.05);
  color: var(--color-text);
  font: inherit;
  font-size: 0.92rem;
  font-weight: 700;
  line-height: 1.2;
  cursor: pointer;
  transition: transform 0.25s var(--spring), background-color 0.2s ease,
              border-color 0.2s ease, box-shadow 0.25s ease;
}

.filter-chip:hover {
  border-color: var(--color-accent-bright);
  background-color: rgba(var(--rgb-blue), 0.12);
  transform: translateY(-2px);
}

/* Selected: a flat blue surface, same blue as the buttons */
.filter-chip[aria-pressed="true"] {
  border-color: var(--color-button);
  background-color: var(--color-button);
  color: #fff;
  box-shadow: 0 8px 18px -10px rgba(28, 100, 220, 0.8);
}

.filter-chip[aria-pressed="true"]::before {
  background-color: #fff;
}

/* Portfolio page: filters and tags are plain text, no category shapes */
.portfolio .filter-chip::before,
.portfolio-caption .tag::before {
  display: none;
}

/* One playful line that changes with the selected category */
.filter-note {
  min-height: 1.6em;
  margin: var(--space-3) 0 var(--space-4);
  color: var(--color-text-muted);
  font-size: 1rem;
}

/* Gallery. Pieces flow in columns, so different formats never leave empty
   gaps. Each frame has the exact aspect ratio of its category (--art-ratio,
   set in script.js), so artwork is never stretched or cropped. */
.portfolio-grid {
  columns: 1;
  column-gap: var(--space-3);
}

.portfolio-item {
  margin: 0 0 var(--space-4);
  break-inside: avoid;
  animation: reveal-in 0.5s ease backwards;
  animation-delay: calc(var(--i, 0) * 45ms);
}

/* The whole picture is a link that opens the full-size viewer */
.portfolio-art {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: var(--art-ratio, 16 / 9);
  overflow: hidden;
  isolation: isolate;
  border: 1px solid rgba(var(--rgb-blue), 0.2);
  border-radius: 12px;
  background-color: var(--color-surface);
  color: inherit;
  text-decoration: none;
  cursor: zoom-in;
  transition: transform 0.3s ease, border-color 0.25s ease, box-shadow 0.3s ease;
}

/* "More" can hold any size: show the whole image instead of cropping it */
.portfolio-item[data-fit="contain"] .work-image {
  object-fit: contain;
}

/* Reuses the placeholder and image styles from Featured Work.
   The placeholder stays hidden while the artwork loads (no flash on refresh)
   and only appears when no image file exists (script.js adds .is-missing). */
.portfolio-art .work-placeholder {
  padding-bottom: 0;
  opacity: 0;
  transition: opacity 0.25s ease;
}

.portfolio-art.is-missing .work-placeholder {
  opacity: 1;
}

/* Hover layer: a soft shade and a small text label, hidden until hover */
.portfolio-art::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  background: linear-gradient(to top, rgba(4, 8, 18, 0.55), rgba(4, 8, 18, 0) 55%);
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

.portfolio-art::after {
  content: "View full size";
  position: absolute;
  right: 0.75rem;
  bottom: 0.75rem;
  z-index: 3;
  padding: 0.3rem 0.8rem 0.34rem;
  border: 1px solid rgba(var(--rgb-blue), 0.4);
  border-radius: 999px;
  background-color: rgba(6, 10, 20, 0.82);
  color: var(--color-text);
  font-size: 0.78rem;
  font-weight: 700;
  line-height: 1.4;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.25s ease, transform 0.25s ease;
  pointer-events: none;
}

.portfolio-art:focus-visible {
  outline: 2px solid var(--color-accent-bright);
  outline-offset: 3px;
}

.portfolio-art:focus-visible::before,
.portfolio-art:focus-visible::after {
  opacity: 1;
  transform: none;
}

.portfolio-caption {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.75rem;
  padding: 0.8rem 0.15rem 0;
}

.portfolio-title {
  color: var(--color-text);
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  transition: color 0.2s ease;
}

.portfolio-empty {
  grid-column: 1 / -1;
  padding: var(--space-5) 0;
  color: var(--color-text-muted);
  text-align: center;
  column-span: all;
}

/* "More coming soon" line at the end of every gallery section */
.portfolio-soon {
  column-span: all;
  grid-column: 1 / -1;
  margin: var(--space-2) 0 0;
  padding: var(--space-4) 0 var(--space-2);
  border-top: 2px dashed rgba(var(--rgb-silver), 0.2);
  color: var(--color-text-muted);
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  text-align: center;
}

.portfolio-soon:only-child {
  border-top: 0;
  padding: var(--space-5) 0;
}

@media (hover: hover) {
  .portfolio-item:hover .portfolio-art {
    transform: translateY(-3px);
    border-color: rgba(var(--rgb-blue), 0.6);
    box-shadow: 0 22px 36px -26px rgba(0, 0, 0, 0.95);
  }

  .portfolio-item:hover .work-image {
    transform: scale(1.02);
  }

  .portfolio-item[data-fit="contain"]:hover .work-image {
    transform: none;
  }

  .portfolio-item:hover .portfolio-art::before {
    opacity: 1;
  }

  .portfolio-item:hover .portfolio-art::after {
    opacity: 1;
    transform: none;
  }

  .portfolio-item:hover .portfolio-title {
    color: var(--color-orange-bright);
  }
}

/* Tablet: two columns */
@media (min-width: 640px) {
  .portfolio-grid {
    columns: 2;
  }
}

/* Desktop: three columns. When only landscape pieces are shown (thumbnails,
   banners, UI/UX ...) two wider columns, so they stay big enough to read. */
@media (min-width: 960px) {
  .portfolio-grid {
    columns: 3;
  }

  .portfolio-grid[data-layout="landscape"] {
    columns: 2;
  }
}

/* Only square pieces (Profile Pictures, Game Icons, Renders): a real grid.
   Balanced CSS columns split 4 equal squares into 2 + 2 and leave the third
   column empty, so a grid keeps three columns, filled left to right. */
.portfolio-grid[data-layout="square"]:not(.work-grid) {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  columns: auto;
  gap: var(--space-4) var(--space-3);
}

.portfolio-grid[data-layout="square"]:not(.work-grid) .portfolio-item {
  margin: 0;
}

@media (min-width: 640px) {
  .portfolio-grid[data-layout="square"]:not(.work-grid) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 960px) {
  .portfolio-grid[data-layout="square"]:not(.work-grid) {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* ----- Full-size viewer (lightbox) -----
   Layout, top to bottom: bar (category + counter, tools) / the picture with big
   arrows on both sides / previews. Built in script.js (buildViewer). */
.lightbox-lock {
  overflow: hidden;
}

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background-color: rgba(3, 6, 13, 0.96);
  color: var(--color-text);
  opacity: 0;
  visibility: hidden;
  outline: none;
  overscroll-behavior: contain;
  transition: opacity 0.25s ease, visibility 0s linear 0.25s;
}

.lightbox.is-open {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.25s ease;
}

/* Buttons that are hidden by script.js (a single piece, no fullscreen ...) stay hidden */
.lightbox [hidden] {
  display: none !important;
}

/* A soft glow behind the picture, blurred from the picture itself */
.lightbox-ambient {
  position: absolute;
  inset: -15%;
  background-position: center;
  background-size: cover;
  filter: blur(70px) saturate(1.5);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.8s ease;
}

.lightbox-ambient.is-on {
  opacity: 0.3;
}

/* ----- Top bar ----- */
.lightbox-bar {
  position: relative;
  z-index: 2;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.7rem var(--container-padding, 1.25rem);
}

/* "Renders  ·  2 / 6" (no project title) */
.lightbox-count {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  min-width: 0;
  margin: 0;
  color: var(--color-text-muted);
  font-size: 0.9rem;
  white-space: nowrap;
}

.lightbox-count-cat {
  overflow: hidden;
  color: var(--color-text);
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.01em;
  text-overflow: ellipsis;
}

.lightbox-count-pos {
  font-variant-numeric: tabular-nums;
}

.lightbox-count-pos:not(:empty)::before {
  content: "\00b7";
  margin-right: 0.5rem;
  opacity: 0.7;
}

.lightbox-tools {
  flex: none;
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.lightbox-tools-divider {
  width: 1px;
  height: 1.4rem;
  margin: 0 0.2rem;
  background-color: rgba(var(--rgb-silver), 0.22);
}

.lightbox-icon {
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  padding: 0;
  border: 1px solid rgba(var(--rgb-silver), 0.2);
  border-radius: 50%;
  background-color: rgba(var(--rgb-silver), 0.06);
  color: var(--color-text);
  cursor: pointer;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.2s var(--spring);
}

.lightbox-icon:hover {
  border-color: rgba(var(--rgb-blue), 0.6);
  background-color: rgba(var(--rgb-blue), 0.16);
  transform: translateY(-1px);
}

.lightbox-icon:active {
  transform: scale(0.94);
}

.lightbox-icon:focus-visible {
  outline: 2px solid var(--color-accent-bright);
  outline-offset: 2px;
}

/* A tool that is switched on (fullscreen, help) */
.lightbox-icon[aria-pressed="true"] {
  border-color: rgba(var(--rgb-blue), 0.55);
  background-color: rgba(var(--rgb-blue), 0.18);
  color: var(--color-accent-bright);
}

/* Close: the one blue button, but a calm one (a soft tint, no glow, no white ring) */
.lightbox-close {
  border-color: rgba(var(--rgb-blue), 0.5);
  background-color: rgba(var(--rgb-blue), 0.2);
  color: #fff;
}

.lightbox-close:hover {
  border-color: var(--color-accent-bright);
  background-color: var(--color-button);
  transform: rotate(90deg);
}

/* ----- The picture ----- */
.lightbox-main {
  position: relative;
  z-index: 1;
  flex: 1;
  min-height: 0;
}

.lightbox-stage {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}

/* The picture is sized by script.js; this wrapper is what zooms and moves */
.lightbox-pan {
  flex: none;
  transition: transform 0.22s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.lightbox-pan.is-dragging {
  transition: none;
}

.lightbox-image {
  display: block;
  max-width: none;
  border-radius: 6px;
  box-shadow: 0 30px 80px -30px rgba(0, 0, 0, 0.9);
  opacity: 0;
  cursor: zoom-in;
  transition: opacity 0.25s ease;
  -webkit-user-drag: none;
}

.lightbox-image.is-ready {
  opacity: 1;
}

.lightbox.is-zoomed .lightbox-image {
  cursor: grab;
}

.lightbox-pan.is-dragging .lightbox-image {
  cursor: grabbing;
}

/* A small spinner, only if a picture takes more than a moment */
.lightbox-spinner {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 2rem;
  height: 2rem;
  margin: -1rem 0 0 -1rem;
  border: 2px solid rgba(var(--rgb-silver), 0.2);
  border-top-color: var(--color-accent-bright);
  border-radius: 50%;
  opacity: 0;
  pointer-events: none;
}

.lightbox.is-loading .lightbox-spinner {
  animation: lightbox-spin 0.8s linear infinite, lightbox-fade-in 0.2s ease 0.35s forwards;
}

@keyframes lightbox-spin {
  to { transform: rotate(360deg); }
}

@keyframes lightbox-fade-in {
  to { opacity: 1; }
}

.lightbox-missing {
  max-width: min(28rem, 90%);
  margin: 0;
  padding: var(--space-3) var(--space-4);
  border: 1px dashed rgba(150, 190, 255, 0.25);
  border-radius: 10px;
  color: var(--color-text-muted);
  text-align: center;
}

/* Big arrows on both sides (phones swipe instead) */
.lightbox-arrow {
  position: absolute;
  top: 50%;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  margin-top: -1.5rem;
  padding: 0;
  border: 1px solid rgba(var(--rgb-silver), 0.2);
  border-radius: 50%;
  background-color: rgba(6, 10, 20, 0.55);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  color: var(--color-text);
  cursor: pointer;
  opacity: 0.7;
  transition: opacity 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, transform 0.2s var(--spring);
}

.lightbox-arrow--prev { left: max(0.75rem, var(--container-padding, 1.25rem)); }
.lightbox-arrow--next { right: max(0.75rem, var(--container-padding, 1.25rem)); }

.lightbox-arrow:hover {
  border-color: rgba(var(--rgb-blue), 0.6);
  background-color: rgba(var(--rgb-blue), 0.22);
  opacity: 1;
}

.lightbox-arrow--prev:hover { transform: translateX(-2px); }
.lightbox-arrow--next:hover { transform: translateX(2px); }

.lightbox-arrow:active {
  transform: scale(0.94);
}

.lightbox-arrow:focus-visible {
  outline: 2px solid var(--color-accent-bright);
  outline-offset: 3px;
  opacity: 1;
}

.lightbox.is-zoomed .lightbox-arrow {
  opacity: 0.3;
}

@media (hover: none) {
  .lightbox-arrow {
    display: none;
  }
}

/* ----- Previews along the bottom ----- */
.lightbox-strip {
  position: relative;
  z-index: 2;
  flex: none;
  display: flex;
  gap: 0.5rem;
  padding: 0.7rem var(--container-padding, 1.25rem) 0.9rem;
  overflow-x: auto;
  scrollbar-width: none;
}

.lightbox-strip::-webkit-scrollbar {
  display: none;
}

/* Centred while they fit, scrollable (and not cut off) when they do not */
.lightbox-strip::before,
.lightbox-strip::after {
  content: "";
  flex: none;
  margin: auto;
}

.lightbox-thumb {
  position: relative;
  flex: none;
  height: 3rem;
  padding: 0;
  border: 1px solid rgba(var(--rgb-silver), 0.2);
  border-radius: 8px;
  overflow: hidden;
  background-color: var(--color-surface);
  cursor: pointer;
  opacity: 0.55;
  transition: opacity 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s var(--spring);
}

.lightbox-thumb img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.3s ease;
  -webkit-user-drag: none;
}

.lightbox-thumb img.is-loaded {
  opacity: 1;
}

.lightbox-thumb:hover {
  opacity: 0.9;
  transform: translateY(-2px);
}

.lightbox-thumb.is-current {
  border-color: var(--color-accent-bright);
  box-shadow: 0 0 0 1px var(--color-accent-bright);
  opacity: 1;
}

/* ----- Messages and help ----- */
.lightbox-toast {
  position: absolute;
  bottom: 5.4rem;
  left: 50%;
  z-index: 4;
  margin: 0;
  padding: 0.45rem 1rem 0.5rem;
  border: 1px solid rgba(var(--rgb-blue), 0.35);
  border-radius: 999px;
  background-color: rgba(6, 10, 20, 0.9);
  color: var(--color-text);
  font-size: 0.85rem;
  font-weight: 700;
  white-space: nowrap;
  opacity: 0;
  transform: translate(-50%, 6px);
  transition: opacity 0.2s ease, transform 0.2s ease;
  pointer-events: none;
}

.lightbox-toast.is-on {
  opacity: 1;
  transform: translate(-50%, 0);
}

.lightbox-help {
  position: absolute;
  top: 3.9rem;
  right: var(--container-padding, 1.25rem);
  z-index: 5;
  width: min(20rem, calc(100% - 2rem));
  padding: 0.9rem 1rem 1rem;
  border: 1px solid rgba(var(--rgb-blue), 0.28);
  border-radius: 14px;
  background-color: rgba(8, 13, 26, 0.97);
  box-shadow: 0 24px 50px -20px rgba(0, 0, 0, 0.9);
}

.lightbox-help-title {
  margin: 0 0 0.5rem;
  color: var(--color-text);
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 700;
}

.lightbox-help-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin: 0;
  padding: 0.28rem 0;
  color: var(--color-text-muted);
  font-size: 0.85rem;
}

.lightbox-help-row kbd {
  flex: none;
  min-width: 1.6rem;
  padding: 0.05rem 0.5rem;
  border: 1px solid rgba(var(--rgb-silver), 0.3);
  border-bottom-width: 2px;
  border-radius: 6px;
  background-color: rgba(var(--rgb-silver), 0.08);
  color: var(--color-text);
  font: inherit;
  font-size: 0.78rem;
  font-weight: 700;
  text-align: center;
}

.lightbox-help-note {
  margin: 0.6rem 0 0;
  padding-top: 0.6rem;
  border-top: 1px solid rgba(var(--rgb-silver), 0.14);
  color: var(--color-text-muted);
  font-size: 0.8rem;
}

@media (max-width: 639px) {
  .lightbox-bar {
    padding-block: 0.55rem;
  }

  .lightbox-icon {
    width: 2.25rem;
    height: 2.25rem;
  }

  .lightbox-tools {
    gap: 0.3rem;
  }

  /* The small screen keeps the essentials: slideshow, download, link, close */
  .lb-hide-sm {
    display: none;
  }

  .lightbox-thumb {
    height: 2.4rem;
    border-radius: 6px;
  }

  .lightbox-strip {
    padding-bottom: 0.7rem;
  }

  .lightbox-toast {
    bottom: 4.4rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .lightbox-pan,
  .lightbox-image,
  .lightbox-icon,
  .lightbox-arrow,
  .lightbox-thumb,
  .lightbox-ambient {
    transition: none;
  }

  .lightbox-icon:hover,
  .lightbox-close:hover,
  .lightbox-arrow:hover,
  .lightbox-thumb:hover {
    transform: none;
  }
}

/* ----- Product cards + shared page styles (pricing.html) ----- */
.services {
  padding: var(--space-3) 0 var(--space-5);
}

.services-lead,
.estimate-lead {
  max-width: 25rem;
  color: var(--color-text-muted);
  font-size: 1rem;
}

@media (min-width: 760px) {
  .services-lead,
  .estimate-lead {
    margin-left: auto;
  }
}

/* Mobile first: one column. Every card has its own corners, so the five
   services do not read as one card repeated. */
.service-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-2);
}

.service-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
  isolation: isolate;
  border: 1px solid rgba(var(--rgb-blue), 0.18);
  border-radius: 14px;
  background-color: var(--color-surface);
  box-shadow: 0 24px 50px -30px rgba(0, 0, 0, 0.9);
  transition: transform 0.3s var(--spring), border-color 0.25s ease, box-shadow 0.3s ease;
}

.service-gfx       { border-radius: 22px; }
.service-thumbnail { border-radius: 12px; }
.service-logo      { border-radius: 28px; }
.service-ui        { border-radius: 10px; }

/* The "something else" card is dashed, like a sketch outline */
.service-custom {
  border: 1px dashed rgba(var(--rgb-silver), 0.34);
  border-radius: 20px 6px 20px 6px;
}

/* Reuses the placeholder + image styles from Featured Work (.work-placeholder, .work-image) */
.service-art {
  position: relative;
  flex: none;
  overflow: hidden;
  aspect-ratio: 16 / 10;
  background-color: var(--color-surface-raised);
}

.service-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 0.45rem;
  padding: 1.2rem 1.4rem 1.4rem;
}

/* The one small orange detail on each card */
.service-num {
  color: var(--color-orange);
  font-family: var(--font-display);
  font-size: 0.85rem;
  font-weight: 800;
  letter-spacing: 0.04em;
}

.service-name {
  color: var(--color-text);
  font-family: var(--font-display);
  font-size: 1.55rem;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.035em;
}

.service-text {
  color: var(--color-text-muted);
  font-size: 0.97rem;
}

.service-link {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: 0.4rem;
  margin-top: auto;
  padding-top: 0.6rem;
  color: var(--color-accent-bright);
  font-size: 0.95rem;
  font-weight: 700;
  transition: color var(--transition);
}

.service-link svg {
  transition: transform 0.25s var(--spring);
}

.service-link:hover,
.service-link:focus-visible {
  color: var(--color-orange-bright);
}

.service-link:hover svg,
.service-link:focus-visible svg {
  transform: translateX(3px);
}

@media (hover: hover) {
  .service-card:hover {
    border-color: rgba(var(--rgb-blue), 0.5);
    box-shadow: 0 30px 56px -30px rgba(0, 0, 0, 0.95);
    transform: translateY(-4px);
  }

  .service-card:hover .work-image {
    transform: scale(1.04);
  }
}

@media (min-width: 640px) {
  .service-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-3);
  }

  .service-gfx {
    grid-column: 1 / -1;
  }

  .service-gfx .service-art {
    aspect-ratio: 21 / 9;
  }
}

/* Desktop: a wide GFX card and a 16:9 thumbnail card on top, three smaller ones below */
@media (min-width: 960px) {
  .service-grid {
    grid-template-columns: repeat(12, 1fr);
  }

  .service-gfx       { grid-column: 1 / 8; }
  .service-thumbnail { grid-column: 8 / 13; }
  .service-logo      { grid-column: 1 / 5; }
  .service-ui        { grid-column: 5 / 9; }
  .service-custom    { grid-column: 9 / 13; }

  .service-gfx .service-art,
  .service-thumbnail .service-art {
    aspect-ratio: 16 / 9;
  }

  .service-logo .service-art,
  .service-ui .service-art,
  .service-custom .service-art {
    aspect-ratio: 4 / 3;
  }
}

/* ----- Commission process: five tilted numbered steps ----- */
.process {
  padding: var(--space-4) 0 var(--space-5);
}

.process-steps {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
}

.process-step {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: var(--space-2);
  align-items: start;
}

.process-num {
  display: flex;
  grid-row: 1 / 3;
  align-items: center;
  justify-content: center;
  width: 2.9rem;
  height: 2.9rem;
  border: 1px solid rgba(var(--rgb-blue), 0.4);
  border-radius: 12px;
  background-color: rgba(var(--rgb-blue), 0.12);
  color: var(--color-accent-bright);
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 800;
  transform: rotate(-4deg);
}

.process-step:nth-child(even) .process-num {
  border-radius: 18px 8px 18px 8px;
  transform: rotate(3deg);
}

/* The last step (the finished design) is the one orange block */
.process-step:last-child .process-num {
  border-color: var(--color-orange);
  background-color: var(--color-orange);
  color: var(--color-orange-ink);
}

.process-title {
  color: var(--color-text);
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.025em;
}

.process-text {
  margin-top: 0.3rem;
  color: var(--color-text-muted);
  font-size: 0.95rem;
}

@media (min-width: 960px) {
  .process-steps {
    grid-template-columns: repeat(5, 1fr);
    gap: var(--space-3);
  }

  .process-step {
    display: block;
  }

  .process-num {
    margin-bottom: var(--space-2);
  }

  /* Every second step sits a little lower, so the row is not a straight line */
  .process-step:nth-child(even) {
    margin-top: 1.5rem;
  }
}

/* ----- Estimate calculator ----- */
.estimate {
  padding: var(--space-4) 0 var(--space-5);
}

.calc {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
  padding: var(--space-3);
  border: 1px solid rgba(var(--rgb-blue), 0.18);
  border-radius: 22px;
  background-color: var(--color-surface);
  box-shadow: 0 24px 50px -30px rgba(0, 0, 0, 0.9);
}

.calc-controls {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.calc-label {
  display: block;
  margin-bottom: 0.7rem;
  color: var(--color-text);
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.calc-qty {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.calc-step,
.calc-qty-input {
  height: 2.75rem;
  border: 1px solid rgba(var(--rgb-silver), 0.28);
  border-radius: 12px;
  color: var(--color-text);
  font: inherit;
  font-weight: 700;
}

.calc-step {
  width: 2.75rem;
  background-color: rgba(var(--rgb-silver), 0.06);
  font-size: 1.3rem;
  line-height: 1;
  cursor: pointer;
  transition: transform 0.25s var(--spring), background-color 0.2s ease, border-color 0.2s ease;
}

.calc-step:hover:not(:disabled) {
  border-color: var(--color-accent-bright);
  background-color: rgba(var(--rgb-blue), 0.12);
  transform: translateY(-2px);
}

.calc-step:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.calc-qty-input {
  width: 4.5rem;
  background-color: rgba(6, 10, 20, 0.6);
  font-size: 1.1rem;
  text-align: center;
  -moz-appearance: textfield;
  appearance: textfield;
}

.calc-qty-input::-webkit-outer-spin-button,
.calc-qty-input::-webkit-inner-spin-button {
  margin: 0;
  -webkit-appearance: none;
}

/* The result looks like a hand-written price tag: dashed outline, a tiny tilt */
.calc-result {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.4rem;
  padding: var(--space-3);
  border: 2px dashed rgba(var(--rgb-silver), 0.24);
  border-radius: 16px;
  background-color: rgba(6, 10, 20, 0.45);
}

.calc-result-label {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  color: var(--color-accent-bright);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.calc-result-label::before {
  content: "";
  flex: none;
  width: 0.5em;
  height: 0.5em;
  border-radius: 0.1em;
  background-color: var(--color-orange);
  transform: rotate(12deg);
}

.calc-total {
  color: var(--color-text);
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 5vw, 3.2rem);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.04em;
}

.calc-total.is-unset {
  color: var(--color-silver);
  font-size: clamp(1.5rem, 3.4vw, 2rem);
  letter-spacing: -0.03em;
}

.calc-breakdown {
  color: var(--color-text-muted);
  font-size: 0.95rem;
}

.calc-note {
  margin: 0.4rem 0 0.8rem;
  color: var(--color-text-muted);
  font-size: 0.85rem;
}

@media (min-width: 860px) {
  .calc {
    grid-template-columns: 1.25fr 1fr;
    align-items: stretch;
    padding: var(--space-4);
  }
}

/* ----- Pricing page: product cards, payments, calculator Robux line ----- */
.page-actions {
  margin-top: var(--space-4);
}

.pricing {
  padding: var(--space-3) 0 var(--space-4);
}

/* Mobile first: one column. Every card has its own corners, like the old
   service cards, so the products do not read as one card repeated. */
.price-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-2);
}

.price-renders    { border-radius: 22px; }
.price-profile    { border-radius: 12px; }
.price-thumbnails { border-radius: 28px; }
.price-ytthumbs   { border-radius: 14px 26px 14px 26px; }
.price-icons      { border-radius: 10px; }
.price-ads        { border-radius: 18px; }
.price-banners    { border-radius: 8px 22px 8px 22px; }
.price-sheets     { border-radius: 20px 6px 20px 6px; }

.price-tag {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.2rem 0.8rem;
  margin-top: 0.1rem;
}

.price-usd {
  color: var(--color-text);
  font-family: var(--font-display);
  font-size: 2.3rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.04em;
}

.price-usd.is-unset {
  color: var(--color-silver);
  font-size: 1.25rem;
  letter-spacing: -0.02em;
}

.price-robux {
  display: inline-flex;
  align-items: center;
  gap: 0.3em;
  color: var(--color-orange);
  font-size: 1rem;
  font-weight: 700;
}

/* The Robux icon takes the colour of the text next to it */
.robux-icon {
  flex: none;
  width: 1.5em;
  height: 1.5em;
  object-fit: contain;
}

.price-note {
  align-self: flex-start;
  white-space: normal;
}

/* No orange shape in front of the bulk-discount note */
.price-note::before {
  display: none;
}

.price-note[hidden] {
  display: none;
}

.price-custom {
  max-width: 40rem;
  margin-top: var(--space-4);
  padding-top: var(--space-3);
  border-top: 2px dashed rgba(var(--rgb-silver), 0.2);
  color: var(--color-text-muted);
  font-size: 1rem;
}

@media (min-width: 640px) and (max-width: 999px) {
  .price-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .price-card:last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }
}

/* Desktop: four cards per row */
@media (min-width: 1000px) {
  .price-grid {
    grid-template-columns: repeat(12, 1fr);
  }

  .price-card {
    grid-column: span 3;
  }
}

/* Payment methods: your own render (overlapping the panel) + four tilting look-alike cards */
.payments {
  padding: var(--space-3) 0 var(--space-4);
}

.payments[hidden] {
  display: none;
}

.payments-panel {
  --render-overlap: 1rem;   /* how far the render sticks out past the left edge of the panel */
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
  align-items: center;
  padding: var(--space-3);
  border: 1px solid rgba(var(--rgb-blue), 0.18);
  border-radius: 22px;
  background:
    radial-gradient(ellipse 60% 90% at 0% 50%, rgba(var(--rgb-blue), 0.1), transparent 70%),
    var(--color-surface);
  box-shadow: 0 24px 50px -30px rgba(0, 0, 0, 0.9);
}

/* Your render goes here: images/payment-render-01.png (transparent PNG works best;
   webp / jpg also work). It sticks out past the edge of the panel. */
.payments-render {
  position: relative;
  z-index: 2;
  width: min(100%, 15rem);
  aspect-ratio: 1 / 1;
  margin: calc(var(--space-3) * -1 - 1.5rem) auto 0;
  pointer-events: none;
}

.payments-render .work-placeholder {
  border-radius: 18px;
  padding-bottom: 0;
}

.payments-render .work-placeholder-label {
  font-size: 1.05rem;
}

.payments-render .work-placeholder-path {
  max-width: 90%;
  overflow-wrap: anywhere;
}

.payments-render .work-image {
  object-fit: contain;
  filter: drop-shadow(0 18px 26px rgba(0, 0, 0, 0.55));
}

/* Once the render loads, the placeholder steps aside (a transparent PNG would show it through) */
.payments-render.has-render .work-placeholder {
  display: none;
}

.payments-title {
  color: var(--color-text);
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 3.6vw, 2.2rem);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.035em;
}

.payments-lead {
  margin-top: 0.4rem;
  color: var(--color-text-muted);
  font-size: 1rem;
}

.pay-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.1rem 1rem;
  margin: var(--space-3) 0 0;
  padding: 0;
  list-style: none;
}

.pay-card {
  min-width: 0;
}

/* The stage is flat and never moves: it catches the mouse and gives the face a perspective.
   (script.js sets --rx / --ry / --mx / --my on it while the mouse moves over the card.) */
.pay-card-stage {
  --rx: 0deg;
  --ry: 0deg;
  --lift: 0px;
  position: relative;
  aspect-ratio: 1.586 / 1;
  perspective: 1100px;
  container-type: inline-size;
}

/* The face is the card itself: simple colours, a mark, a glare. It does the tilting. */
.pay-card-face {
  --c1: #1d2f52;
  --c2: #0e1a33;
  position: absolute;
  inset: 0;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 12px;
  background: linear-gradient(140deg, var(--c1), var(--c2));
  box-shadow: 0 14px 26px -18px rgba(0, 0, 0, 0.9);
  transform: rotateX(var(--rx)) rotateY(var(--ry)) translateZ(var(--lift));
  transform-style: preserve-3d;
  transition: transform 0.5s var(--spring), box-shadow 0.3s ease, border-color 0.25s ease;
  will-change: transform;
}

.pay-card-stage.is-tilting .pay-card-face {
  --lift: 6px;
  border-color: rgba(var(--rgb-blue), 0.6);
  box-shadow: 0 24px 34px -20px rgba(0, 0, 0, 0.95), 0 0 26px -12px var(--color-accent-glow);
  transition: transform 0.18s ease-out, box-shadow 0.3s ease, border-color 0.25s ease;
}

/* Clipped layer for the simple decoration (sheen, chip, barcode) */
.pay-card-bg {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: inherit;
  background: radial-gradient(ellipse 80% 70% at 15% 0%, rgba(255, 255, 255, 0.18), transparent 60%);
  pointer-events: none;
}

.pay-card-mark {
  position: absolute;
  top: 12%;
  left: 8%;
  display: flex;
  align-items: center;
  gap: 0.35em;
  color: #fff;
  font-family: var(--font-display);
  line-height: 1;
  transition: transform 0.3s var(--spring);
}

.pay-card-stage.is-tilting .pay-card-mark {
  transform: translateZ(12px);
}

.pay-card-mark svg {
  width: 2rem;
  height: 2rem;
  color: var(--color-accent-bright);
}

/* Robux: dark card, the Robux icon in the middle */
.pay-card--robux .pay-card-face { --c1: #343a48; --c2: #14171f; }
.pay-card--robux .pay-card-mark {
  inset: 0;
  align-items: center;
  justify-content: center;
}
.pay-card--robux .robux-icon {
  width: 4.5rem;
  height: 4.5rem;
  width: 52cqw;
  height: 52cqw;
  filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.5));
}

/* PayPal: blue card, two-tone wordmark, a little chip */
.pay-card--paypal .pay-card-face { --c1: #0a46a8; --c2: #022a6b; }
.pay-card--paypal .pay-card-mark {
  gap: 0;
  font-size: 1.5rem;
  font-size: 16cqw;
  font-style: italic;
  font-weight: 800;
  letter-spacing: -0.03em;
}
.pay-card--paypal .pp-pay { color: #fff; }
.pay-card--paypal .pp-pal { color: #5fc3ff; }
.pay-card--paypal .pay-card-bg::before {
  content: "";
  position: absolute;
  left: 8%;
  bottom: 14%;
  width: 16%;
  aspect-ratio: 1.3 / 1;
  border-radius: 3px;
  background: linear-gradient(135deg, #f4d97c, #c2962f);
}

/* Roblox gift card: red card, heavy wordmark, a fake barcode */
.pay-card--roblox .pay-card-face { --c1: #ee3b32; --c2: #8c0f10; }
.pay-card--roblox .pay-card-mark {
  font-size: 1.4rem;
  font-size: 15cqw;
  font-weight: 800;
  letter-spacing: -0.02em;
  transform: rotate(-5deg);
  transform-origin: left center;
}
.pay-card--roblox.is-tilting .pay-card-mark {
  transform: rotate(-5deg) translateZ(12px);
}

/* Steam gift card: dark blue card, ring + wordmark, a fake barcode */
.pay-card--steam .pay-card-face { --c1: #2a475e; --c2: #101a26; }
.pay-card--steam .pay-card-mark {
  gap: 0.45em;
  font-size: 1.1rem;
  font-size: 11cqw;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: #c7d5e0;
}
.pay-card--steam .st-ring {
  flex: none;
  width: 1.5em;
  height: 1.5em;
  border: 0.22em solid #c7d5e0;
  border-radius: 50%;
  background: radial-gradient(circle at 62% 38%, #c7d5e0 0 0.2em, transparent 0.22em);
}

.pay-card--roblox .pay-card-bg::after,
.pay-card--steam .pay-card-bg::after,
.pay-card--gift .pay-card-bg::after {
  content: "";
  position: absolute;
  right: 8%;
  bottom: 12%;
  width: 40%;
  height: 16%;
  border-radius: 2px;
  opacity: 0.55;
  background: repeating-linear-gradient(90deg, #fff 0 2px, transparent 2px 4px, #fff 4px 5px, transparent 5px 8px);
}

/* Cards that show an image (PayPal / Roblox / Steam): the image fills the card, centred */
.pay-card-stage .pay-card-mark.has-image {
  inset: 0;
  justify-content: center;
  padding: 8%;
  transform: none;
}

.pay-card-stage.is-tilting .pay-card-mark.has-image {
  transform: translateZ(12px);
}

.pay-card-mark .pay-mark-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* No chip or barcode behind an image */
.pay-card-stage.has-art .pay-card-bg::before,
.pay-card-stage.has-art .pay-card-bg::after {
  display: none;
}

/* Plain fallback cards */
.pay-card--card .pay-card-face,
.pay-card--gift .pay-card-face { --c1: #24407a; --c2: #0f1d3b; }

.pay-card-glare {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(circle at var(--mx, 50%) var(--my, 50%), rgba(255, 255, 255, 0.22), transparent 58%);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.pay-card-stage.is-tilting .pay-card-glare {
  opacity: 1;
}

.pay-card-caption {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 0.5rem;
  margin: 0.65rem 0.15rem 0;
}

.pay-card-name {
  color: var(--color-text);
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.015em;
}

.pay-card-detail {
  color: var(--color-text-muted);
  font-size: 0.85rem;
  font-weight: 600;
}

@media (min-width: 820px) {
  .payments-panel {
    grid-template-columns: 15rem 1fr;
    gap: var(--space-4);
    padding: var(--space-4);
  }

  /* The render is wider than its column and taller than the panel, so it
     sticks out over the left, top and bottom edge a little. */
  .payments-render {
    width: calc(100% + var(--space-4) + var(--render-overlap));
    max-width: none;
    height: 21rem;
    aspect-ratio: auto;
    align-self: center;
    margin: -2.25rem 0 -2.25rem calc((var(--space-4) + var(--render-overlap)) * -1);
  }
}

/* Wide screens: the four cards sit in one row */
@media (min-width: 1000px) {
  .pay-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1rem 0.85rem;
  }

  .pay-card-caption {
    flex-direction: column;
    gap: 0.1rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pay-card-face,
  .pay-card-stage.is-tilting .pay-card-face {
    transform: none;
  }
}

/* The estimate has no little orange shapes (chips + "Estimated total") */
.calc .filter-chip::before,
.calc-result-label::before {
  display: none;
}

/* Robux total under the dollar total in the calculator */
.calc-robux {
  display: flex;
  align-items: center;
  gap: 0.3em;
  color: var(--color-orange);
  font-size: 1.1rem;
  font-weight: 700;
}

.calc-robux:empty {
  display: none;
}

/* ----- Footer -----
   Deep blue-black, lit from the top edge. The glow layer reaches up into
   the page above so there is no visible seam. */
.site-footer {
  position: relative;
  isolation: isolate;
  margin-top: var(--space-5);
  padding: var(--space-6) 0 var(--space-3);
  overflow-x: clip;
  background:
    linear-gradient(180deg, rgba(2, 4, 9, 0) 0, rgba(2, 4, 9, 0.94) 4rem, #02040a 100%);
}

/* Electric-blue light rising from the top edge */
.footer-glow {
  position: absolute;
  z-index: -1;
  top: -7rem;
  left: 50%;
  width: min(1400px, 150%);
  height: 20rem;
  transform: translateX(-50%);
  pointer-events: none;
  background:
    radial-gradient(ellipse 46% 42% at 50% 62%, rgba(var(--rgb-blue), 0.07), transparent 72%),
    radial-gradient(ellipse 80% 30% at 50% 70%, rgba(37, 118, 242, 0.035), transparent 75%),
    radial-gradient(ellipse 22% 26% at 88% 78%, rgba(var(--rgb-orange), 0.02), transparent 75%);
  animation: footer-breathe 9s ease-in-out infinite;
}

/* Understated decorative curve with a fine edge-lit rim */
.footer-curve {
  position: absolute;
  z-index: -1;
  top: 0;
  left: 50%;
  width: 160%;
  max-width: 2200px;
  height: 14rem;
  transform: translateX(-50%);
  border-radius: 50% 50% 0 0 / 100% 100% 0 0;
  border-top: 1px solid rgba(var(--rgb-blue), 0.16);
  pointer-events: none;
  -webkit-mask-image: linear-gradient(180deg, #000, transparent 80%);
          mask-image: linear-gradient(180deg, #000, transparent 80%);
  background: radial-gradient(ellipse 50% 100% at 50% 0%, rgba(var(--rgb-blue), 0.03), transparent 70%);
}

@keyframes footer-breathe {
  0%, 100% { opacity: 0.85; }
  50% { opacity: 1; }
}

.footer-inner {
  display: block;
}

.footer-top {
  display: grid;
  gap: var(--space-5);
}

.footer-intro {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-2);
  max-width: 26rem;
}

.footer-brand {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--color-text);
}

.footer-logo {
  display: block;
  width: auto;
  height: 2.4rem;
}

.footer-tagline {
  color: var(--color-silver);
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: -0.015em;
  text-wrap: balance;
}

/* Commission Me: the existing button with a soft blue halo */
.footer-cta {
  gap: 0.6rem;
  margin-top: var(--space-1);
  box-shadow:
    0 0 0 1px rgba(var(--rgb-blue), 0.35),
    0 8px 28px -8px rgba(37, 118, 242, 0.75),
    0 0 36px -6px rgba(var(--rgb-blue), 0.38);
}

.footer-cta svg {
  transition: transform 0.18s var(--spring);
}

.footer-cta:hover,
.footer-cta:focus-visible {
  box-shadow:
    0 0 0 1px rgba(var(--rgb-blue), 0.6),
    0 14px 34px -8px rgba(37, 118, 242, 0.9),
    0 0 48px -4px rgba(var(--rgb-blue), 0.55);
}

.footer-cta:hover svg,
.footer-cta:focus-visible svg {
  transform: translateX(3px);
}

.footer-nav {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4) var(--space-3);
}

.footer-heading {
  margin: 0 0 var(--space-2);
  color: var(--color-text);
  font-family: var(--font-display);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.footer-group ul:not(.footer-socials) {
  display: grid;
  gap: 0.2rem;
}

.footer-group a:not(.footer-social) {
  position: relative;
  display: inline-block;
  padding: 0.2rem 0;
  color: var(--color-text-muted);
  font-size: 0.97rem;
  white-space: nowrap;
  transition: color var(--transition), transform 0.18s ease;
}

.footer-group a:not(.footer-social):hover,
.footer-group a:not(.footer-social):focus-visible {
  color: #fff;
  transform: translateX(3px);
}

.footer-socials {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: var(--space-2);
}

.footer-social {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border: 1px solid rgba(var(--rgb-silver), 0.16);
  border-radius: 10px;
  background-color: rgba(var(--rgb-silver), 0.04);
  color: var(--color-text-muted);
  transition: color var(--transition), background-color var(--transition),
              border-color var(--transition), box-shadow 0.18s ease,
              transform 0.18s var(--spring);
}

.footer-social svg {
  display: block;
  width: 1.1rem;
  height: 1.1rem;
}

.footer-social:hover,
.footer-social:focus-visible {
  border-color: rgba(var(--rgb-blue), 0.55);
  background-color: rgba(var(--rgb-blue), 0.12);
  color: #fff;
  box-shadow: 0 0 18px -2px rgba(var(--rgb-blue), 0.55);
  transform: translateY(-3px);
}

.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-1) var(--space-3);
  margin-top: var(--space-5);
  padding-top: var(--space-3);
  border-top: 1px solid transparent;
  border-image: linear-gradient(90deg, rgba(var(--rgb-silver), 0.22), rgba(var(--rgb-silver), 0.06) 70%, transparent) 1;
}

.footer-copy,
.footer-top-link {
  color: var(--color-text-muted);
  font-size: 0.82rem;
}

.footer-top-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  transition: color var(--transition);
}

.footer-top-link svg {
  transition: transform 0.18s ease;
}

.footer-top-link:hover,
.footer-top-link:focus-visible {
  color: var(--color-orange-bright);
}

.footer-top-link:hover svg,
.footer-top-link:focus-visible svg {
  transform: translateY(-2px);
}

@media (min-width: 760px) {
  .footer-top {
    grid-template-columns: minmax(0, 1.5fr) minmax(0, 1.2fr);
    align-items: start;
    gap: var(--space-6);
  }

  .footer-nav {
    gap: var(--space-4);
  }

  .footer-socials {
    flex-wrap: nowrap;
  }
}

@media (min-width: 1000px) {
  .footer-top {
    grid-template-columns: minmax(0, 1fr) auto;
    padding-left: 0;
  }

  .footer-nav {
    grid-template-columns: auto auto auto;
    justify-content: start;
    column-gap: var(--space-4);
    justify-items: start;
    padding-left: var(--space-4);
    border-left: 1px solid rgba(var(--rgb-silver), 0.10);
  }
}

@media (max-width: 639px) {
  .site-footer {
    padding-top: var(--space-5);
  }

  .footer-cta {
    width: 100%;
  }

  .footer-intro {
    max-width: none;
  }

  .footer-nav {
    padding-top: var(--space-3);
    border-top: 1px solid rgba(var(--rgb-silver), 0.10);
  }

  .footer-group:last-child {
    grid-column: 1 / -1;
  }

  .footer-socials {
    gap: 0.6rem;
  }

  .footer-social {
    flex: 1 1 0;
    max-width: 3.4rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .footer-glow {
    animation: none;
  }

  .footer-cta,
  .footer-cta svg,
  .footer-social,
  .footer-group a,
  .footer-top-link svg {
    transition: none;
  }

  .footer-cta:hover svg,
  .footer-cta:focus-visible svg,
  .footer-social:hover,
  .footer-social:focus-visible,
  .footer-group a:hover,
  .footer-group a:focus-visible,
  .footer-top-link:hover svg,
  .footer-top-link:focus-visible svg {
    transform: none;
  }
}

@media (min-width: 640px) {
  .review-track > .review-card {
    flex-basis: calc((100% - var(--space-3)) / 2);
  }

  .review-grid {
    columns: 2;
  }
}

@media (min-width: 1000px) {
  .review-track > .review-card {
    flex-basis: calc((100% - 2 * var(--space-3)) / 3);
  }
}

@media (min-width: 1080px) {
  .review-grid {
    columns: 3;
  }
}

@media (max-width: 639px) {
  .section {
    padding: var(--space-4) 0 var(--space-5);
  }

  .page-hero {
    padding: var(--space-5) 0 var(--space-3);
  }

  .section-head .button,
  .cta-panel .button {
    width: 100%;
  }

  .review-body {
    padding: 1.2rem 1.2rem 1.3rem;
  }
}

/* ==========================================================
   8. LARGER SCREENS
   ========================================================== */
@media (min-width: 640px) {
  :root {
    --container-padding: 2rem;
  }
}

@media (min-width: 960px) {
  :root {
    --container-padding: 2.5rem;
  }
}

/* ==========================================================
   9. ACCESSIBILITY
   ========================================================== */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }
}

/* ----- Average rating (top of reviews.html) ----- */
.rating-summary {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-3);
  padding: 0.85rem 1.3rem 0.85rem 1.1rem;
  border: 1px solid rgba(var(--rgb-blue), 0.25);
  border-radius: var(--radius-card);
  background-color: rgba(var(--rgb-silver), 0.05);
}

.rating-score {
  color: var(--color-text);
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 7vw, 3.2rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.04em;
}

.rating-stars {
  position: relative;
  display: inline-block;
  line-height: 0;
}

.rating-stars-base,
.rating-stars-fill {
  display: flex;
  white-space: nowrap;
}

.rating-stars-fill {
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
}

.rating-star {
  flex: none;
  width: 22px;
  height: 22px;
  fill: rgba(150, 190, 255, 0.2);
}

.rating-stars-fill .rating-star {
  fill: var(--color-orange);
}

.rating-count {
  margin-top: 0.3rem;
  color: var(--color-text-muted);
  font-size: 0.9rem;
}
/* YouTuber badge (next to the verified badge) */
.review-youtuber {
  position: relative;
  flex: none;
  display: inline-flex;
  width: 1.2rem;
  height: 1.2rem;
}

.review-youtuber svg {
  display: block;
  width: 100%;
  height: 100%;
}

.review-youtuber-bg { fill: #ff2e2e; }
.review-youtuber-play { fill: #fff; }

@media (hover: hover) {
  .review-youtuber::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: calc(100% + 0.45rem);
    left: 50%;
    z-index: 5;
    padding: 0.2rem 0.6rem;
    border-radius: 6px;
    background-color: var(--color-orange);
    color: var(--color-orange-ink);
    font-family: var(--font-main);
    font-size: 0.75rem;
    font-weight: 700;
    white-space: nowrap;
    opacity: 0;
    transform: translate(-50%, 4px);
    pointer-events: none;
    transition: opacity 0.12s ease, transform 0.2s var(--spring);
  }

  .review-youtuber:hover::after {
    opacity: 1;
    transform: translate(-50%, 0);
  }
}

/* Keep the YouTuber badge tight against the verified badge */
.review-name .review-verified + .review-youtuber {
  margin-left: -0.15rem;
}

/* ----- Reviews page: featured strip, leave-a-review row, filters ----- */
.review-section-title {
  margin: 0 0 var(--space-3);
  font-family: var(--font-display, var(--font-main));
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.review-featured {
  margin-bottom: var(--space-4);
}

.review-featured[hidden],
.review-filters[hidden],
.review-filter-status[hidden] {
  display: none;
}

.review-featured-grid {
  display: grid;
  gap: var(--space-3);
  grid-template-columns: 1fr;
  align-items: start;
}

.review-featured-grid .review-card {
  display: block;
  height: auto;
  width: 100%;
}

@media (min-width: 640px) {
  .review-featured-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1080px) {
  .review-featured-grid { grid-template-columns: repeat(3, 1fr); }
}

.review-leave {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2, 1rem) var(--space-3);
  margin: 0 0 var(--space-4);
  padding: 1.1rem 0;
  border-top: 1px dashed var(--color-border);
  border-bottom: 1px dashed var(--color-border);
}

.review-leave-title {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 700;
}

.review-leave-text {
  margin: 0.15rem 0 0;
  color: var(--color-text-muted);
}

.review-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0 0 var(--space-3);
}

.review-filter {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.45rem 0.95rem;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  background-color: var(--color-surface);
  color: var(--color-text-muted);
  font-family: var(--font-main);
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.18s var(--spring);
}

.review-filter:hover:not(:disabled) {
  color: var(--color-text);
  border-color: var(--color-accent);
}

.review-filter:active:not(:disabled) {
  transform: scale(0.97);
}

.review-filter:focus-visible {
  outline: 2px solid var(--color-accent-bright);
  outline-offset: 2px;
}

.review-filter.is-active {
  background-color: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-accent-dark-text);
}

.review-filter:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.review-filter-count {
  font-size: 0.8rem;
  opacity: 0.75;
}

.review-filter-status {
  margin: 0 0 var(--space-3);
  color: var(--color-text-muted);
  font-size: 0.9rem;
}

.review-card.is-filtered-out {
  display: none !important;
}


/* ==========================================================
   ABOUT PAGE (about.html)
   Built from the same pieces as the rest of the site: page-title,
   page-text, section-head, tag, work-footer, cta-panel and the
   portfolio cards. Only what is new lives here.
   ========================================================== */

/* ----- 1. Intro ----- */
.about-hero {
  position: relative;
  overflow-x: clip; /* the tilted outline behind the avatar must not widen the page */
  padding: calc(var(--space-6) + var(--space-3)) 0 var(--space-5);
}

.about-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 50% 80% at 15% 40%, rgba(60, 130, 255, 0.10), transparent 70%),
    radial-gradient(ellipse 40% 70% at 90% 60%, rgba(var(--rgb-violet), 0.05), transparent 70%);
  pointer-events: none;
}

.about-hero-inner {
  position: relative;
  display: grid;
  gap: var(--space-5);
  align-items: center;
  animation: fade-in 0.7s ease both;
}

/* A touch smaller than other page titles so "Behind Bcraft" and the orange block stay on one line */
.about-hero .page-title {
  font-size: clamp(2.6rem, 6.6vw, 4.6rem);
}

/* The avatar stage: a SMALL frame sits at the bottom, and the character
   stands in front of it so the head and antlers break out over the top. */
.about-avatar {
  --avatar-scale: 1.04;  /* how big the avatar image is (1 = as wide as the stage, bigger = larger) */
  --avatar-lift: 8%;     /* how far the feet float above the bottom of the frame */
  --frame-x: 15%;        /* frame inset on the left and right */
  --frame-h: 54%;        /* frame height as a share of the stage */
  position: relative;
  isolation: isolate;
  width: min(100%, 26rem);
  aspect-ratio: 4 / 5;
  margin: var(--space-3) auto var(--space-5);
}

.about-defs {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

/* Dashed ring around the character, slowly turning, with one orange bead */
.about-avatar-orbit {
  position: absolute;
  left: 4%;
  bottom: 2%;
  z-index: -1;
  width: 92%;
  aspect-ratio: 1;
  border: 1px dashed rgba(var(--rgb-silver), 0.3);
  border-radius: 50%;
}

.about-avatar-orbit::after {
  content: "";
  position: absolute;
  top: 9%;
  right: 9%;
  width: 0.7rem;
  height: 0.7rem;
  border-radius: 0.18rem;
  background-color: var(--color-orange);
  box-shadow: 0 0 14px rgba(var(--rgb-orange), 0.7);
  transform: rotate(12deg);
}

/* The frame: a small viewfinder card with grid lines, a blue floor glow and
   four corner brackets that sit just outside its edge. */
.about-avatar-panel {
  position: absolute;
  inset: auto var(--frame-x) 0;
  height: var(--frame-h);
  border: 1px solid rgba(var(--rgb-blue), 0.3);
  border-radius: 22px;
  background-color: var(--color-surface);
  background-image:
    radial-gradient(80% 60% at 50% 100%, rgba(var(--rgb-blue), 0.42), transparent 70%),
    repeating-linear-gradient(0deg, rgba(150, 190, 255, 0.05) 0 1px, transparent 1px 26px),
    repeating-linear-gradient(90deg, rgba(150, 190, 255, 0.05) 0 1px, transparent 1px 26px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 36px 60px -34px rgba(var(--rgb-blue), 0.6);
}

.about-avatar-panel::before {
  content: "";
  position: absolute;
  inset: -9px;
  pointer-events: none;
  --b: rgba(var(--rgb-blue), 0.9);
  background:
    linear-gradient(var(--b), var(--b)) top left / 22px 2px no-repeat,
    linear-gradient(var(--b), var(--b)) top left / 2px 22px no-repeat,
    linear-gradient(var(--b), var(--b)) top right / 22px 2px no-repeat,
    linear-gradient(var(--b), var(--b)) top right / 2px 22px no-repeat,
    linear-gradient(var(--b), var(--b)) bottom left / 22px 2px no-repeat,
    linear-gradient(var(--b), var(--b)) bottom left / 2px 22px no-repeat,
    linear-gradient(var(--b), var(--b)) bottom right / 22px 2px no-repeat,
    linear-gradient(var(--b), var(--b)) bottom right / 2px 22px no-repeat;
}

/* Soft shadow on the floor of the frame under the feet */
.about-avatar-panel::after {
  content: "";
  position: absolute;
  left: 22%;
  right: 22%;
  bottom: 6%;
  height: 7%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(0, 0, 0, 0.55), transparent);
}

.about-avatar .hero-sticker {
  top: calc(100% - var(--frame-h) - 0.9rem);
  right: calc(var(--frame-x) - 0.6rem);
}

.about-avatar-image {
  position: absolute;
  left: calc(50% * (1 - var(--avatar-scale)));
  bottom: var(--avatar-lift);
  z-index: 2;
  width: calc(100% * var(--avatar-scale));
  height: calc(100% * var(--avatar-scale));
  object-fit: contain;
  object-position: center bottom;
  opacity: 0;
  filter: drop-shadow(0 22px 28px rgba(0, 0, 0, 0.5));
  transition: opacity 0.6s ease;
}

.about-avatar-image.is-loaded {
  opacity: 1;
  animation: about-float 7s ease-in-out infinite;
}

/* Shown until the avatar file exists. Fills the frame. */
.about-avatar-placeholder {
  position: absolute;
  inset: auto var(--frame-x) 0;
  height: var(--frame-h);
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.2rem;
  text-align: center;
  transition: opacity 0.4s ease;
}

.about-avatar-image.is-loaded ~ .about-avatar-placeholder {
  opacity: 0;
}

@keyframes about-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-7px); }
}

/* Chat bubble: three typing dots, then "Hi!" */
.about-bubble {
  position: absolute;
  top: 30%;
  left: 12%;
  z-index: 4;
  display: grid;
  place-items: center;
  min-width: 4rem;
  height: 2.7rem;
  padding: 0 1rem;
  border-radius: 18px 18px 5px 18px;
  background-color: var(--color-text);
  color: var(--color-accent-dark-text);
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 800;
  box-shadow: 0 14px 30px -12px rgba(var(--rgb-blue), 0.7);
  transform-origin: 100% 100%;
}

.about-bubble > * {
  grid-area: 1 / 1;
}

.about-bubble-dots {
  display: none;
  gap: 0.28rem;
}

.about-bubble-dots i {
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 50%;
  background-color: var(--color-button);
}

@media (prefers-reduced-motion: no-preference) {
  .about-avatar-orbit {
    animation: about-spin 60s linear infinite;
  }

  .about-bubble {
    animation: about-bubble 7s var(--spring) 0.8s infinite both;
  }

  .about-bubble-dots {
    display: flex;
    animation: about-bubble-dots 7s linear 0.8s infinite both;
  }

  .about-bubble-dots i {
    animation: about-dot 0.9s ease-in-out infinite;
  }

  .about-bubble-dots i:nth-child(2) { animation-delay: 0.15s; }
  .about-bubble-dots i:nth-child(3) { animation-delay: 0.3s; }

  .about-bubble-hi {
    animation: about-bubble-hi 7s linear 0.8s infinite both;
  }
}

@keyframes about-spin {
  to { transform: rotate(360deg); }
}

@keyframes about-bubble {
  0%        { opacity: 0; transform: scale(0.2); }
  6%        { opacity: 1; transform: scale(1.06); }
  9%, 88%   { opacity: 1; transform: scale(1) translateY(0); }
  94%, 100% { opacity: 0; transform: scale(0.6) translateY(6px); }
}

@keyframes about-bubble-dots {
  0%, 26% { opacity: 1; }
  30%, 100% { opacity: 0; }
}

@keyframes about-bubble-hi {
  0%, 26% { opacity: 0; transform: scale(0.6); }
  34%     { opacity: 1; transform: scale(1.12); }
  40%, 100% { opacity: 1; transform: scale(1); }
}

@keyframes about-dot {
  0%, 100% { transform: translateY(0); opacity: 0.45; }
  50%      { transform: translateY(-4px); opacity: 1; }
}

/* Name plate under the frame, with the badges (same look as the review badges) */
.about-nameplate {
  position: absolute;
  left: 50%;
  bottom: -1.5rem;
  z-index: 5;
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.5rem 0.95rem;
  border: 1px solid rgba(var(--rgb-blue), 0.35);
  border-radius: 999px;
  background-color: rgba(6, 10, 20, 0.88);
  box-shadow: 0 16px 34px -16px rgba(0, 0, 0, 0.9);
  white-space: nowrap;
  transform: translateX(-50%);
}

.about-name {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.about-badges {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding-left: 0.7rem;
  border-left: 1px solid rgba(var(--rgb-silver), 0.2);
}

.about-badge {
  --badge: var(--color-accent);
  --badge-ink: #fff;
  position: relative;
  flex: none;
  display: inline-flex;
  width: 1.35rem;
  height: 1.35rem;
  border-radius: 50%;
  cursor: default;
  outline: none;
  transition: transform 0.25s var(--spring);
}

.about-badge svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.about-badge-fill {
  fill: var(--badge);
}

.about-badge-glyph {
  fill: none;
  stroke: var(--badge-ink);
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.about-badge-verified .about-badge-glyph {
  stroke-width: 2.1;
}

.about-badge-dot {
  fill: var(--badge-ink);
}

.about-badge-verified {
  filter: drop-shadow(0 0 6px var(--color-accent-glow));
}

.about-badge-youtube {
  --badge: #ff2e2e;
}

.about-badge-gfx {
  --badge: var(--color-orange);
  --badge-ink: var(--color-orange-ink);
}

.about-badge-ui {
  --badge: var(--color-accent-bright);
  --badge-ink: var(--color-accent-dark-text);
}

.about-badge-roblox {
  --badge: var(--color-silver);
  --badge-ink: var(--color-surface);
}

/* Orange hover note, same as the review badges. Also shows on keyboard focus / tap. */
.about-badge::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + 0.5rem);
  left: 50%;
  z-index: 6;
  padding: 0.2rem 0.6rem;
  border-radius: 6px;
  background-color: var(--color-orange);
  color: var(--color-orange-ink);
  font-family: var(--font-main);
  font-size: 0.75rem;
  font-weight: 700;
  white-space: nowrap;
  opacity: 0;
  transform: translate(-50%, 4px);
  pointer-events: none;
  transition: opacity 0.12s ease, transform 0.2s var(--spring);
}

.about-badge:focus-visible::after {
  opacity: 1;
  transform: translate(-50%, 0);
}

/* Touch screens have no hover, so a tap shows the note until you tap elsewhere */
@media (hover: none) {
  .about-badge:focus::after {
    opacity: 1;
    transform: translate(-50%, 0);
  }
}

@media (hover: hover) {
  .about-badge:hover {
    transform: translateY(-2px) scale(1.12);
  }

  .about-badge:hover::after {
    opacity: 1;
    transform: translate(-50%, 0);
  }
}

.about-badge:focus-visible {
  box-shadow: 0 0 0 2px var(--color-bg), 0 0 0 4px var(--color-accent);
}

/* Hero: a bigger intro line and small role chips (replaces the two buttons) */
.about-hero .page-text {
  max-width: 36rem;
  font-size: clamp(1.1rem, 1.5vw, 1.25rem);
}

.about-roles {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: var(--space-4) 0 0;
  padding: 0;
  list-style: none;
}

.about-roles li {
  padding: 0.4rem 0.95rem;
  border: 1px solid rgba(var(--rgb-silver), 0.22);
  border-radius: 999px;
  background-color: rgba(var(--rgb-silver), 0.06);
  color: var(--color-silver);
  font-size: 0.9rem;
  font-weight: 600;
}

/* Stats strip inside the hero: left-aligned under the chips */
.about-hero .stats-strip {
  justify-content: flex-start;
  margin-top: var(--space-3);
  padding: var(--space-2) 0 0;
  border-bottom: 0;
}

.about-roles li:first-child {
  border-color: rgba(var(--rgb-blue), 0.45);
  background-color: rgba(var(--rgb-blue), 0.1);
  color: var(--color-accent-bright);
}

@media (max-width: 479px) {
  .about-nameplate {
    gap: 0.5rem;
    padding: 0.45rem 0.75rem;
  }

  .about-badges {
    gap: 0.3rem;
    padding-left: 0.5rem;
  }
}

@media (min-width: 900px) {
  .about-hero-inner {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
    gap: var(--space-6);
  }

  .about-avatar {
    margin: 0 0 var(--space-5) auto;
  }
}

/* Short line next to a section title (same idea as .work-lead) */
.about-section-lead {
  max-width: 25rem;
  color: var(--color-text-muted);
  font-size: 1rem;
}

@media (min-width: 760px) {
  .about-section-lead {
    margin-left: auto;
  }
}

/* ----- 2. My Journey -----
   A horizontal path, like a level select. Each stop is a tilted badge on one
   line that runs from blue to orange, ending on "Now". Phones: swipe sideways. */
.journey {
  --journey-gap: var(--space-4);
  --node: 4.6rem;
  display: flex;
  gap: var(--journey-gap);
  margin: 0;
  padding: 0.6rem 0 var(--space-2);
  list-style: none;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}

.journey::-webkit-scrollbar {
  display: none;
}

.journey-step {
  position: relative;
  flex: 0 0 15rem;
  padding-top: calc(var(--node) + var(--space-3));
  scroll-snap-align: start;
}

/* The line from this badge to the next one */
.journey-step:not(:last-child)::before {
  content: "";
  position: absolute;
  top: calc(var(--node) / 2 - 1px);
  left: calc(var(--node) + 0.5rem);
  right: calc(var(--journey-gap) * -1 + 0.5rem);
  height: 2px;
  background: linear-gradient(90deg, rgba(var(--rgb-blue), 0.9), rgba(var(--rgb-blue), 0.25));
}

.journey-step:nth-child(3)::before {
  background: linear-gradient(90deg, rgba(var(--rgb-blue), 0.9), rgba(var(--rgb-orange), 0.9));
}

.journey-node {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  display: grid;
  place-items: center;
  align-content: center;
  width: var(--node);
  height: var(--node);
  border: 1px solid rgba(var(--rgb-blue), 0.5);
  border-radius: 20px;
  background-color: var(--color-surface);
  background-image: radial-gradient(90% 90% at 50% 0%, rgba(var(--rgb-blue), 0.3), transparent 75%);
  transform: rotate(-5deg);
  transition: transform 0.35s var(--spring);
}

.journey-step:nth-child(even) .journey-node {
  transform: rotate(5deg);
}

.journey-mark {
  font-family: var(--font-display);
  font-size: 1.9rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.03em;
}

.journey-kicker {
  color: var(--color-text-muted);
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.journey-title {
  margin-bottom: 0.35rem;
  font-size: 1.2rem;
}

.journey-text {
  color: var(--color-text-muted);
  font-size: 0.95rem;
}

/* Now: orange badge with a small pill */
.journey-step-now .journey-node {
  border-color: rgba(var(--rgb-orange), 0.7);
  background-image: radial-gradient(90% 90% at 50% 0%, rgba(var(--rgb-orange), 0.35), transparent 75%);
  box-shadow: 0 0 28px -6px rgba(var(--rgb-orange), 0.7);
}

.journey-step-now .journey-kicker {
  color: var(--color-orange);
}

.journey-step-now .journey-node::after {
  content: "Now";
  position: absolute;
  top: -0.7rem;
  right: -0.9rem;
  padding: 0.1rem 0.5rem;
  border-radius: 999px;
  background-color: var(--color-orange);
  color: var(--color-orange-ink);
  font-size: 0.7rem;
  font-weight: 800;
  transform: rotate(5deg);
}

@media (hover: hover) {
  .journey-step:hover .journey-node {
    transform: rotate(0) translateY(-4px) scale(1.06);
  }
}

@media (prefers-reduced-motion: no-preference) {
  .journey-step-now .journey-node {
    animation: journey-pulse 2.6s ease-in-out infinite;
  }
}

@keyframes journey-pulse {
  0%, 100% { box-shadow: 0 0 22px -8px rgba(var(--rgb-orange), 0.6); }
  50%      { box-shadow: 0 0 34px -4px rgba(var(--rgb-orange), 0.9); }
}

/* Wide screens: four stops share the row, no swiping */
@media (min-width: 900px) {
  .journey {
    overflow: visible;
  }

  .journey-step {
    flex: 1 1 0;
    min-width: 0;
  }
}

/* ----- 2b. Then vs. Now -----
   Drag-to-compare. The "2023" pane sits on top and is clipped to the left of
   the handle; an invisible range input covers the frame, so mouse, touch and
   keyboard all work. */
.progress-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-4) var(--space-3);
}

@media (min-width: 900px) {
  .progress-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.progress {
  margin: 0;
}

.progress-frame {
  --pos: 50%;
  position: relative;
  isolation: isolate;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  background-color: var(--color-surface);
  box-shadow: 0 24px 50px -30px rgba(0, 0, 0, 0.9);
  user-select: none;
}

.progress-frame:has(.progress-range:focus-visible) {
  outline: 2px solid var(--color-accent-bright);
  outline-offset: 3px;
}

.progress-pane {
  position: absolute;
  inset: 0;
}

.progress-pane--then {
  clip-path: inset(0 calc(100% - var(--pos)) 0 0);
}

.progress-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.35s ease;
}

.progress-img.is-loaded {
  opacity: 1;
}

/* Shown until the artwork file exists */
.progress-empty {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.2rem;
  padding: 0 1rem;
  text-align: center;
  color: var(--color-text-muted);
  font-size: 0.82rem;
  background:
    radial-gradient(circle at 80% 15%, rgba(var(--rgb-blue), 0.16), transparent 60%),
    repeating-linear-gradient(0deg, rgba(150, 190, 255, 0.04) 0 1px, transparent 1px 32px),
    repeating-linear-gradient(90deg, rgba(150, 190, 255, 0.04) 0 1px, transparent 1px 32px),
    var(--color-surface);
}

.progress-pane--then .progress-empty {
  background:
    radial-gradient(circle at 20% 85%, rgba(var(--rgb-silver), 0.1), transparent 60%),
    repeating-linear-gradient(0deg, rgba(200, 210, 226, 0.05) 0 1px, transparent 1px 32px),
    repeating-linear-gradient(90deg, rgba(200, 210, 226, 0.05) 0 1px, transparent 1px 32px),
    var(--color-surface-raised);
}

.progress-empty strong {
  color: var(--color-text);
  font-size: 0.95rem;
}

.progress-img.is-loaded ~ .progress-empty {
  display: none;
}

.progress-chip {
  position: absolute;
  top: 0.75rem;
  z-index: 2;
  padding: 0.25rem 0.7rem;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  pointer-events: none;
}

.progress-chip--then {
  left: 0.75rem;
  border: 1px solid rgba(var(--rgb-silver), 0.35);
  background-color: rgba(6, 10, 20, 0.75);
  color: var(--color-text);
}

.progress-chip--now {
  right: 0.75rem;
  background-color: var(--color-orange);
  color: var(--color-orange-ink);
}

.progress-handle {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--pos);
  z-index: 3;
  width: 2px;
  margin-left: -1px;
  background-color: #fff;
  box-shadow: 0 0 0 1px rgba(6, 10, 20, 0.35);
  pointer-events: none;
}

.progress-handle::after {
  content: "\2039  \203A";
  position: absolute;
  top: 50%;
  left: 50%;
  display: grid;
  place-items: center;
  width: 2.7rem;
  height: 2.7rem;
  border: 2px solid #fff;
  border-radius: 50%;
  background-color: var(--color-button);
  color: #fff;
  font-size: 1.1rem;
  font-weight: 700;
  line-height: 1;
  white-space: pre;
  transform: translate(-50%, -50%);
  box-shadow: 0 8px 20px -6px rgba(0, 0, 0, 0.7);
  transition: transform 0.18s var(--spring);
}

.progress-frame:hover .progress-handle::after {
  transform: translate(-50%, -50%) scale(1.08);
}

.progress-range {
  position: absolute;
  inset: 0;
  z-index: 4;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: ew-resize;
}

.progress-caption {
  display: flex;
  justify-content: space-between;
  gap: var(--space-2);
  margin-top: 0.75rem;
  color: var(--color-text-muted);
  font-size: 0.9rem;
}

.progress-caption-title {
  color: var(--color-text);
  font-weight: 600;
}

/* Homepage: a compact before / after slider. Text on the left, slider on the right. */
.home-compare {
  position: relative;
  padding: var(--space-4) 0 var(--space-5);
}

.home-compare-inner {
  display: grid;
  gap: var(--space-3);
  align-items: center;
}

@media (min-width: 860px) {
  .home-compare-inner {
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    gap: var(--space-5);
  }
}

.home-compare-title {
  font-size: clamp(1.8rem, 3.4vw, 2.6rem);
  line-height: 1.05;
}

.home-compare-text {
  max-width: 24rem;
  margin-top: var(--space-2);
  color: var(--color-text-muted);
  font-size: 1rem;
}

.home-compare .progress {
  max-width: 34rem;
}

@media (min-width: 860px) {
  .home-compare .progress {
    margin-left: auto;
  }
}

/* ----- 3. A Glimpse of My Work -----
   Same cards and full-size viewer as work.html, laid out as a loose
   editorial spread. Pieces keep their real aspect ratio, nothing is cropped. */
.glimpse-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3) var(--space-2);
  align-items: start;
  max-width: 26rem; /* phones: keep the pieces compact */
  margin: 0 auto;
}

.glimpse-grid .portfolio-item {
  min-width: 0;
  margin: 0;
  animation: none;
}

/* Phones: each wide piece full width, the two squares side by side */
.glimpse-grid .portfolio-item:nth-child(odd) {
  grid-column: 1 / -1;
  order: 1;
}

.glimpse-grid .portfolio-item:nth-child(even) {
  order: 2;
}

/* Tablet and desktop: two columns of 16 : 9 parts. A wide piece (16) and a
   square piece (9) get exactly the same height, so every row lines up. */
@media (min-width: 640px) {
  .glimpse-grid {
    grid-template-columns: minmax(0, 16fr) minmax(0, 9fr);
    max-width: 40rem;
  }

  .glimpse-grid .portfolio-item:nth-child(odd),
  .glimpse-grid .portfolio-item:nth-child(even) {
    grid-column: auto;
    order: 0;
  }
}

/* Desktop: all four pieces sit in ONE row (wide, square, wide, square).
   The 16 : 9 : 16 : 9 split gives every piece the same height, so the whole
   section is about a third of its old size. */
@media (min-width: 1000px) {
  .glimpse-grid {
    grid-template-columns: 16fr 9fr 16fr 9fr;
    gap: var(--space-3);
    max-width: 68rem;
  }
}

/* No project names under the pieces */
.glimpse-grid .portfolio-title {
  display: none;
}

.glimpse-grid .portfolio-caption:not(:has(*:not(.portfolio-title))) {
  display: none;
}

.about-glimpse .work-footer {
  margin-top: var(--space-5);
}

/* ----- 4. Closing call to action ----- */
.about-cta-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

@media (max-width: 639px) {
  .about-cta-actions {
    width: 100%;
  }

  .about-cta-actions .button {
    flex: 1 1 100%;
  }
}

/* The banner placeholder is small now: tighter text so the file name fits */
.mega-work .mega-banner-placeholder::before {
  inset: 0.5rem;
}

.mega-work .mega-banner-label {
  font-size: 0.95rem;
}

.mega-work .mega-banner-hint {
  max-width: 88%;
  font-size: 0.68rem;
  overflow-wrap: anywhere;
}

/* ==========================================================
   BUTTONS
   Main buttons get a soft top light, a glowing halo that opens on hover,
   a light sweep and a firm press. Secondary buttons light up blue.
   Arrows slide forward. Keyboard focus gets the same, plus a clear ring.
   ========================================================== */
.button {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  transition: background-color var(--transition), background-image 0.25s ease,
              border-color var(--transition), box-shadow 0.25s ease,
              transform 0.2s var(--spring);
}

/* Main button: a gentle light from the top edge */
.button-primary {
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0) 62%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.24),
    0 6px 16px -8px rgba(28, 100, 220, 0.7);
}

.button-primary:hover,
.button-primary:focus-visible {
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.24), rgba(255, 255, 255, 0) 70%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.32),
    0 14px 28px -12px rgba(37, 118, 242, 0.85),
    0 0 0 4px rgba(var(--rgb-blue), 0.16),
    0 0 30px -4px rgba(var(--rgb-blue), 0.5);
}

/* Light sweep: a soft diagonal shine that runs across on hover */
.button::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, 0.3) 50%, transparent 65%);
  transform: translateX(-120%);
  pointer-events: none;
}

.button:hover::after,
.button:focus-visible::after {
  transform: translateX(120%);
  transition: transform 0.7s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.button-secondary::after {
  background: linear-gradient(105deg, transparent 35%, rgba(var(--rgb-blue), 0.24) 50%, transparent 65%);
}

/* Secondary button: lights up blue */
.button-secondary:hover,
.button-secondary:focus-visible {
  border-color: rgba(var(--rgb-blue), 0.6);
  background-color: rgba(var(--rgb-blue), 0.14);
  box-shadow:
    0 12px 26px -14px rgba(0, 0, 0, 0.9),
    0 0 0 3px rgba(var(--rgb-blue), 0.1),
    0 0 26px -8px rgba(var(--rgb-blue), 0.5);
}

/* Lift on hover and focus; a firm press when clicked */
.button:hover,
.button:focus-visible {
  transform: translateY(-3px);
}

.button:active {
  transform: translateY(0) scale(0.97);
  transition-duration: 0.08s;
}

.button-primary:active {
  box-shadow:
    inset 0 2px 6px rgba(0, 0, 0, 0.3),
    0 4px 10px -6px rgba(28, 100, 220, 0.7);
}

/* Clear keyboard focus ring */
.button:focus-visible,
.filter-chip:focus-visible,
.review-arrow:focus-visible {
  outline: 2px solid var(--color-accent-bright);
  outline-offset: 3px;
}

/* Arrows inside buttons slide forward */
.button svg {
  transition: transform 0.25s var(--spring);
}

.button:hover svg,
.button:focus-visible svg {
  transform: translateX(4px);
}

/* Filter chips and the small round controls */
.filter-chip:hover,
.filter-chip:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 10px 22px -12px rgba(var(--rgb-blue), 0.7);
}

.filter-chip:active {
  transform: translateY(0) scale(0.96);
}

.review-arrow:hover:not([aria-disabled="true"]),
.review-arrow:focus-visible {
  transform: translateY(-2px) scale(1.06);
  border-color: rgba(var(--rgb-blue), 0.55);
  box-shadow: 0 10px 20px -12px rgba(var(--rgb-blue), 0.7);
}

.review-arrow:active {
  transform: scale(0.94);
}

@media (prefers-reduced-motion: reduce) {
  .button::after {
    display: none;
  }

  .button,
  .button svg {
    transition: background-color 0.15s ease, border-color 0.15s ease;
  }

  .button:hover,
  .button:focus-visible,
  .button:active,
  .button:hover svg,
  .button:focus-visible svg,
  .filter-chip:hover,
  .filter-chip:focus-visible,
  .filter-chip:active,
  .review-arrow:hover,
  .review-arrow:focus-visible,
  .review-arrow:active {
    transform: none;
  }
}

/* ==========================================================
   WORK MENU
   A calm panel: a small heading, the four categories as a 2 x 2 grid of
   cards, the banner, and a footer row ("View all work" and a short line
   next to it). Hover effects are kept to a soft tint. The banner is untouched.
   ========================================================== */
.mega-link-icon {
  display: none;
}

.mega-eyebrow {
  margin: 0;
  color: var(--color-text-muted);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* Footer row: "View all work" on the left, a short line on the right */
.mega-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem 1rem;
  margin-top: var(--space-2);
}

.mega-foot .mega-all {
  margin-top: 0;
}

.mega-aside {
  display: inline-flex;
  align-items: baseline;
  gap: 0.45rem;
  color: var(--color-text-muted);
  font-size: 0.86rem;
  transition: color var(--transition);
}

.mega-aside-link {
  color: var(--color-accent-bright);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: rgba(var(--rgb-blue), 0.4);
  text-underline-offset: 3px;
}

.mega-aside:hover,
.mega-aside:focus-visible {
  color: var(--color-text);
  transition-duration: 0s;
}

.mega-aside:hover .mega-aside-link,
.mega-aside:focus-visible .mega-aside-link {
  text-decoration-color: currentColor;
}

@media (min-width: 861px) {
  .mega-work {
    width: min(600px, calc(100% - 2 * var(--mega-edge)));
  }

  .mega-work .mega-inner {
    padding: 1.1rem;
    background:
      linear-gradient(180deg, rgba(var(--rgb-blue), 0.09), transparent 36%),
      rgba(7, 12, 27, 0.96);
  }

  /* Heading row: leaves room on the right for the seasonal decor */
  .mega-work .mega-eyebrow {
    display: flex;
    align-items: center;
    min-height: 2.2rem;
    margin: 0 0 0.2rem 0.4rem;
  }

  .mega-work .mega-links {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.6rem;
  }

  /* ----- Link rows: text first -----
     No boxes and no permanent backgrounds. The whole row is the link
     (padding sits on the <a>), and a dark navy tint fades in on hover and
     keyboard focus. ----- */
  .mega-work .mega-link {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas: "icon body arrow";
    align-items: center;
    gap: 0.75rem;
    height: 100%;
    padding: 0.65rem 0.9rem;
    border: 1px solid rgba(var(--rgb-silver), 0.1);
    border-radius: 12px;
    background-color: rgba(var(--rgb-blue), 0.035);
    transition: background-color 0.15s ease, border-color 0.15s ease;
  }

  /* Hover and focus: only the edge and tint get a little stronger */
  .mega-work .mega-link:hover,
  .mega-work .mega-link:focus-visible {
    transform: none;
    border-color: rgba(var(--rgb-blue), 0.32);
    background-color: rgba(var(--rgb-blue), 0.08);
  }

  .mega-work .mega-link:active {
    background-color: rgba(var(--rgb-blue), 0.12);
  }

  .mega-work .mega-link:focus-visible {
    outline: 2px solid var(--color-accent-bright);
    outline-offset: 2px;
  }

  /* Icons sit directly on the menu, no square around them */
  .mega-work .mega-link-icon {
    grid-area: icon;
    display: grid;
    place-items: center;
    justify-self: start;
    width: 1.5rem;
    height: 1.5rem;
    border: 0;
    border-radius: 0;
    background: none;
    color: var(--color-accent);
    opacity: 0.9;
    transition: color 0.2s ease, opacity 0.2s ease;
  }

  .mega-work .mega-link-icon svg {
    width: 24px;
    height: 24px;
  }

  .mega-work .mega-link:hover .mega-link-icon,
  .mega-work .mega-link:focus-visible .mega-link-icon {
    color: var(--color-accent-bright);
    opacity: 1;
  }

  .mega-work .mega-link-body {
    grid-area: body;
    display: block;
    min-width: 0;
  }

  /* Order inside the panel: heading, category cards, banner, then the footer row */
  .mega-work .mega-eyebrow { order: 0; }
  .mega-work .mega-links { order: 1; }
  .mega-work .mega-banner { order: 2; }
  .mega-work .mega-foot { order: 3; }

  .mega-work .mega-link-title {
    color: var(--color-text);
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -0.01em;
    transition: color 0.2s ease;
  }

  .mega-work .mega-link-text {
    margin-top: 0.15rem;
    color: var(--color-text-muted);
    font-size: 0.84rem;
    line-height: 1.4;
  }

  /* Quiet diagonal arrow (the existing arrow icon, turned to point up-right).
     On hover / focus it only gets a little brighter. */
  .mega-work .mega-link .mega-arrow {
    grid-area: arrow;
    justify-self: end;
    margin: 0;
    color: var(--color-silver);
    opacity: 0.55;
    transform: rotate(-45deg);
    transition: opacity 0.2s ease, color 0.2s ease, transform 0.2s ease;
  }

  .mega-work .mega-link:hover .mega-arrow,
  .mega-work .mega-link:focus-visible .mega-arrow {
    color: var(--color-accent-bright);
    opacity: 0.95;
    transform: rotate(-45deg);
  }

  /* ----- Footer row: the divider stays. Two flat buttons of the same size:
     a soft blue one ("View all work") and a quiet outlined one ("See pricing").
     Hover only shifts colour a little: no movement, no shadow, no glow. ----- */
  .mega-work .mega-foot {
    align-items: center;
    gap: 0.6rem 1.25rem;
    margin-top: 0.7rem;
    padding-top: 0.75rem;
    border-top: 1px solid rgba(var(--rgb-blue), 0.14);
  }

  .mega-work .mega-all,
  .mega-work .mega-aside-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 2.1rem;
    padding: 0.35rem 0.8rem;
    border: 1px solid transparent;
    border-radius: 10px;
    font-size: 0.86rem;
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
  }

  /* Primary: soft blue tint with a thin blue edge */
  .mega-work .mega-all {
    border-color: rgba(var(--rgb-blue), 0.38);
    background-color: rgba(var(--rgb-blue), 0.14);
    color: var(--color-accent-bright);
  }

  .mega-work .mega-all:hover,
  .mega-work .mega-all:focus-visible {
    border-color: rgba(var(--rgb-blue), 0.55);
    background-color: rgba(var(--rgb-blue), 0.22);
    color: var(--color-accent-bright);
  }

  .mega-work .mega-all:focus-visible,
  .mega-work .mega-aside:focus-visible .mega-aside-link {
    outline: 2px solid var(--color-accent-bright);
    outline-offset: 2px;
  }

  /* The arrows in both buttons stay still */
  .mega-work .mega-all .mega-arrow,
  .mega-work .mega-all:hover .mega-arrow,
  .mega-work .mega-all:focus-visible .mega-arrow {
    margin: 0;
    color: inherit;
    opacity: 0.9;
    transform: none;
    transition: none;
  }

  /* Secondary: "Need something custom?" is plain muted text, "See pricing" is
     the outlined button next to it. The whole phrase stays one link. */
  .mega-work .mega-aside {
    align-items: center;
    gap: 0.65rem;
    color: var(--color-text-muted);
    font-size: 0.86rem;
    white-space: nowrap;
  }

  .mega-work .mega-aside:hover,
  .mega-work .mega-aside:focus-visible {
    color: var(--color-text-muted);
    outline: none;
  }

  .mega-work .mega-aside-link {
    border-color: rgba(var(--rgb-silver), 0.22);
    background-color: transparent;
    color: var(--color-text);
  }

  .mega-work .mega-aside-link::after {
    content: "";
    width: 0.8rem;
    height: 0.8rem;
    background-color: currentColor;
    opacity: 0.7;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8h10M9 4l4 4-4 4'/%3E%3C/svg%3E") center / contain no-repeat;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8h10M9 4l4 4-4 4'/%3E%3C/svg%3E") center / contain no-repeat;
  }

  .mega-work .mega-aside:hover .mega-aside-link,
  .mega-work .mega-aside:focus-visible .mega-aside-link {
    border-color: rgba(var(--rgb-silver), 0.38);
    background-color: rgba(var(--rgb-silver), 0.07);
    color: #fff;
  }

  .mega-work .mega-decor {
    top: 0.3rem;
    right: 0.75rem;
  }

  /* ----- Banner: full width under the footer row, in a glowing frame (unchanged) ----- */
  .mega-work .mega-banner {
    margin: 0.7rem 0 0;
    border-color: rgba(var(--rgb-blue), 0.3);
    box-shadow:
      0 20px 40px -20px rgba(0, 0, 0, 0.9),
      0 0 44px -14px rgba(var(--rgb-blue), 0.5);
  }

  .mega-work .mega-banner-image {
    transition: opacity 0.35s ease, transform 0.6s cubic-bezier(0.22, 0.61, 0.36, 1);
  }

}

/* Phone menu: the heading and decor are skipped, the banner stays */
@media (max-width: 860px) {
  .mega-eyebrow,
  .mega-decor {
    display: none;
  }

  .mega-foot {
    margin-top: var(--space-1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .mega-work .mega-banner-image {
    transition: opacity 0.15s ease;
  }

  .mega-work .mega-link:hover .mega-arrow,
  .mega-work .mega-link:focus-visible .mega-arrow {
    transform: rotate(-45deg);
  }

  .mega-work .mega-all:hover .mega-arrow,
  .mega-work .mega-all:focus-visible .mega-arrow,
  .mega-work .mega-aside:hover .mega-aside-link::after,
  .mega-work .mega-aside:focus-visible .mega-aside-link::after {
    transform: none;
  }
}

/* On short laptop screens the cards get a little tighter so the whole menu still fits. */
@media (min-width: 861px) and (max-height: 780px) {
  .mega-work .mega-link {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
  }
}

/* ==========================================================
   HALLOWEEN SALE POPUP
   A card in the bottom-right corner. Closing it leaves a small quiet
   tab in the same corner. Built by script.js (HALLOWEEN_POPUP).
   ========================================================== */
.sale-popup {
  position: fixed;
  right: 1.25rem;
  bottom: 1.25rem;
  z-index: 90;
  width: min(340px, calc(100vw - 2rem));
  overflow: hidden;
  border: 1px solid rgba(var(--rgb-orange), 0.3);
  border-radius: 20px;
  background:
    radial-gradient(ellipse 80% 50% at 100% 100%, rgba(var(--rgb-orange), 0.12), transparent 70%),
    radial-gradient(ellipse 70% 40% at 0% 0%, rgba(var(--rgb-blue), 0.12), transparent 70%),
    rgba(8, 13, 28, 0.97);
  box-shadow:
    0 30px 60px -22px rgba(0, 0, 0, 0.9),
    0 0 60px -22px rgba(var(--rgb-orange), 0.45);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(24px) scale(0.97);
  transform-origin: 100% 100%;
  transition: opacity 0.3s ease, transform 0.45s var(--spring), visibility 0s linear 0.45s;
}

.sale-popup.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: none;
  transition-delay: 0s;
}

/* Fine orange light along the top edge */
.sale-popup::before {
  content: "";
  position: absolute;
  top: 0;
  left: 10%;
  right: 10%;
  z-index: 3;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(var(--rgb-orange), 0.9), transparent);
  pointer-events: none;
}

.sale-popup-art {
  position: relative;
  aspect-ratio: 1430 / 731; /* the artwork is 1430 x 731 px */
  overflow: hidden;
  background-color: var(--color-surface);
}

.sale-popup-art::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 40%;
  background: linear-gradient(180deg, transparent, rgba(8, 13, 28, 0.9));
  pointer-events: none;
}

.sale-popup-image {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.4s ease, transform 0.8s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.sale-popup-image.is-loaded {
  opacity: 1;
}

.sale-popup:hover .sale-popup-image.is-loaded {
  transform: scale(1.04);
}

/* Shown until the picture file exists */
.sale-popup-placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  padding: 1rem;
  text-align: center;
  background:
    radial-gradient(ellipse 60% 90% at 88% 15%, rgba(var(--rgb-orange), 0.2), transparent 70%),
    radial-gradient(circle at 12% 100%, rgba(var(--rgb-blue), 0.14), transparent 60%),
    repeating-linear-gradient(0deg, rgba(150, 190, 255, 0.035) 0 1px, transparent 1px 32px),
    repeating-linear-gradient(90deg, rgba(150, 190, 255, 0.035) 0 1px, transparent 1px 32px);
}

.sale-popup-placeholder::before {
  content: "";
  position: absolute;
  inset: 0.6rem;
  border: 1px dashed rgba(255, 190, 140, 0.28);
  border-radius: 10px;
}

.sale-popup-placeholder strong {
  position: relative;
  font-size: 0.95rem;
}

.sale-popup-placeholder span {
  position: relative;
  max-width: 90%;
  color: var(--color-text-muted);
  font-size: 0.72rem;
  overflow-wrap: anywhere;
}

.sale-popup-close {
  position: absolute;
  top: 0.6rem;
  right: 0.6rem;
  z-index: 4;
  display: grid;
  place-items: center;
  width: 2.1rem;
  height: 2.1rem;
  padding: 0;
  border: 1px solid rgba(var(--rgb-silver), 0.28);
  border-radius: 50%;
  background-color: rgba(5, 9, 20, 0.85);
  color: #fff;
  cursor: pointer;
  transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.25s var(--spring);
}

.sale-popup-close:hover,
.sale-popup-close:focus-visible {
  border-color: rgba(var(--rgb-orange), 0.7);
  background-color: rgba(var(--rgb-orange), 0.22);
  transform: translateY(2px);
}

.sale-popup-close:focus-visible,
.sale-tab:focus-visible {
  outline: 2px solid var(--color-orange-bright);
  outline-offset: 3px;
}

.sale-popup-body {
  position: relative;
  z-index: 2;
  padding: 0.25rem 1.35rem 1.35rem;
  margin-top: -0.4rem;
}

.sale-popup-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  margin: 0;
  color: var(--color-silver);
  font-family: var(--font-display);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.sale-popup-eyebrow::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: var(--color-orange);
  box-shadow: 0 0 10px var(--color-orange);
}

.sale-popup-offer {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  margin: 0.3rem 0 0;
  font-family: var(--font-display);
  line-height: 1;
}

.sale-popup-percent {
  font-size: 3.6rem;
  font-weight: 800;
  letter-spacing: -0.04em;
  background: linear-gradient(180deg, #ffd0a6, var(--color-orange) 60%, #f06a14);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  filter: drop-shadow(0 0 22px rgba(var(--rgb-orange), 0.35));
}

.sale-popup-off {
  color: #fff;
  font-size: 1.6rem;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.sale-popup-note {
  margin: 0.6rem 0 0;
  color: var(--color-text-muted);
  font-size: 0.88rem;
  line-height: 1.45;
}

.sale-popup-cta {
  width: 100%;
  margin-top: 1rem;
  gap: 0.6rem;
}

/* The small tab left behind after closing: quiet, no pulsing */
.sale-tab {
  position: fixed;
  right: 1.25rem;
  bottom: 1.25rem;
  z-index: 89;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.9rem 0.5rem 0.5rem;
  border: 1px solid rgba(var(--rgb-orange), 0.75);
  border-radius: 999px;
  background: linear-gradient(180deg, var(--color-orange-bright), var(--color-orange));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.4),
    0 10px 24px -10px rgba(var(--rgb-orange), 0.8),
    0 0 0 4px rgba(var(--rgb-orange), 0.14);
  color: var(--color-orange-ink);
  font: inherit;
  font-size: 0.92rem;
  font-weight: 800;
  line-height: 1;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(10px);
  transition: opacity 0.3s ease, transform 0.35s var(--spring), border-color 0.2s ease,
              color 0.2s ease, box-shadow 0.25s ease, visibility 0s linear 0.35s;
}

.sale-tab.is-visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: none;
  transition-delay: 0.15s, 0.15s, 0s, 0s, 0s, 0s;
}

/* Tag icon in a small dark bubble, label, and a little "open" chevron */
.sale-tab-icon {
  display: grid;
  place-items: center;
  width: 1.8rem;
  height: 1.8rem;
  border-radius: 50%;
  background-color: rgba(8, 13, 28, 0.82);
  color: var(--color-orange-bright);
}

.sale-tab-chevron {
  opacity: 0.75;
}

.sale-tab.is-visible:hover,
.sale-tab.is-visible:focus-visible {
  filter: brightness(1.07);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.45),
    0 14px 30px -10px rgba(var(--rgb-orange), 0.9),
    0 0 0 5px rgba(var(--rgb-orange), 0.2);
  transform: translateY(-2px);
  transition-delay: 0s;
}

@media (max-width: 520px) {
  .sale-popup {
    right: 0.75rem;
    bottom: 0.75rem;
    width: calc(100vw - 1.5rem);
  }

  .sale-popup-percent {
    font-size: 3.1rem;
  }

  .sale-tab {
    right: 0.75rem;
    bottom: 0.75rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sale-popup,
  .sale-tab,
  .sale-popup-image,
  .sale-popup-close {
    transition: opacity 0.15s ease, visibility 0s linear 0.15s;
  }

  .sale-popup.is-open,
  .sale-tab.is-visible {
    transition-delay: 0s;
  }

  .sale-popup,
  .sale-tab,
  .sale-tab.is-visible:hover {
    transform: none;
  }

  .sale-popup:hover .sale-popup-image.is-loaded,
  .sale-popup-close:hover {
    transform: none;
  }
}

/* ----- Halloween popup: countdown to the end of the sale ----- */
.sale-popup-timer-label {
  margin: 0.95rem 0 0.45rem;
  color: var(--color-text-muted);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.sale-popup-timer {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.45rem;
}

.sale-timer-cell {
  display: grid;
  gap: 0.2rem;
  padding: 0.5rem 0 0.45rem;
  border: 1px solid rgba(var(--rgb-orange), 0.2);
  border-radius: 11px;
  background: linear-gradient(180deg, rgba(var(--rgb-orange), 0.1), rgba(var(--rgb-orange), 0.025));
  text-align: center;
}

.sale-timer-num {
  color: #fff;
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.sale-timer-cell:last-child .sale-timer-num {
  color: var(--color-orange-bright);
}

.sale-timer-unit {
  color: var(--color-text-muted);
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* ==========================================================
   HALLOWEEN DECORATIONS (homepage hero)
   Built by script.js and switched on or off with HALLOWEEN_DECOR.
   Cobwebs, a dangling spider, a few bats, rising embers and a warm glow.
   ========================================================== */
.hero.has-halloween > .hero-inner {
  position: relative;
  z-index: 1;
}

.hw-decor {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

/* Warm moonlight in the top-right corner */
.hw-glow {
  position: absolute;
  top: -160px;
  right: -100px;
  width: 560px;
  height: 560px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(var(--rgb-orange), 0.14), rgba(var(--rgb-orange), 0.04) 45%, transparent 68%);
}

/* Cobwebs in the top corners */
.hw-web {
  position: absolute;
  top: 0;
  width: 190px;
  height: 190px;
  opacity: 0.55;
  -webkit-mask-image: radial-gradient(circle at 0 0, #000 35%, transparent 98%);
          mask-image: radial-gradient(circle at 0 0, #000 35%, transparent 98%);
}

.hw-web-left {
  left: 0;
}

.hw-web-right {
  right: 0;
  transform: scaleX(-1);
}

.hw-web path {
  fill: none;
  stroke: rgba(var(--rgb-silver), 0.7);
  stroke-width: 0.9;
  stroke-linecap: round;
}

/* Spider on a thread */
.hw-spider {
  position: absolute;
  top: 0;
  right: 27%;
  width: 34px;
  transform-origin: 50% 0;
  animation: hw-swing 5.5s ease-in-out infinite alternate;
}

.hw-thread {
  display: block;
  width: 1px;
  height: 118px;
  margin: 0 auto;
  background: linear-gradient(180deg, rgba(var(--rgb-silver), 0), rgba(var(--rgb-silver), 0.5));
}

.hw-spider svg {
  display: block;
  width: 34px;
  height: auto;
  margin-top: -1px;
  filter: drop-shadow(0 0 8px rgba(var(--rgb-orange), 0.35));
}

.hw-spider-body {
  fill: #0c1122;
  stroke: rgba(var(--rgb-silver), 0.55);
  stroke-width: 0.8;
}

.hw-spider-legs {
  fill: none;
  stroke: rgba(var(--rgb-silver), 0.6);
  stroke-width: 1;
  stroke-linecap: round;
}

.hw-spider-eye {
  fill: var(--color-orange);
}

@keyframes hw-swing {
  from { transform: rotate(-4deg); }
  to { transform: rotate(4deg); }
}

/* Bats: they fly up through the hero in a lazy S-curve, now and then.
   --travel (hero height + a little) is set by script.js, --s flips the curve. */
.hw-bat {
  position: absolute;
  top: calc(100% + 20px);
  left: var(--x, 20%);
  width: var(--size, 46px);
  opacity: 0;
  animation: hw-fly var(--dur, 15s) linear var(--delay, 2s) infinite;
  will-change: transform, opacity;
}

.hw-bat-bob {
  display: block;
  animation: hw-bob 0.55s ease-in-out infinite alternate;
}

.hw-bat svg {
  display: block;
  width: 100%;
  height: auto;
  fill: #0b0f1d;
  stroke: rgba(var(--rgb-orange), 0.6);
  stroke-width: 0.7;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 7px rgba(var(--rgb-orange), 0.4));
  transform-origin: 50% 55%;
  animation: hw-flap 0.32s ease-in-out infinite alternate;
}

/* Straight up the hero with a gentle sway left and right; the last part of
   the cycle is a pause (the bat waits out of sight below the hero). */
@keyframes hw-fly {
  0%   { opacity: 0; transform: translate(0, 0) rotate(0deg); }
  4%   { opacity: 1; }
  15%  { transform: translate(calc(var(--s, 1) * -34px), calc(var(--travel, 900px) * -0.25)) rotate(calc(var(--s, 1) * -9deg)); }
  30%  { transform: translate(calc(var(--s, 1) * 30px), calc(var(--travel, 900px) * -0.5)) rotate(calc(var(--s, 1) * 9deg)); }
  45%  { transform: translate(calc(var(--s, 1) * -26px), calc(var(--travel, 900px) * -0.75)) rotate(calc(var(--s, 1) * -8deg)); }
  58%  { opacity: 1; }
  60%  { opacity: 0; transform: translate(0, calc(var(--travel, 900px) * -1)) rotate(0deg); }
  100% { opacity: 0; transform: translate(0, calc(var(--travel, 900px) * -1)) rotate(0deg); }
}

@keyframes hw-bob {
  from { transform: translateY(5px); }
  to { transform: translateY(-5px); }
}

@keyframes hw-flap {
  from { transform: scale(1, 1); }
  to { transform: scale(0.62, 0.92); }
}

/* Embers drifting up */
.hw-ember {
  position: absolute;
  bottom: -12px;
  left: var(--x, 50%);
  width: var(--s, 4px);
  height: var(--s, 4px);
  border-radius: 50%;
  background: var(--color-orange-bright);
  box-shadow: 0 0 10px 2px rgba(var(--rgb-orange), 0.55);
  opacity: 0;
  animation: hw-rise var(--dur, 12s) ease-in infinite var(--delay, 0s);
}

@keyframes hw-rise {
  0% { opacity: 0; transform: translate(0, 0) scale(1); }
  12% { opacity: 0.85; }
  70% { opacity: 0.5; }
  100% { opacity: 0; transform: translate(var(--drift, 30px), -78vh) scale(0.4); }
}

@media (max-width: 760px) {
  .hw-web {
    width: 120px;
    height: 120px;
  }

  .hw-spider {
    right: 12%;
  }

  .hw-thread {
    height: 70px;
  }

  .hw-bat {
    --size: 34px;
  }

  .hw-ember:nth-child(even) {
    display: none;
  }
}

/* No movement for people who ask for less: webs and spider stay, the rest goes */
@media (prefers-reduced-motion: reduce) {
  .hw-spider {
    animation: none;
  }

  .hw-bat,
  .hw-ghost,
  .hw-ember {
    display: none;
  }
}


/* ==========================================================
   CHRISTMAS AND SUMMER SALE POPUPS
   Same card and tab as the Halloween popup, only the accent colours change.
   Built by script.js (CHRISTMAS_POPUP, SUMMER_POPUP).
   ========================================================== */
.sale-popup--christmas,
.sale-tab--christmas {
  --rgb-orange: 255, 82, 82;
  --color-orange: #ff5252;
  --color-orange-bright: #ff8c8c;
  --color-orange-ink: #ffffff;
}

.sale-popup--summer,
.sale-tab--summer {
  --rgb-orange: 255, 196, 61;
  --color-orange: #ffc43d;
  --color-orange-bright: #ffdb7a;
  --color-orange-ink: #1c1404;
}

.sale-popup--christmas {
  background:
    radial-gradient(ellipse 80% 50% at 100% 100%, rgba(var(--rgb-orange), 0.12), transparent 70%),
    radial-gradient(ellipse 70% 40% at 0% 0%, rgba(61, 220, 132, 0.12), transparent 70%),
    rgba(8, 13, 28, 0.97);
}

.sale-popup--summer {
  background:
    radial-gradient(ellipse 80% 50% at 100% 100%, rgba(var(--rgb-orange), 0.12), transparent 70%),
    radial-gradient(ellipse 70% 40% at 0% 0%, rgba(45, 212, 220, 0.12), transparent 70%),
    rgba(8, 13, 28, 0.97);
}

.sale-popup--christmas .sale-popup-percent {
  background-image: linear-gradient(180deg, #ffd9d9, var(--color-orange) 60%, #d62f2f);
}

.sale-popup--summer .sale-popup-percent {
  background-image: linear-gradient(180deg, #fff1bd, var(--color-orange) 60%, #f2a30f);
}

.sale-popup--christmas .sale-popup-placeholder::before {
  border-color: rgba(255, 150, 150, 0.28);
}

.sale-popup--summer .sale-popup-placeholder::before {
  border-color: rgba(255, 224, 140, 0.28);
}

.sale-popup--christmas .sale-popup-cta,
.sale-popup--summer .sale-popup-cta {
  background-color: var(--color-orange);
  color: var(--color-orange-ink);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.24),
    0 6px 16px -8px rgba(var(--rgb-orange), 0.7);
}

.sale-popup--christmas .sale-popup-cta:hover,
.sale-popup--christmas .sale-popup-cta:focus-visible,
.sale-popup--summer .sale-popup-cta:hover,
.sale-popup--summer .sale-popup-cta:focus-visible {
  background-color: var(--color-orange-bright);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.32),
    0 14px 28px -12px rgba(var(--rgb-orange), 0.85),
    0 0 0 4px rgba(var(--rgb-orange), 0.16);
}


/* ==========================================================
   CHRISTMAS DECORATIONS (homepage hero)
   Built by script.js and switched on or off with CHRISTMAS_DECOR.
   A string of twinkling lights, hanging baubles, golden sparkles and a
   soft red and green glow. (The snow comes from the embed.im script.)
   ========================================================== */
.hero.has-christmas > .hero-inner,
.hero.has-summer > .hero-inner {
  position: relative;
  z-index: 1;
}

.xm-decor,
.sm-decor {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

.xm-glow {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 45% 55% at 100% 0%, rgba(255, 77, 77, 0.13), transparent 70%),
    radial-gradient(ellipse 40% 50% at 0% 100%, rgba(61, 220, 132, 0.09), transparent 70%);
}

/* String of lights along the top */
.xm-lights {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  height: 38px;
}

.xm-swag {
  position: relative;
  flex: 1 1 0;
  height: 100%;
}

.xm-swag svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.xm-swag path {
  fill: none;
  stroke: rgba(var(--rgb-silver), 0.38);
  stroke-width: 1.2;
  vector-effect: non-scaling-stroke;
}

.xm-bulb {
  position: absolute;
  width: 8px;
  height: 11px;
  border-radius: 50% 50% 55% 55%;
  background-color: var(--c, #ffd166);
  box-shadow: 0 0 9px 1px var(--c, #ffd166);
  transform: translate(-50%, -25%);
  animation: xm-twinkle var(--d, 2s) ease-in-out infinite alternate;
  animation-delay: var(--delay, 0s);
}

@keyframes xm-twinkle {
  from { opacity: 0.4; }
  to { opacity: 1; }
}

/* Baubles hanging on threads */
.xm-ornament {
  position: absolute;
  top: 20px;
  left: var(--x, 50%);
  width: 26px;
  margin-left: -13px;
  transform-origin: 50% 0;
  animation: xm-swing 5s ease-in-out infinite alternate;
  animation-delay: var(--delay, 0s);
}

.xm-thread {
  display: block;
  width: 1px;
  height: var(--len, 70px);
  margin: 0 auto;
  background: linear-gradient(180deg, rgba(var(--rgb-silver), 0.12), rgba(var(--rgb-silver), 0.5));
}

.xm-ornament svg {
  display: block;
  width: 26px;
  height: auto;
  margin-top: -1px;
  filter: drop-shadow(0 0 6px var(--c, #ff4d4d));
}

.xm-cap {
  fill: #d9b45a;
}

.xm-ball {
  fill: var(--c, #ff4d4d);
  stroke: rgba(255, 255, 255, 0.35);
  stroke-width: 0.8;
}

.xm-shine {
  fill: rgba(255, 255, 255, 0.4);
}

@keyframes xm-swing {
  from { transform: rotate(-5deg); }
  to { transform: rotate(5deg); }
}

/* Golden sparkles that fade in and out */
.xm-twinkle {
  position: absolute;
  left: var(--x, 50%);
  top: var(--y, 40%);
  width: var(--s, 3px);
  height: var(--s, 3px);
  border-radius: 50%;
  background-color: #ffe9a8;
  box-shadow: 0 0 8px 2px rgba(255, 209, 102, 0.55);
  opacity: 0;
  animation: xm-star var(--dur, 4s) ease-in-out infinite var(--delay, 0s);
}

@keyframes xm-star {
  0%, 100% { opacity: 0; transform: scale(0.6); }
  50% { opacity: 0.9; transform: scale(1); }
}

@media (max-width: 760px) {
  .xm-swag:nth-child(n+5) {
    display: none;
  }

  .xm-ornament-3 {
    display: none;
  }

  .xm-twinkle:nth-child(even) {
    display: none;
  }
}

/* No movement for people who ask for less: lights and baubles stay still, sparkles go */
@media (prefers-reduced-motion: reduce) {
  .xm-bulb,
  .xm-ornament {
    animation: none;
  }

  .xm-twinkle {
    display: none;
  }
}


/* ==========================================================
   SUMMER DECORATIONS (homepage hero)
   Built by script.js and switched on or off with SUMMER_DECOR.
   A glowing sun, drifting clouds, gentle waves and rising bubbles.
   ========================================================== */
.sm-glow {
  position: absolute;
  top: -200px;
  right: -120px;
  width: 640px;
  height: 640px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 196, 61, 0.16), rgba(255, 196, 61, 0.05) 45%, transparent 68%);
}

/* Sun */
.sm-sun {
  position: absolute;
  top: 26px;
  right: 7%;
  width: 104px;
}

.sm-sun svg {
  display: block;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 0 24px rgba(255, 196, 61, 0.55));
}

.sm-sun-disc {
  fill: #ffd36b;
}

.sm-sun-rays {
  fill: none;
  stroke: #ffd36b;
  stroke-width: 3;
  stroke-linecap: round;
  opacity: 0.85;
  transform-box: fill-box;
  transform-origin: center;
  animation: sm-spin 70s linear infinite;
}

@keyframes sm-spin {
  to { transform: rotate(360deg); }
}

/* Waves along the bottom edge */
.sm-waves {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 58px;
  overflow: hidden;
}

.sm-wave {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 200%;
  animation: sm-wave 14s linear infinite;
}

.sm-wave-back {
  height: 100%;
  fill: rgba(45, 212, 220, 0.07);
  animation-duration: 22s;
  animation-direction: reverse;
}

.sm-wave-front {
  height: 68%;
  fill: rgba(45, 212, 220, 0.11);
}

@keyframes sm-wave {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* Bubbles */
.sm-bubble {
  position: absolute;
  bottom: -16px;
  left: var(--x, 50%);
  width: var(--s, 10px);
  height: var(--s, 10px);
  border-radius: 50%;
  border: 1px solid rgba(120, 230, 240, 0.45);
  background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.28), rgba(45, 212, 220, 0.06) 60%);
  opacity: 0;
  animation: sm-rise var(--dur, 14s) ease-in infinite var(--delay, 0s);
}

@keyframes sm-rise {
  0% { opacity: 0; transform: translate(0, 0); }
  15% { opacity: 0.8; }
  75% { opacity: 0.45; }
  100% { opacity: 0; transform: translate(var(--drift, 20px), -70vh); }
}

@media (max-width: 760px) {
  .sm-sun {
    top: 18px;
    right: 5%;
    width: 76px;
  }

  .sm-bubble:nth-child(even) {
    display: none;
  }
}

/* No movement for people who ask for less: sun and waves stay still, clouds and bubbles go */
@media (prefers-reduced-motion: reduce) {
  .sm-sun-rays,
  .sm-wave {
    animation: none;
  }

  .sm-bubble {
    display: none;
  }
}

/* ----- 1b. Stats strip: just the numbers, small and flat (sits in the hero, under the role chips) ----- */
.stats-strip {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-1) var(--space-5);
  margin: 0;
  padding: var(--space-2) 0;
  border-top: 1px solid rgba(var(--rgb-silver), 0.15);
  border-bottom: 1px solid rgba(var(--rgb-silver), 0.15);
  list-style: none;
}

.stat {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
}

.stat-number {
  font-family: var(--font-display);
  font-size: 1.6rem;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

.stat-label {
  color: var(--color-text-muted);
  font-size: 0.85rem;
  font-weight: 600;
}


/* ==========================================================
   LOGO ONLY
   The logo stands alone: no "Bcraft Designs" text next to it in the
   header or the footer (this also covers pages whose markup still has it).
   ========================================================== */
.site-logo-text,
.footer-brand > span {
  display: none;
}


/* ==========================================================
   FEATURED WORK GRID (homepage)
   A six-column grid: landscape pieces take two columns, the square
   pieces (Game Icons, Renders) take one, so they sit small beside them.
   ========================================================== */
.work-grid.portfolio-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-flow: dense;
  align-items: start;
  gap: var(--space-4) var(--space-3);
  columns: auto;
}

.work-grid .portfolio-item {
  grid-column: span 2;
  margin: 0;
}

.work-grid .portfolio-item[data-shape="square"] {
  grid-column: span 1;
}

@media (min-width: 640px) {
  .work-grid.portfolio-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (min-width: 960px) {
  .work-grid.portfolio-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }

  /* Only landscape pieces: two wide columns, as before */
  .work-grid.portfolio-grid[data-layout="landscape"] .portfolio-item {
    grid-column: span 3;
  }
}

/* Only square pieces: two per row on phones, three on larger screens */
@media (min-width: 640px) {
  .work-grid.portfolio-grid[data-layout="square"] .portfolio-item {
    grid-column: span 2;
  }
}

/* The hover label does not fit on the small square pieces */
.work-grid .portfolio-item[data-shape="square"] .portfolio-art::after {
  right: 0.5rem;
  bottom: 0.5rem;
  padding: 0.2rem 0.6rem 0.24rem;
  font-size: 0.7rem;
}


/* ==========================================================
   VIEW ALL WORK (under Featured Work)
   A full blue button with a glow instead of the quiet outline.
   ========================================================== */
.work-footer .work-all-button {
  gap: 0.6rem;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.28),
    0 0 0 1px rgba(var(--rgb-blue), 0.4),
    0 10px 30px -8px rgba(37, 118, 242, 0.8),
    0 0 40px -6px rgba(var(--rgb-blue), 0.45);
}

.work-footer .work-all-button svg {
  transition: transform 0.18s var(--spring);
}

.work-footer .work-all-button:hover svg,
.work-footer .work-all-button:focus-visible svg {
  transform: translateX(3px);
}

.work-footer-rule {
  border-top-color: rgba(var(--rgb-blue), 0.3);
}


/* ==========================================================
   SEASONAL EXTRAS
   Pumpkins (Halloween), Santa hats (Christmas) and beach balls (Summer)
   on a few buttons, plus a small decor strip in the Work menu.
   Built by script.js; nothing here can be clicked.
   ========================================================== */
.season-badge {
  position: absolute;
  top: -15px;
  z-index: 3;
  width: 30px;
  height: 30px;
  pointer-events: none;
  filter: drop-shadow(0 3px 5px rgba(0, 0, 0, 0.45));
}

.season-badge.is-right {
  right: -8px;
  transform: rotate(14deg);
}

.season-badge.is-left {
  left: -8px;
  transform: rotate(-14deg);
}

.season-badge--christmas {
  top: -19px;
  width: 36px;
  height: 36px;
}

.season-badge svg {
  display: block;
  width: 100%;
  height: 100%;
}

/* Buttons with a decoration must not clip it. Their light sweep moves
   inside the button instead of sliding past its edge. */
.button.has-season {
  overflow: visible;
}

.button.has-season::after {
  border-radius: inherit;
  background-repeat: no-repeat;
  background-size: 300% 100%;
  background-position: 0 0;
  transform: none;
}

.button.has-season:hover::after,
.button.has-season:focus-visible::after {
  transform: none;
  background-position: 100% 0;
  transition: background-position 0.7s cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* ----- Work menu decor: top right, away from the links and the banner ----- */
.mega-decor {
  position: absolute;
  top: 0.45rem;
  right: 0.9rem;
  z-index: 1;
  width: 9.5rem;
  height: 2.9rem;
  pointer-events: none;
}

.mega-decor-item,
.mega-decor-sun,
.mega-decor-dot,
.mega-decor-web {
  position: absolute;
}

.mega-decor-item {
  right: 0;
  bottom: 0;
  width: 2.5rem;
  height: 2.5rem;
  transform: rotate(8deg);
  filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.45));
}

.mega-decor-item svg {
  display: block;
  width: 100%;
  height: 100%;
}

.mega-decor-item--small {
  right: 3rem;
  width: 1.7rem;
  height: 1.7rem;
  transform: rotate(-10deg);
}

/* Halloween: a cobweb in the corner behind the pumpkins */
.mega-decor-web {
  top: -0.45rem;
  right: -0.9rem;
  width: 5.6rem;
  height: 5.6rem;
  opacity: 0.55;
  transform: scaleX(-1);
  -webkit-mask-image: radial-gradient(circle at 100% 0, #000 30%, transparent 98%);
          mask-image: radial-gradient(circle at 100% 0, #000 30%, transparent 98%);
}

.mega-decor-web path {
  fill: none;
  stroke: rgba(var(--rgb-silver), 0.7);
  stroke-width: 0.9;
  stroke-linecap: round;
}

/* Christmas: tiny snow dots */
.mega-decor-dot {
  left: var(--x);
  top: var(--y);
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.85);
  box-shadow: 0 0 8px rgba(255, 255, 255, 0.6);
}

/* Summer: a warm glow behind the beach balls */
.mega-decor-sun {
  top: -1.2rem;
  right: -1.2rem;
  width: 6rem;
  height: 6rem;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 196, 61, 0.28), rgba(255, 196, 61, 0) 68%);
}


/* ==========================================================
   SEASON DECOR ON EVERY PAGE
   The decorations sit in the top section of each page (hero, page hero,
   about hero, contact hero). The content stays above them.
   ========================================================== */
.has-halloween,
.has-christmas,
.has-summer {
  position: relative;
}

.has-halloween > .container,
.has-christmas > .container,
.has-summer > .container,
.has-halloween > .about-hero-inner,
.has-christmas > .about-hero-inner,
.has-summer > .about-hero-inner {
  position: relative;
  z-index: 1;
}


/* ==========================================================
   HALLOWEEN GHOSTS
   Pale ghosts that fade in, drift sideways and fade out. Also one small
   ghost in the Work menu.
   ========================================================== */
.hw-ghost {
  position: absolute;
  left: var(--x, 10%);
  top: var(--y, 50%);
  width: var(--size, 50px);
  opacity: 0;
  animation: hw-ghost var(--dur, 20s) ease-in-out var(--delay, 0s) infinite;
  will-change: transform, opacity;
}

.hw-ghost-bob {
  display: block;
  animation: hw-ghost-bob 3.2s ease-in-out infinite alternate;
}

.hw-ghost svg,
.mega-decor-ghost svg {
  display: block;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 0 10px rgba(190, 215, 255, 0.45));
}

.hw-ghost-body {
  fill: rgba(236, 243, 255, 0.92);
}

.hw-ghost-face {
  fill: #0b0f1d;
}

@keyframes hw-ghost {
  0%   { opacity: 0; transform: translate(0, 0); }
  12%  { opacity: 0.8; }
  50%  { transform: translate(calc(var(--s, 1) * 70px), -34px); }
  88%  { opacity: 0.8; }
  100% { opacity: 0; transform: translate(calc(var(--s, 1) * 140px), 8px); }
}

@keyframes hw-ghost-bob {
  from { transform: translateY(-7px); }
  to { transform: translateY(7px); }
}

.mega-decor-ghost {
  opacity: 0.9;
}

@media (max-width: 760px) {
  .hw-ghost {
    --size: 36px;
  }
}


/* ==========================================================
   TOP BAR
   The bar fits the content width and has a fine rounded corner on all
   four corners, so there is no empty strip left and right of it.
   ========================================================== */
.site-header::before {
  top: 0.4rem;
  bottom: 0.4rem;
  left: max(0.5rem, calc((100% - var(--container-width)) / 2));
  right: max(0.5rem, calc((100% - var(--container-width)) / 2));
  border: 1px solid rgba(var(--rgb-blue), 0.16);
  border-radius: 14px;
}


/* ==========================================================
   FEATURED WORK CAPTIONS (homepage) + PORTFOLIO CAPTIONS (work.html)
   Only the text, no frame and no little shape.
   ========================================================== */
.work-grid .portfolio-caption .tag,
.portfolio .portfolio-caption .tag {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  color: var(--color-text);
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.work-grid .portfolio-caption .tag::before,
.portfolio .portfolio-caption .tag::before {
  display: none;
}


/* ==========================================================
   SEASON DECOR: starts at the very top of the page
   The decoration now reaches up behind the top bar (it used to start
   under it) and fades out towards the bottom, so there is no hard colour
   edge where the next section begins.
   ========================================================== */
.hw-decor,
.xm-decor,
.sm-decor {
  top: calc(var(--header-height) * -1);
  -webkit-mask-image: linear-gradient(to bottom, #000 0, #000 55%, transparent 100%);
          mask-image: linear-gradient(to bottom, #000 0, #000 55%, transparent 100%);
}


/* ==========================================================
   CHRISTMAS: pine garland (replaces the string of lights)
   ========================================================== */
.xm-garland {
  position: absolute;
  top: calc(var(--header-height) - 0.5rem);
  left: -1%;
  right: -1%;
  display: flex;
  height: 64px;
  filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.35));
}

.xm-pine {
  position: relative;
  flex: 1 1 0;
  height: 100%;
}

.xm-pine svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.xm-pine path {
  fill: none;
  stroke-linecap: round;
  stroke-width: 2.2px;
}

@media (max-width: 760px) {
  .xm-pine:nth-child(n+5) {
    display: none;
  }
}


/* ==========================================================
   SCROLL PROGRESS AND BACK-TO-TOP
   ========================================================== */
.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  height: 3px;
  pointer-events: none;
}

.scroll-progress span {
  display: block;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, var(--color-orange), var(--color-orange-bright));
  box-shadow: 0 0 10px rgba(var(--rgb-orange), 0.7);
  transform: scaleX(0);
  transform-origin: 0 50%;
  will-change: transform;
}

.to-top {
  position: fixed;
  left: 1.25rem;
  bottom: 1.25rem;
  z-index: 90;
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  padding: 3px;
  border: 0;
  border-radius: 50%;
  /* The ring around the button fills as you scroll */
  background: conic-gradient(var(--color-orange-bright) calc(var(--p, 0) * 360deg), rgba(var(--rgb-orange), 0.25) 0);
  color: var(--color-orange-bright);
  cursor: pointer;
  box-shadow: 0 12px 26px -10px rgba(0, 0, 0, 0.9), 0 0 22px -8px rgba(var(--rgb-orange), 0.6);
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px) scale(0.9);
  transition: opacity 0.25s ease, transform 0.25s ease, visibility 0s linear 0.25s;
}

.to-top.is-visible {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition-delay: 0s;
}

.to-top-inner {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background-color: #0b1327;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.to-top:hover .to-top-inner,
.to-top:focus-visible .to-top-inner {
  background-color: var(--color-orange);
  color: var(--color-orange-ink);
}

.to-top:focus-visible {
  outline: 2px solid var(--color-orange-bright);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  .to-top {
    transition: none;
  }
}


/* ==========================================================
   WORK MENU: the rows slide up one after another when the menu opens.
   (The extra hover effects that used to be here, an accent bar and glow,
   a spinning icon and text / arrow slides, were removed so hover stays quiet.)
   ========================================================== */
@media (min-width: 861px) {
  /* rows and banner appear together with the panel: no staggered delay */
}

@keyframes mega-row-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}

/* "Need something custom?" sits on the bottom line of the footer row */
.mega-foot {
  align-items: flex-end;
}

.mega-aside {
  padding-bottom: 0.1rem;
}

@media (prefers-reduced-motion: reduce) {
  .mega-work.is-open .mega-link,
  .mega-work.is-open .mega-banner,
  .mega-work.is-open .mega-foot {
    animation: none;
  }
}


/* ==========================================================
   FEATURED WORK: the square pieces are as tall as their neighbours
   ========================================================== */
.work-grid.portfolio-grid {
  align-items: stretch;
}

.work-grid .portfolio-item {
  display: flex;
  flex-direction: column;
}

.work-grid .portfolio-item[data-shape="square"] .portfolio-art {
  flex: 1 1 auto;
}


/* ==========================================================
   HERO: INTERACTIVE FEATURED PIECE
   ========================================================== */
.hero-fx {
  position: absolute;
  inset: -4% -3%;
  z-index: 0;
  pointer-events: none;
}

.hero-fx-glow {
  position: absolute;
  inset: 8% 4% 0 10%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(var(--rgb-blue), 0.32), transparent 72%);
  filter: blur(18px);
  animation: hero-glow 6s ease-in-out infinite alternate;
}

.hero-fx-item {
  position: absolute;
  z-index: 4;
  display: block;
  animation: hero-float var(--dur, 6s) ease-in-out infinite alternate;
  transform: translate3d(calc(var(--mx, 0) * var(--depth, 14px)), calc(var(--my, 0) * var(--depth, 14px)), 0);
}

.hero-fx-star {
  top: 2%;
  left: 6%;
  width: 26px;
  height: 26px;
  fill: var(--color-orange);
  filter: drop-shadow(0 0 8px rgba(var(--rgb-orange), 0.7));
  --depth: -22px;
  --dur: 5s;
}

.hero-fx-star--small {
  top: auto;
  left: auto;
  right: 2%;
  bottom: 14%;
  width: 16px;
  height: 16px;
  fill: #fff;
  filter: drop-shadow(0 0 7px rgba(255, 255, 255, 0.8));
  --depth: 26px;
  --dur: 4.2s;
}

.hero-fx-diamond {
  top: 40%;
  right: -1%;
  width: 22px;
  height: 22px;
  fill: rgba(var(--rgb-blue), 0.9);
  filter: drop-shadow(0 0 8px rgba(var(--rgb-blue), 0.8));
  --depth: 30px;
  --dur: 7s;
}

.hero-fx-brick {
  bottom: 4%;
  left: 47%;
  width: 20px;
  height: 20px;
  border: 2px solid rgba(var(--rgb-blue), 0.8);
  border-radius: 5px;
  box-shadow: 0 0 12px rgba(var(--rgb-blue), 0.5), inset 0 0 8px rgba(var(--rgb-blue), 0.4);
  --depth: -30px;
  --dur: 6.4s;
}

.hero-fx-dot {
  top: 20%;
  left: 0;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: var(--color-orange-bright);
  box-shadow: 0 0 12px rgba(var(--rgb-orange), 0.8);
  --depth: 18px;
  --dur: 4.8s;
}

/* PERF: was animating margin-top (a layout property, re-laid-out every frame).
   `translate` gives the same +/-7px movement on the GPU and still combines
   with the parallax `transform` set on .hero-fx-item. */
@keyframes hero-float {
  from { translate: 0 -7px; rotate: -6deg; }
  to   { translate: 0 7px;  rotate: 8deg; }
}

/* These two are anchored with bottom (top: auto), so the old margin-top
   motion never moved them. They keep their tilt only, exactly as before. */
@keyframes hero-float-tilt {
  from { rotate: -6deg; }
  to   { rotate: 8deg; }
}
.hero-fx-star--small,
.hero-fx-brick {
  animation-name: hero-float-tilt;
}

/* PERF: script.js adds .is-offscreen to the looping decorations while they
   are outside the viewport, so they stop animating when nobody can see them. */
.is-offscreen {
  animation-play-state: paused !important;
}

@keyframes hero-glow {
  from { opacity: 0.55; transform: scale(0.96); }
  to   { opacity: 1; transform: scale(1.04); }
}

.hero-art-main .hero-art-frame {
  box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.9), 0 0 0 0 rgba(var(--rgb-blue), 0);
  transition: box-shadow 0.3s ease, border-color 0.3s ease;
}

@media (hover: hover) {
  .hero-art-main {
    cursor: pointer;
  }

  .hero-art-main:hover .hero-art-frame {
    border-color: rgba(134, 197, 255, 0.5);
  }

  .hero-art-main:hover .hero-sticker {
    animation: sticker-wobble 0.7s ease;
  }
}

.hero-art-main .hero-sticker {
  transition: transform 0.2s ease;
}

@keyframes sticker-wobble {
  0%, 100% { transform: rotate(4deg) scale(1); }
  25% { transform: rotate(-6deg) scale(1.12); }
  60% { transform: rotate(9deg) scale(1.08); }
}

/* Small screens: only the glow, the shapes stay out of the way */
@media (max-width: 639px) {
  .hero-fx-item {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-fx-item,
  .hero-fx-glow {
    animation: none;
  }

  .hero-art-main {
    transition: none;
  }
}


/* ==========================================================
   HERO: thumbnails sit further to the right
   More room for the headline (and the orange dot after it) on the left.
   ========================================================== */
@media (min-width: 960px) {
  .hero-visual {
    justify-self: end;
    width: 92%;
    margin-right: calc(var(--container-padding) * -1);
  }

  /* The floating shapes stay above the card, away from the headline */
  .hero-fx-dot {
    top: 0;
    left: 36%;
  }

  .hero-fx-star {
    left: 20%;
  }
}

@media (min-width: 1280px) {
  .hero-visual {
    width: 94%;
    margin-right: -3.5rem;
  }
}


/* ==========================================================
   HERO HEADLINE: the orange dot stays right after "out"
   The text column got narrower, so the dot dropped onto its own line.
   Each headline line now stays on one line on desktop.
   ========================================================== */
@media (min-width: 960px) {
  .hero-line {
    white-space: nowrap;
  }
}


/* ==========================================================
   FEATURED WORK: the two square (1000 x 1000) previews
   They used to be stretched to the height of their neighbours (so
   cropped into tall rectangles). Now they are true squares, as tall
   as the 16:9 pieces next to them. For that the grid is a little wider
   than the page column (the 16:9 pieces keep their size), and the row
   of three 16:9 pieces stays centered. Phones are unchanged.
   Sizes: square = 9/16 of a wide piece, so heights always match.
   ========================================================== */
@media (min-width: 640px) {
  .work-grid.portfolio-grid[data-layout="mixed"] {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-start;
    margin-inline: calc(var(--container-padding) * -0.6);
    --work-unit: calc(100% - 2 * var(--space-3));
  }

  .work-grid.portfolio-grid[data-layout="mixed"] .portfolio-item {
    flex: 0 0 auto;
    width: calc(var(--work-unit) * 0.4705);
  }

  .work-grid.portfolio-grid[data-layout="mixed"] .portfolio-item[data-shape="square"] {
    width: calc(var(--work-unit) * 0.2646);
  }

  .work-grid.portfolio-grid[data-layout="mixed"] .portfolio-item[data-shape="square"] .portfolio-art {
    flex: 0 0 auto;
  }
}

@media (min-width: 960px) {
  .work-grid.portfolio-grid[data-layout="mixed"] {
    margin-inline: calc(var(--container-padding) * -0.5);
    --work-unit: calc(100% - 3 * var(--space-3));
  }

  .work-grid.portfolio-grid[data-layout="mixed"] .portfolio-item {
    width: calc(var(--work-unit) * 0.3199);
  }

  .work-grid.portfolio-grid[data-layout="mixed"] .portfolio-item[data-shape="square"] {
    width: calc(var(--work-unit) * 0.1799);
  }
}

/* Full page column (1200px and up): there is room for the full extra width */
@media (min-width: 1200px) {
  .work-grid.portfolio-grid[data-layout="mixed"] {
    margin-inline: calc(var(--container-padding) * -0.85);
  }
}


/* ==========================================================
   PERFORMANCE
   The fixed background (grid, glow, grain) lives on its own layer
   and is isolated, so scrolling the page never repaints it.
   ========================================================== */
.site-background {
  contain: layout paint style;
  transform: translateZ(0);
}

/* ==========================================================================
   PRICING PAGE: hero, availability strip, product catalogue, custom requests
   (all classes start with pc-; uses the existing colour tokens)
   ========================================================================== */

.pc-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: var(--space-2);
  color: var(--color-accent-bright);
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.pc-eyebrow::before {
  content: "";
  width: 0.55rem;
  height: 0.55rem;
  background-color: var(--color-orange);
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
}

.pc-hero .page-title {
  max-width: 14ch;
}

.pc-hero .page-title::after {
  display: none;
}

/* The same small orange block the site uses after its big headings */
.pc-dot {
  display: inline-block;
  width: 0.15em;
  height: 0.15em;
  margin-left: 0.07em;
  border-radius: 0.03em;
  background-color: var(--color-orange);
  transform: rotate(12deg);
}

.pc-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

/* ----- Availability strip ----- */
.pc-status-strip {
  padding: var(--space-2) 0 var(--space-3);
}

.pc-status {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.8rem;
  padding: 0.75rem 1.1rem;
  border: 1px solid rgba(var(--rgb-silver), 0.18);
  border-radius: 999px;
  background-color: rgba(var(--rgb-silver), 0.05);
  font-size: 0.95rem;
}

.pc-status-dot {
  flex: none;
  width: 0.6rem;
  height: 0.6rem;
  border-radius: 50%;
  background-color: var(--color-silver);
}

.pc-status[data-status="open"] .pc-status-dot {
  position: relative;
  width: 1.15rem;
  height: 1.15rem;
  background-color: var(--color-accent);
  box-shadow: 0 0 10px var(--color-accent-glow);
}

/* The check mark inside the open status dot */
.pc-status[data-status="open"] .pc-status-dot::after {
  content: "";
  position: absolute;
  top: 46%;
  left: 50%;
  width: 0.28rem;
  height: 0.52rem;
  border: solid var(--color-accent-dark-text);
  border-width: 0 2px 2px 0;
  transform: translate(-50%, -55%) rotate(45deg);
}
.pc-status[data-status="limited"] .pc-status-dot { background-color: var(--color-orange); }
.pc-status[data-status="closed"] .pc-status-dot { background-color: var(--color-text-muted); }

.pc-status-label {
  color: var(--color-text);
  font-weight: 700;
}

.pc-status-text {
  color: var(--color-text-muted);
}

/* ----- Product carousel (looping) ----- */
.pc-catalogue {
  --pc-w: min(76vw, 400px);
  --pc-gap: 16px;
  padding: var(--space-3) 0 var(--space-4);
  scroll-margin-top: var(--header-height);
}

.pc-carousel {
  position: relative;
  padding-bottom: var(--space-2);
  --pc-gap: 16px;
}

/* All slides sit in the same grid cell; script.js slides them left and right.
   The row is only as tall as the tallest slide. */
.pc-viewport {
  display: grid;
  justify-items: center;
  align-items: center;
  padding: 2.75rem 0 2.75rem;   /* room for the glow of the two premium cards (overflow clips it) */
  overflow: hidden;
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
}

.pc-viewport:focus-visible {
  outline-offset: -4px;
}

.pc-slide {
  grid-area: 1 / 1;
  display: flex;
  flex-direction: column;
  width: var(--pc-w);
  min-width: 0;
  overflow: hidden;
  isolation: isolate;
  border: 1px solid rgba(var(--rgb-blue), 0.18);
  border-radius: 20px;
  background-color: var(--color-surface);
  box-shadow: 0 24px 50px -30px rgba(0, 0, 0, 0.9);
  cursor: pointer;
}

/* No sliding until the first layout is done, and none while a finger is dragging */
.pc-carousel.is-ready .pc-slide {
  transition: transform 0.35s cubic-bezier(0.22, 0.8, 0.3, 1), opacity 0.3s ease, border-color 0.2s ease, box-shadow 0.25s ease;
}

.pc-carousel.is-dragging .pc-slide {
  transition: none;
  cursor: grabbing;
}

.pc-slide[data-far] {
  visibility: hidden;
  pointer-events: none;
}

/* Premium touch for the two Popular products: gradient edge, soft glow, one light sweep, ice-white price */
.pc-slide.is-featured {
  border: 1px solid transparent;
  background:
    radial-gradient(ellipse 80% 45% at 50% 0%, rgba(var(--rgb-blue), 0.16), transparent 70%) padding-box,
    linear-gradient(var(--color-surface), var(--color-surface)) padding-box,
    linear-gradient(140deg, var(--color-accent-bright), rgba(var(--rgb-silver), 0.35) 38%, rgba(var(--rgb-blue), 0.6) 62%, var(--color-orange) 100%) border-box;
}

.pc-slide.is-featured .pc-price-amount {
  background: linear-gradient(180deg, #ffffff, var(--color-accent-bright));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.pc-slide.is-featured .pc-badge {
  box-shadow: 0 0 18px -2px rgba(var(--rgb-orange), 0.7);
}

.pc-stage::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  z-index: 1;
  width: 40%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.16), transparent);
  opacity: 0;
  pointer-events: none;
  transform: translateX(-130%) skewX(-18deg);
}

.pc-slide.is-featured.is-active .pc-stage::after {
  animation: pc-sheen 1.3s 0.2s ease-out 1 both;
}

@keyframes pc-sheen {
  0%   { opacity: 0; transform: translateX(-130%) skewX(-18deg); }
  15%  { opacity: 1; }
  100% { opacity: 0; transform: translateX(330%) skewX(-18deg); }
}

.pc-slide.is-active {
  cursor: default;
}

.pc-slide:not(.is-featured).is-active {
  border-color: rgba(var(--rgb-blue), 0.5);
}

.pc-slide.is-featured.is-active {
  box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.95), 0 0 52px -12px var(--color-accent-glow), 0 0 28px -16px rgba(var(--rgb-orange), 0.55);
}

/* Stage: a 16:9 frame. Each artwork keeps its own ratio inside it and is never stretched. */
.pc-stage {
  position: relative;
  flex: none;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 100%, rgba(var(--rgb-blue), 0.16), transparent 65%),
    var(--color-surface-raised);
}

.pc-art {
  position: absolute;
  overflow: hidden;
  background-color: var(--color-surface);
}

/* Wide artwork fills the whole frame. Only the 1000x1000 products
   (Renders, Profile Pictures, Game Icons) stay square and centred. */
.pc-art.r-wide,
.pc-art.r-43 {
  inset: 0;
}

.pc-art.r-square {
  top: 0.8rem;
  bottom: 0.8rem;
  left: 50%;
  aspect-ratio: 1 / 1;
  border-radius: 10px;
  box-shadow: 0 16px 32px -20px rgba(0, 0, 0, 0.9);
  transform: translateX(-50%);
}

/* Artwork that is not 16:9 is shown at its real shape, centred (set by the script on the pricing page) */
.pc-art.is-fit-tall,
.pc-art.is-fit-wide {
  top: 50%;
  left: 50%;
  z-index: 1;
  border-radius: 10px;
  box-shadow: 0 16px 32px -20px rgba(0, 0, 0, 0.9);
  transform: translate(-50%, -50%);
}

.pc-art.is-fit-tall {
  height: calc(100% - 1.6rem);
}

.pc-art.is-fit-wide {
  width: calc(100% - 1.6rem);
}

.pc-art .work-placeholder-label { font-size: 1rem; }
.pc-art .work-placeholder { padding-bottom: 1.2rem; }
.pc-art .work-placeholder-path { font-size: 0.7rem; }
.pc-art.has-art .work-placeholder { display: none; }

.pc-badge {
  position: absolute;
  top: 0.75rem;
  left: 0.75rem;
  z-index: 2;
  padding: 0.12rem 0.7rem;
  border-radius: 999px;
  background-color: var(--color-orange);
  color: var(--color-orange-ink);
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.12em;
}

/* Small tag over the artwork (Renders: bulk discount note) */
.pc-price-note {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  z-index: 2;
  max-width: 65%;
  white-space: normal;
  background-color: rgba(6, 10, 20, 0.85);
}

.pc-price-note::before {
  display: none;
}

.pc-price-note[hidden],
.pc-price-robux[hidden] {
  display: none;
}

.pc-body {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  padding: 1rem 1.2rem 1.2rem;
}

.pc-name {
  min-height: 2.2em;
  color: var(--color-text);
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.035em;
}

.pc-desc {
  min-height: 4.4em;
  color: var(--color-text-muted);
  font-size: 0.93rem;
  line-height: 1.5;
}

.pc-buy {
  margin-top: auto;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 0.75rem;
}

.pc-price {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  margin: 0;
}

.pc-price-amount {
  color: var(--color-text);
  font-family: var(--font-display);
  font-size: 1.75rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.04em;
}

.pc-price-amount.is-unset {
  color: var(--color-silver);
  font-size: 1.05rem;
  letter-spacing: -0.02em;
}

.pc-price-robux {
  color: var(--color-orange);
  font-size: 0.95rem;
  font-weight: 700;
}

.pc-button {
  flex: none;
  gap: 0.45rem;
}

.pc-arrow {
  flex: none;
  transition: transform 0.2s var(--spring);
}

.pc-button:hover .pc-arrow,
.pc-button:focus-visible .pc-arrow {
  transform: translateX(3px);
}

@media (hover: hover) {
  .pc-slide:not(.is-featured).is-active:hover {
    border-color: rgba(var(--rgb-blue), 0.85);
  }
}

/* Arrows + position */
.pc-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.1rem;
}

.pc-nav {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  border: 1px solid rgba(var(--rgb-blue), 0.4);
  border-radius: 50%;
  background-color: rgba(var(--rgb-blue), 0.1);
  color: var(--color-accent-bright);
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease, transform 0.18s var(--spring);
}

.pc-nav:hover {
  border-color: var(--color-accent);
  background-color: rgba(var(--rgb-blue), 0.22);
  transform: scale(1.06);
}

/* Fixed width so the number never makes the arrows move */
.pc-count {
  width: 4.5rem;
  color: var(--color-text-muted);
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 700;
  text-align: center;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.pc-pos {
  display: inline-block;
  min-width: 1ch;
  color: var(--color-orange);
}

/* Product selectors: dots on small screens, named chips on larger ones */
.pc-chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.6rem;
  max-width: 62rem;
  margin: var(--space-2) auto 0;
  padding: 0 var(--container-padding);
}

.pc-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 0.85rem;
  height: 0.85rem;
  padding: 0;
  border: 1px solid rgba(var(--rgb-silver), 0.4);
  border-radius: 999px;
  background-color: transparent;
  color: var(--color-text-muted);
  font: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.pc-chip.is-featured {
  border-color: rgba(var(--rgb-orange), 0.7);
}

.pc-chip[aria-current="true"] {
  border-color: var(--color-accent);
  background-color: var(--color-accent);
}

.pc-chip-label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

@media (min-width: 760px) {
  .pc-chip {
    width: auto;
    height: auto;
    padding: 0.35rem 0.95rem;
  }

  .pc-chip:hover {
    border-color: var(--color-accent);
    color: var(--color-text);
  }

  .pc-chip[aria-current="true"] {
    color: var(--color-accent-dark-text);
  }

  .pc-chip-label {
    position: static;
    width: auto;
    height: auto;
    overflow: visible;
    clip: auto;
  }
}

@media (min-width: 760px) {
  .pc-catalogue {
    --pc-w: 400px;
  }

  .pc-carousel {
    --pc-gap: 22px;
  }
}

/* ----- Custom requests ----- */
.pc-custom {
  padding: var(--space-4) 0 var(--space-3);
}

.pc-custom-panel {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-4);
  border: 1px dashed rgba(var(--rgb-silver), 0.34);
  border-radius: 20px 6px 20px 6px;
  background:
    radial-gradient(ellipse 60% 120% at 0% 0%, rgba(var(--rgb-blue), 0.1), transparent 70%),
    var(--color-surface);
}

.pc-custom-title {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 3.6vw, 2.3rem);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.035em;
}

.pc-custom-text {
  max-width: 34rem;
  margin-top: 0.5rem;
  color: var(--color-text-muted);
  font-size: 1.05rem;
}

.pc-custom-panel .button {
  gap: 0.5rem;
}

@media (max-width: 639px) {
  .pc-custom-panel { padding: var(--space-3); }
  .pc-actions .button { flex: 1 1 100%; justify-content: center; }
  .pc-button { align-self: stretch; justify-content: center; }
}

/* ----- How It Works: four steps (uses the existing .process styles) ----- */
.process-steps-4 {
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 960px) {
  .process-steps-4 {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* ----- Pricing page: Payment Methods (compact, reuses the .payments / .pay-card styles) ----- */
.payments-compact {
  padding: var(--space-3) 0 var(--space-4);
}

/* No render beside the cards here, so the panel is a single column at every width */
/* No frame: no border, background, shadow or padding, so it lines up with the other sections */
.payments-panel.payments-panel-solo {
  position: relative;
  grid-template-columns: 1fr;
  gap: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
}

.payments-content {
  min-width: 0;
}

@media (min-width: 820px) {
  .payments-panel.payments-panel-solo {
    grid-template-columns: 1fr;
    padding: 0;
  }
}

/* ----- Pricing page: FAQ accordion ----- */
.faq {
  padding: var(--space-4) 0 var(--space-5);
}

/* Centered heading and list */
.faq .section-head {
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  text-align: center;
}

.faq .services-lead {
  margin: 0 auto;
  text-align: center;
}

.faq-list {
  display: grid;
  gap: 0.75rem;
  max-width: 56rem;
  margin: 0 auto;
}

.faq-item {
  border: 1px solid rgba(var(--rgb-blue), 0.18);
  border-radius: 16px;
  background: var(--color-surface);
  transition: border-color 0.2s ease, box-shadow 0.3s ease;
}

.faq-item:hover {
  border-color: rgba(var(--rgb-blue), 0.4);
}

.faq-item.is-open {
  border-color: rgba(var(--rgb-blue), 0.55);
  box-shadow: 0 0 28px -16px var(--color-accent-glow);
}

.faq-q {
  margin: 0;
  font-size: inherit;
}

.faq-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  width: 100%;
  min-height: 3.5rem;
  padding: 0.9rem 1.1rem;
  border: 0;
  border-radius: 15px;
  background: transparent;
  color: var(--color-text);
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.01em;
  text-align: left;
  cursor: pointer;
}

.faq-trigger:focus-visible {
  outline: 2px solid var(--color-accent-bright);
  outline-offset: 2px;
}

/* Simple arrow: points down, turns to point up when the answer is open */
.faq-icon {
  position: relative;
  flex: none;
  width: 1.9rem;
  height: 1.9rem;
}

.faq-icon::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0.6rem;
  height: 0.6rem;
  border-right: 2px solid var(--color-accent-bright);
  border-bottom: 2px solid var(--color-accent-bright);
  transform: translate(-50%, -70%) rotate(45deg);
  transition: transform 0.25s ease, border-color 0.2s ease;
}

.faq-item.is-open .faq-icon::before {
  transform: translate(-50%, -30%) rotate(-135deg);
}

.faq-answer {
  padding: 0 1.1rem 1.1rem;
  color: var(--color-text-muted);
  font-size: 1rem;
  line-height: 1.6;
}

.faq-answer a {
  color: var(--color-accent-bright);
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

.faq-answer a:hover {
  color: var(--color-text);
}

.faq-answer a:focus-visible {
  outline: 2px solid var(--color-accent-bright);
  outline-offset: 2px;
  border-radius: 3px;
}

/* Collapsing only starts once the inline script on pricing.html adds .is-ready (answers show without it) */
.faq-list.is-ready .faq-panel {
  display: grid;
  grid-template-rows: 0fr;
  visibility: hidden;
  transition: grid-template-rows 0.3s ease, visibility 0s linear 0.3s;
}

.faq-list.is-ready .faq-item.is-open .faq-panel {
  grid-template-rows: 1fr;
  visibility: visible;
  transition: grid-template-rows 0.3s ease, visibility 0s;
}

.faq-list.is-ready .faq-panel-inner {
  min-height: 0;
  overflow: hidden;
}

@media (max-width: 639px) {
  .faq-trigger {
    padding: 0.85rem 1rem;
    font-size: 1rem;
  }

  .faq-answer {
    padding: 0 1rem 1rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .faq-item,
  .faq-icon,
  .faq-icon::before,
  .faq-list.is-ready .faq-panel,
  .faq-list.is-ready .faq-item.is-open .faq-panel {
    transition: none;
  }
}

/* ----- Pricing page: Payment Methods, five informational cards (builds on the .pay-card styles) ----- */
.payments-compact .pay-grid {
  grid-template-columns: 1fr;
  gap: 0.75rem;
  margin-top: var(--space-3);
}

.payments-compact .pay-card {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.8rem;
  border: 1px solid rgba(var(--rgb-blue), 0.16);
  border-radius: 16px;
  background-color: rgba(15, 24, 51, 0.6);
  transition: transform 0.2s ease, border-color 0.2s ease, background-color 0.2s ease;
}

.payments-compact .pay-card:hover {
  border-color: rgba(var(--rgb-blue), 0.5);
  background-color: rgba(var(--rgb-blue), 0.08);
  transform: translateY(-3px);
}

/* Robux and PayPal get a little more presence */
.payments-compact .pay-card--featured {
  border-color: rgba(var(--rgb-blue), 0.38);
  background:
    radial-gradient(ellipse 70% 120% at 0% 50%, rgba(var(--rgb-blue), 0.14), transparent 70%),
    rgba(15, 24, 51, 0.7);
  box-shadow: 0 0 28px -16px var(--color-accent-glow);
}

.payments-compact .pay-card-stage {
  flex: none;
  width: 6.5rem;
}

.payments-compact .pay-card--featured .pay-card-stage {
  width: 7.5rem;
}

/* One calm navy face for all five, with a plain text mark (no logos are recreated) */
.payments-compact .pay-card-face {
  --c1: #1c3256;
  --c2: #0c1630;
}

.payments-compact .pay-card--featured .pay-card-face {
  --c1: #24498a;
  --c2: #0e2250;
  border-color: rgba(var(--rgb-blue), 0.4);
}

.payments-compact .pay-card-bg::before,
.payments-compact .pay-card-bg::after {
  display: none;
}

.payments-compact .pay-card-mark {
  inset: 0;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  font-size: 15cqw;
  font-style: normal;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-align: center;
  transform: none;
}

.payments-compact .pay-card--gift .pay-card-mark {
  font-size: 1rem;
  font-size: 12cqw;
}

.payments-compact .pay-card-caption {
  display: block;
  min-width: 0;
  margin: 0;
}

.payments-compact .pay-card-name {
  margin: 0;
  font-size: 1.05rem;
}

.payments-compact .pay-card--featured .pay-card-name {
  font-size: 1.2rem;
}

.pay-card-desc {
  margin-top: 0.25rem;
  color: var(--color-text-muted);
  font-size: 0.9rem;
  line-height: 1.4;
}

.pay-card-desc a,
.payments-note a {
  color: var(--color-accent-bright);
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

.pay-card-desc a:hover,
.payments-note a:hover {
  color: var(--color-text);
}

.pay-card-desc a:focus-visible,
.payments-note a:focus-visible {
  outline: 2px solid var(--color-accent-bright);
  outline-offset: 2px;
  border-radius: 3px;
}

.payments-note {
  margin-top: var(--space-3);
  color: var(--color-text-muted);
  font-size: 0.95rem;
}

@media (min-width: 700px) {
  .payments-compact .pay-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .payments-compact .pay-card:last-child {
    grid-column: 1 / -1;
  }

  .payments-compact .pay-card-stage {
    width: 7.5rem;
  }

  .payments-compact .pay-card--featured .pay-card-stage {
    width: 8.5rem;
  }
}

/* Wide screens: Robux and PayPal on top, the other three below */
@media (min-width: 1000px) {
  .payments-compact .pay-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 0.85rem;
  }

  .payments-compact .pay-card {
    grid-column: span 2;
  }

  .payments-compact .pay-card--featured {
    grid-column: span 3;
  }

  .payments-compact .pay-card:last-child {
    grid-column: span 2;
  }

  .payments-compact .pay-card-stage {
    width: 6.5rem;
  }

  .payments-compact .pay-card--featured .pay-card-stage {
    width: 9rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .payments-compact .pay-card,
  .payments-compact .pay-card:hover {
    transition: none;
    transform: none;
  }
}

/* ----- Payment Methods: card logos ----- */
.payments-compact .pay-logo {
  display: block;
  width: 30cqw;
  height: 30cqw;
  color: #fff;
  fill: currentColor;
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.45));
}

/* The generic gift icon is a line icon, not a brand logo */
.payments-compact .pay-logo-line {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Robux card: the Robux icon image */
.payments-compact .pay-logo-img {
  display: block;
  width: 36cqw;
  height: 36cqw;
  object-fit: contain;
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.45));
}

/* ----- Pricing carousel: Robux icon after the Robux price (bigger than the text) ----- */
.pc-price-robux {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: 0.3em;
}

.pc-price-robux[hidden] {
  display: none;
}

.pc-robux-icon {
  flex: none;
  width: 1.7em;
  height: 1.7em;
  object-fit: contain;
}

/* ==========================================================
   HERO: FULL-BLEED CINEMATIC
   The featured artwork fills the whole hero, all the way up behind the
   top bar, like a game splash screen. A navy gradient from the left keeps
   the headline readable. The bottom keeps the original thin line. The artwork block is a direct child of .hero (index.html).
   ========================================================== */

/* The hero starts at the very top of the page; the bar floats above it */
.hero {
  margin-top: calc(var(--header-height) * -1);
  padding-top: calc(var(--header-height) + var(--space-4));
}

.hero > .hero-visual {
  position: absolute;
  inset: 0;
  z-index: 0;
  justify-self: stretch;
  width: auto;
  max-width: none;
  margin: 0;
  aspect-ratio: auto;
  animation: none;
  overflow: hidden;
}

.hero > .hero-inner {
  position: relative;
  z-index: 2;
  grid-template-columns: minmax(0, 1fr);
  pointer-events: none; /* lets the cursor reach the artwork on the right */
}

.hero > .hero-inner .hero-content {
  max-width: 44rem;
  pointer-events: auto;
}

.hero .hero-fx {
  display: none;
}

.hero .hero-art-main {
  position: absolute;
  inset: 0;
  width: auto;
  transform: none;
  cursor: default;
}

.hero .hero-art-main .hero-art-frame {
  position: absolute;
  inset: 0;
  z-index: 0;
  aspect-ratio: auto;
  border: 0;
  border-radius: 0;
  background-color: #0b1220;
  box-shadow: none;
}

.hero .hero-art-main .hero-art-image {
  object-position: 68% center;
  transform: scale(1.07) translate3d(calc(var(--mx, 0) * -14px), calc(var(--my, 0) * -10px), 0);
  transition: opacity 0.8s ease, transform 0.25s ease-out;
}

@media (hover: hover) {
  .hero .hero-art-main:hover .hero-art-image {
    transform: scale(1.07) translate3d(calc(var(--mx, 0) * -14px), calc(var(--my, 0) * -10px), 0);
  }
}

/* Placeholder (until your artwork loads) sits on the right side */
.hero .hero-art-placeholder {
  left: 45%;
}

/* Navy scrim: dark behind the text, clear over the artwork.
   The top fade keeps the floating top bar readable. */
.hero .hero-art-main::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(6, 10, 20, 0.7), transparent 22%),
    radial-gradient(ellipse 55% 80% at 82% 45%, rgba(var(--rgb-blue), 0.14), transparent 70%),
    linear-gradient(90deg, rgba(6, 10, 20, 0.97) 0%, rgba(6, 10, 20, 0.84) 30%, rgba(6, 10, 20, 0.3) 58%, transparent 82%);
}

.hero .hero-title {
  text-shadow: 0 4px 32px rgba(0, 0, 0, 0.55);
}

.hero .hero-text {
  text-shadow: 0 2px 16px rgba(0, 0, 0, 0.6);
}

/* Phones and tablets: the art sits behind the text, so the scrim covers it more evenly */
@media (max-width: 959px) {
  .hero .hero-art-main .hero-art-image {
    object-position: 72% center;
  }

  .hero .hero-art-main::before {
    background:
      linear-gradient(180deg, rgba(6, 10, 20, 0.7), rgba(6, 10, 20, 0.78) 45%, rgba(6, 10, 20, 0.94)),
      radial-gradient(ellipse 80% 60% at 70% 30%, rgba(var(--rgb-blue), 0.16), transparent 70%);
  }

  .hero .hero-art-placeholder {
    left: 0;
  }
}

@media (min-width: 960px) {
  .hero {
    min-height: min(100svh, 60rem);
    padding: calc(var(--header-height) + var(--space-5)) 0 var(--space-6);
  }

  .hero .hero-title {
    font-size: clamp(3.8rem, 7.6vw, 7rem);
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero .hero-art-main .hero-art-image {
    transform: scale(1.04);
    transition: opacity 0.8s ease;
  }
}

/* Hero: no placeholder flash while the artwork loads.
   The placeholder only shows if the image is missing (script.js removes the <img> then). */
.hero .hero-art-frame:has(.hero-art-image) .hero-art-placeholder {
  visibility: hidden;
}

/* ==========================================================
   HERO: PHONE FIXES (max-width 720px only)
   - title + description centered
   - no bottom hairline; the artwork fades into the page instead of
     ending in a hard edge
   - artwork is not scaled up, so nothing bleeds past the right edge
   ========================================================== */
@media (max-width: 720px) {
  .hero::after {
    display: none;
  }

  .hero > .hero-visual {
    -webkit-mask-image: linear-gradient(to bottom, #000 78%, transparent 100%);
    mask-image: linear-gradient(to bottom, #000 78%, transparent 100%);
  }

  .hero .hero-art-main .hero-art-image {
    transform: none;
    /* Which part of the artwork shows on phones.
       0% = left edge of the image, 100% = right edge. Raise it a bit if it goes too far. */
    object-position: 50% center;
    /* Slightly brighter artwork on phones (1 = original) */
    filter: brightness(1.15);
  }

  /* Slightly lighter dark overlay on phones, text stays readable */
  .hero .hero-art-main::before {
    background:
      linear-gradient(180deg, rgba(6, 10, 20, 0.55), rgba(6, 10, 20, 0.64) 45%, rgba(6, 10, 20, 0.88)),
      radial-gradient(ellipse 80% 60% at 70% 30%, rgba(var(--rgb-blue), 0.16), transparent 70%);
  }

  .hero > .hero-inner .hero-content {
    margin-left: auto;
    margin-right: auto;
    text-align: center;
  }

  .hero-line-indent {
    padding-left: 0;
  }

  .hero-text {
    margin-left: auto;
    margin-right: auto;
  }
}


/* ==========================================================
   PRICING PAGE: card redesign, View more checklist, blurred square artwork,
   Roblox Plus note, flat payment cards
   ========================================================== */

/* Cards keep their own height (an opened card grows, the others stay put) */
.pc-viewport {
  align-items: start;
}

.pc-slide {
  border-radius: 22px;
}

/* Square artwork (Game Icons, Renders, Profile Pictures): a tiny copy of the same image (a canvas drawn by the
   script on the pricing page), stretched to fill the frame behind it. The browser smooths it, so it looks blurred
   without a CSS blur filter. */
.pc-stage-blur {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.pc-body {
  gap: 0.75rem;
  padding: 1.15rem 1.2rem 1.25rem;
}

/* Price + Commission sit together in one soft panel */
.pc-buy {
  align-items: center;
  margin-top: 0.15rem;
  padding: 0.8rem 0.9rem;
  border: 1px solid rgba(var(--rgb-blue), 0.2);
  border-radius: 16px;
  background:
    radial-gradient(ellipse 90% 140% at 0% 0%, rgba(var(--rgb-blue), 0.14), transparent 70%),
    rgba(var(--rgb-blue), 0.05);
}

/* "View in portfolio": a quiet text link (work.html with that filter selected) */
.pc-portfolio {
  display: inline-flex;
  align-items: center;
  align-self: center;
  gap: 0.4rem;
  padding: 0.25rem 0.5rem;
  color: var(--color-text-muted);
  font-size: 0.9rem;
  font-weight: 600;
  text-decoration: none;
  transition: color 0.15s ease;
}

.pc-portfolio:hover,
.pc-portfolio:focus-visible {
  color: var(--color-accent-bright);
}

.pc-portfolio:hover .pc-arrow,
.pc-portfolio:focus-visible .pc-arrow {
  transform: translateX(3px);
}

/* "View more" button */
.pc-more-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  width: 100%;
  padding: 0.55rem 0.85rem;
  border: 1px solid rgba(var(--rgb-silver), 0.2);
  border-radius: 12px;
  background: transparent;
  color: var(--color-text-muted);
  font: inherit;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition: color 0.2s ease, border-color 0.2s ease, background-color 0.2s ease;
}

.pc-more-toggle:hover,
.pc-more-toggle:focus-visible {
  border-color: rgba(var(--rgb-blue), 0.55);
  background-color: rgba(var(--rgb-blue), 0.08);
  color: var(--color-text);
}

.pc-more-toggle:focus-visible {
  outline: 2px solid var(--color-accent-bright);
  outline-offset: 2px;
}

.pc-chevron {
  flex: none;
  transition: transform 0.3s var(--spring);
}

.pc-slide.is-expanded .pc-chevron {
  transform: rotate(180deg);
}

/* The checklist opens by growing the card */
.pc-more {
  display: grid;
  grid-template-rows: 0fr;
  visibility: hidden;
  margin-top: -0.75rem;
  transition: grid-template-rows 0.35s ease, margin-top 0.35s ease, visibility 0s linear 0.35s;
}

.pc-slide.is-expanded .pc-more {
  grid-template-rows: 1fr;
  visibility: visible;
  margin-top: 0;
  transition: grid-template-rows 0.35s ease, margin-top 0.35s ease, visibility 0s;
}

.pc-more-inner {
  min-height: 0;
  overflow: hidden;
}

.pc-more-list {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  margin: 0;
  padding: 0.1rem 0 0.2rem;
  list-style: none;
}

.pc-more-list li {
  position: relative;
  padding-left: 1.85rem;
  color: var(--color-text);
  font-size: 0.9rem;
  line-height: 1.4;
}

/* Round checkmark */
.pc-more-list li::before {
  content: "";
  position: absolute;
  top: 0.05rem;
  left: 0;
  width: 1.3rem;
  height: 1.3rem;
  border-radius: 50%;
  background-color: rgba(var(--rgb-blue), 0.2);
  box-shadow: inset 0 0 0 1px rgba(var(--rgb-blue), 0.45);
}

.pc-more-list li::after {
  content: "";
  position: absolute;
  top: 0.3rem;
  left: 0.47rem;
  width: 0.3rem;
  height: 0.55rem;
  border: solid var(--color-accent-bright);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

@media (prefers-reduced-motion: reduce) {
  .pc-more,
  .pc-slide.is-expanded .pc-more,
  .pc-chevron {
    transition: none;
  }
}

/* Roblox Plus note under the payment cards */
.pc-roblox-note {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin: var(--space-3) 0 0;
  padding: 0.7rem 0.9rem;
  border: 1px solid rgba(var(--rgb-blue), 0.2);
  border-radius: 12px;
  background-color: rgba(var(--rgb-blue), 0.06);
  color: var(--color-text-muted);
  font-size: 0.9rem;
  line-height: 1.45;
}

.pc-roblox-plus {
  flex: none;
  width: 1.4rem;
  height: 1.4rem;
  object-fit: contain;
  filter: brightness(0) invert(1);
}

/* Payment cards: no reflection light on the individual cards */
.payments-compact .pay-card-bg {
  background: none;
}

.payments-compact .pay-card-glare {
  display: none;
}

/* ----- Pricing carousel tweaks ----- */
/* Cards sit closer to the "Products" title */
.pc-catalogue .section-head {
  margin-bottom: 0;
}

.pc-viewport {
  padding-top: 1.25rem;
}

/* Title closer to the top, no gap between title and description */
.pc-body {
  padding-top: 0.8rem;
  gap: 0.6rem;
}

.pc-name {
  min-height: 0;
}

/* Price: small "From" label, then the USD price with the Robux price right next to it */
.pc-price {
  flex-direction: column;
  align-items: flex-start;
  gap: 0.3rem;
}

.pc-price-row {
  display: flex;
  align-items: center;
  gap: 0.65rem;
}

.pc-price-from {
  color: var(--color-text-muted);
  font-size: 0.68rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.pc-price:not(.has-price) .pc-price-from {
  display: none;
}

.pc-price-robux {
  align-self: center;
}

/* Previous / next arrows sit beside the card, next to the neighbouring cards */
.pc-track {
  position: relative;
  --pc-nav: 2.75rem;
}

.pc-track .pc-nav {
  position: absolute;
  top: calc(1.25rem + var(--pc-w) * 9 / 32);   /* middle of the artwork */
  z-index: 5;
  width: var(--pc-nav);
  height: var(--pc-nav);
  margin-top: calc(var(--pc-nav) / -2);
  background-color: rgba(6, 10, 20, 0.85);
  box-shadow: 0 8px 20px -8px rgba(0, 0, 0, 0.9);
}

.pc-track .pc-nav-prev {
  left: calc(50% - var(--pc-w) / 2 - var(--pc-nav) / 2);
}

.pc-track .pc-nav-next {
  right: calc(50% - var(--pc-w) / 2 - var(--pc-nav) / 2);
}

/* ==========================================================
   WORK PAGE HERO: floating hoverboard render on the right
   Image file: images/work-hero.png (transparent PNG, portrait is fine).
   Colours come from the render itself: a blue outfit (--glow-body) and a
   cyan neon board (--glow). Pure CSS. To change the float height, speed or
   colours, edit the variables on .hover-stage.
   ========================================================== */
.page-hero-inner {
  display: grid;
  gap: var(--space-4);
  align-items: center;
}

.page-hero-visual {
  min-width: 0;
}

.hover-stage {
  --float-height: 18px;       /* how far up and down it floats */
  --float-speed: 4.6s;        /* one full up-and-down */
  --glow: 60, 225, 235;       /* cyan: the neon light under the board */
  --glow-body: 30, 110, 255;  /* blue: the outfit */
  position: relative;
  isolation: isolate;
  width: min(100%, 24rem);
  aspect-ratio: 4 / 5;          /* portrait, like the render */
  margin: 0 auto;
  animation: hover-enter 0.9s var(--spring) 0.15s both;
}

/* The character + board. This is the part that floats. */
.hover-float {
  position: absolute;
  inset: 0 0 10% 0;
  z-index: 2;
  animation: hover-bob var(--float-speed) ease-in-out infinite;
  will-change: transform;
}

.hover-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center bottom;
  transform-origin: 54% 92%;   /* sways around the board, not the feet of the picture */
  filter: drop-shadow(0 18px 26px rgba(0, 0, 0, 0.5))
          drop-shadow(0 0 22px rgba(var(--glow-body), 0.3));
  animation: hover-sway calc(var(--float-speed) * 1.6) ease-in-out infinite;
}

/* Soft blue light behind the character, gently breathing */
.hover-glow {
  position: absolute;
  inset: 2% 8% 10%;
  z-index: 0;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(var(--glow-body), 0.36), rgba(var(--glow-body), 0.09) 60%, transparent 76%);
  filter: blur(14px);
  animation: hover-glow-pulse var(--float-speed) ease-in-out infinite;
}

/* Cyan light pool on the "floor" right under the board (the board's neon).
   It is brightest when the board is low and fades when it rises. */
.hover-underglow {
  position: absolute;
  left: 22%;
  right: 12%;
  bottom: 3%;
  z-index: 1;
  height: 10%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(var(--glow), 0.75), rgba(var(--glow), 0.22) 55%, transparent 80%);
  filter: blur(9px);
  animation: hover-underglow var(--float-speed) ease-in-out infinite;
}

/* Shadow on the floor: shrinks and fades when the board rises */
.hover-shadow {
  position: absolute;
  left: 29%;
  right: 20%;
  bottom: 2.4%;
  z-index: 1;
  height: 4.5%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(0, 0, 0, 0.7), transparent);
  filter: blur(3px);
  animation: hover-shadow var(--float-speed) ease-in-out infinite;
}

/* Cyan energy rings under the board, spreading out like a hover pad */
.hover-ripple {
  position: absolute;
  left: 24%;
  right: 14%;
  bottom: 3.6%;
  z-index: 1;
  height: 8%;
  border: 2px solid rgba(var(--glow), 0.8);
  border-radius: 50%;
  box-shadow: 0 0 14px rgba(var(--glow), 0.6), inset 0 0 10px rgba(var(--glow), 0.4);
  opacity: 0;
  animation: hover-ripple 2.8s ease-out infinite;
}

.hover-ripple-2 {
  animation-delay: 1.4s;
}

/* Cyan light specks rising from under the board */
.hover-spark {
  position: absolute;
  left: var(--x, 50%);
  bottom: 9%;
  z-index: 3;
  width: var(--s, 4px);
  height: var(--s, 4px);
  border-radius: 50%;
  background-color: rgb(var(--glow));
  box-shadow: 0 0 10px 2px rgba(var(--glow), 0.85);
  opacity: 0;
  animation: hover-spark var(--d, 5s) ease-in infinite var(--delay, 0s);
}

@keyframes hover-enter {
  from { opacity: 0; transform: translateY(36px) scale(0.94); }
  to   { opacity: 1; transform: none; }
}

@keyframes hover-bob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(calc(var(--float-height) * -1)); }
}

/* A small tilt and drift, slower than the bob, so it never looks like a loop */
@keyframes hover-sway {
  0%, 100% { transform: rotate(-1.2deg) translateX(-3px); }
  50%      { transform: rotate(1.2deg)  translateX(3px); }
}

@keyframes hover-shadow {
  0%, 100% { transform: scale(1);    opacity: 0.75; }
  50%      { transform: scale(0.68); opacity: 0.38; }
}

@keyframes hover-underglow {
  0%, 100% { transform: scale(1);    opacity: 1; }
  50%      { transform: scale(0.74); opacity: 0.5; }
}

@keyframes hover-glow-pulse {
  0%, 100% { opacity: 0.65; transform: scale(0.96); }
  50%      { opacity: 1;    transform: scale(1.05); }
}

@keyframes hover-ripple {
  0%   { opacity: 0;   transform: scale(0.35); }
  18%  { opacity: 0.9; }
  100% { opacity: 0;   transform: scale(1.25); }
}

@keyframes hover-spark {
  0%   { opacity: 0;   transform: translate(0, 0) scale(0.6); }
  15%  { opacity: 0.95; }
  100% { opacity: 0;   transform: translate(10px, -14rem) scale(0.2); }
}

/* Chat bubble: reuses the About page bubble (.about-bubble: dots, then the
   text pops in, same look and animation). Only its place is set here. It sits
   inside .hover-float, so it floats with the character. */
.hover-bubble {
  top: 4%;
  left: 54%;
  grid-template-columns: minmax(0, 1fr);   /* the dots stay centred while the bubble is short */
  border-radius: 18px 18px 18px 5px;
  transform-origin: 0 100%;
  font-size: 1.02rem;
  white-space: nowrap;
}

/* Same 7s loop as the About bubble. The bubble starts short (just the dots)
   and grows in length to fit the text once the dots are replaced.
   max-width stops at the text's natural width, so any text length works. */
@media (prefers-reduced-motion: no-preference) {
  .hover-bubble {
    overflow: hidden;
    animation:
      about-bubble 7s var(--spring) 0.8s infinite both,
      hover-bubble-grow 7s ease-in-out 0.8s infinite both;
  }
}

@keyframes hover-bubble-grow {
  0%, 24%     { max-width: 4.2rem; }
  36%         { max-width: 24rem; }
  94%         { max-width: 24rem; }
  94.1%, 100% { max-width: 4.2rem; }
}

/* Desktop: text on the left, floating render on the right.
   The render sits at the right edge, big, and reaches down next to the filter
   buttons. It adds no height of its own, so the title and description stay
   right above the filters. The filters and the text leave room for it
   (--hero-art-reserve).
   --hero-art-right   moves the render left (bigger value) or right (0 = flush right)
   --hero-art-drop    how far it reaches down past the hero (bigger = lower)
   --hero-art-width   how big it is */
@media (min-width: 900px) {
  .page-hero,
  .portfolio {
    --hero-art-reserve: 17rem;
  }

  .page-hero {
    overflow-x: clip;               /* nothing here can cause a sideways scrollbar */
  }

  .page-hero-inner {
    --hero-art-right: 0rem;
    --hero-art-drop: 13rem;
    --hero-art-width: 22rem;
    display: block;
    position: relative;
  }

  .page-hero-copy {
    max-width: calc(100% - var(--hero-art-reserve));   /* keeps the text clear of the render */
  }

  .page-hero-visual {
    position: absolute;
    right: var(--hero-art-right);
    bottom: calc(var(--hero-art-drop) * -1);
    width: min(40%, var(--hero-art-width));
  }

  .hover-stage {
    width: 100%;
    margin: 0;
  }

  /* the filter buttons wrap before they reach the render */
  .portfolio .filter-bar,
  .portfolio .filter-note {
    max-width: calc(100% - var(--hero-art-reserve));
  }
}

/* Phones: render under the text, a bit smaller */
@media (max-width: 899px) {
  .hover-stage {
    width: min(100%, 19rem);
  }

  .hover-bubble {
    top: 1%;
    left: auto;
    right: 0;
    height: 2.3rem;
    font-size: 0.85rem;
    transform-origin: 100% 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hover-spark,
  .hover-ripple {
    display: none;
  }

  .hover-underglow {
    animation: none;
  }
}


/* ==========================================================
   CLIENT REVIEWS: arrows and dots in the centre   [<]  . . .  [>]
   ========================================================== */
[data-review-carousel] .review-controls {
  justify-content: center;
  gap: 0.5rem 0.75rem;
}

[data-review-carousel] .review-arrows {
  display: contents;
}

[data-review-carousel] [data-review-prev] { order: 1; }
[data-review-carousel] .review-dots       { order: 2; }
[data-review-carousel] [data-review-next] { order: 3; }


/* ==========================================================
   YOUR PERKS (homepage, EXPERIMENTAL)
   Same look as the Find Me Around tiles: dark surface, thin blue edge,
   a bold heading, muted text, small lift on hover. The first two are the
   premium ones (gradient edge, two colours each).
   Desktop layout:   [ X/Twitter ] [ Featured Review ]
                     [   (tall)   ] [ Seasonal Sales  ]
                     [ Portfolio Placement ] [ Referral Discount ]
   To remove: delete this block and the <section id="perks"> in index.html.
   ========================================================== */
.perks::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 45% 50% at 8% 22%, rgba(var(--rgb-blue), 0.08), transparent 70%),
    radial-gradient(ellipse 45% 55% at 92% 38%, rgba(var(--rgb-violet), 0.08), transparent 70%);
  pointer-events: none;
}

.perks > .container {
  position: relative;
}

.perks-lead {
  max-width: 25rem;
  color: var(--color-text-muted);
  font-size: 1rem;
}

@media (min-width: 760px) {
  .perks-lead {
    margin-left: auto;
  }
}

/* Mobile first: one column */
.perks-grid {
  display: grid;
  grid-template-columns: 1fr;
  align-items: start; /* a card is only as tall as its own content */
  gap: var(--space-2);
}

.perk-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  min-width: 0;
  padding: 1.2rem 1.3rem 1.3rem;
  border: 1px solid rgba(var(--rgb-blue), 0.18);
  border-radius: 14px;
  background-color: var(--color-surface);
  box-shadow: 0 24px 50px -30px rgba(0, 0, 0, 0.9);
  transition: transform 0.3s var(--spring), border-color 0.25s ease, box-shadow 0.3s ease;
}

.perk-title {
  color: var(--color-text);
  font-size: 1.3rem;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.03em;
}

.perk-text {
  color: var(--color-text-muted);
  font-size: 0.92rem;
}

.perk-text strong {
  color: var(--color-accent-bright);
  font-weight: 700;
}

/* ----- The first two perks: the premium ones -----
   Each has two colours (--p1 and --p2): a gradient edge, a lit top edge,
   two soft corner glows, bigger type, and the small orange block the
   section titles use.
     X/Twitter       icy blue + violet
     Featured Review gold + orange */
.perk-card:nth-child(1) { --p1: var(--rgb-blue); --p2: 150, 130, 255; }
.perk-card:nth-child(2) { --p1: 255, 196, 77;    --p2: 255, 138, 61; }

.perk-card:nth-child(-n + 2) {
  padding: 1.6rem 1.6rem 1.7rem;
  border: 1px solid transparent;
  background:
    radial-gradient(circle at 100% 0, rgba(var(--p1), 0.2), transparent 58%),
    radial-gradient(circle at 0 100%, rgba(var(--p2), 0.16), transparent 55%),
    linear-gradient(180deg, var(--color-surface-raised), var(--color-surface)) padding-box,
    linear-gradient(135deg, rgba(var(--p1), 0.85), rgba(var(--p2), 0.55) 55%, rgba(var(--p1), 0.18)) border-box;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 24px 50px -30px rgba(0, 0, 0, 0.9),
    0 0 60px -34px rgba(var(--p1), 0.8),
    0 0 60px -40px rgba(var(--p2), 0.7);
}

.perk-card:nth-child(-n + 2) .perk-title {
  font-size: 1.65rem;
  letter-spacing: -0.035em;
}

.perk-card:nth-child(-n + 2) .perk-title::after {
  content: "";
  display: inline-block;
  width: 0.15em;
  height: 0.15em;
  margin-left: 0.1em;
  border-radius: 0.03em;
  background-color: var(--color-orange);
}

.perk-card:nth-child(-n + 2) .perk-text {
  color: var(--color-silver);
  font-size: 1rem;
}

@media (prefers-reduced-motion: reduce) {
  .perk-card,
  .perk-card:hover {
    transform: none;
    transition: border-color 0.2s ease;
  }
}

/* ----- Mock-ups inside the two premium cards -----
   Small pictures of the perk itself. Decoration only. */
.perk-mock {
  margin-top: 1.1rem;
}

.mock-avatar {
  position: relative;
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  overflow: hidden;
  border: 1px solid rgba(var(--p1), 0.5);
  border-radius: 50%;
  background-color: var(--color-surface);
  color: rgb(var(--p1));
  font-family: var(--font-display);
  font-weight: 700;
}

/* Twitter avatar: the picture covers the circle, a "B" shows if the file is missing */
.mock-avatar img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* X/Twitter post. It grows with the card, so the artwork soaks up any extra height. */
.mock-post {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  padding: 0.9rem 1rem 1rem;
  border: 1px solid rgba(var(--p1), 0.28);
  border-radius: 16px;
  background-color: rgba(6, 10, 20, 0.55);
}

.mock-post-head {
  display: flex;
  align-items: center;
  gap: 0.65rem;
}

.mock-who {
  display: flex;
  flex-direction: column;
  min-width: 0;
  line-height: 1.25;
}

.mock-who strong {
  color: var(--color-text);
  font-size: 0.92rem;
  font-weight: 700;
}

.mock-who span {
  color: var(--color-text-muted);
  font-size: 0.78rem;
}

.mock-x {
  flex: none;
  width: 16px;
  height: 16px;
  margin-left: auto;
  color: var(--color-silver);
  opacity: 0.8;
}

.mock-post-text {
  margin: 0.7rem 0 0.7rem;
  color: var(--color-text);
  font-size: 0.9rem;
}

.mock-post-text b {
  color: var(--color-accent-bright);
  font-weight: 600;
}

.mock-post-art {
  position: relative;
  display: grid;
  flex: 1 1 auto;
  place-items: center;
  min-height: 7rem;
  overflow: hidden;
  border: 1px solid rgba(var(--p1), 0.3);
  border-radius: 12px;
  background:
    radial-gradient(ellipse 60% 90% at 50% 0, rgba(var(--p1), 0.38), transparent 70%),
    radial-gradient(ellipse 55% 90% at 100% 100%, rgba(var(--p2), 0.34), transparent 70%),
    linear-gradient(135deg, #10204a, #08112a);
}

.mock-post-art {
  aspect-ratio: 16 / 9;                       /* a real thumbnail now, not the faded logo */
}

.mock-post-art img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.mock-post-art span {
  z-index: 1;
  padding: 0.15rem 0.6rem;
  border-radius: 999px;
  background: rgba(6, 10, 20, 0.62);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  position: absolute;
  left: 0.7rem;
  bottom: 0.5rem;
  color: var(--color-silver);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.04em;
}

/* Review bubble (same shape as the real reviews, with the little tail) */
.mock-bubble {
  position: relative;
  padding: 0.9rem 1rem 1rem;
  border: 1px solid rgba(var(--p1), 0.35);
  border-radius: 18px 18px 18px 6px;
  background-color: rgba(6, 10, 20, 0.55);
}

.mock-bubble::after {
  content: "";
  position: absolute;
  left: 24px;
  bottom: -8px;
  width: 14px;
  height: 14px;
  border-right: 1px solid rgba(var(--p1), 0.35);
  border-bottom: 1px solid rgba(var(--p1), 0.35);
  border-bottom-right-radius: 3px;
  background-color: #090d1a;
  transform: rotate(45deg);
}

.mock-stars {
  display: block;
  margin-bottom: 0.35rem;
  color: rgb(var(--p1));
  font-size: 0.95rem;
  letter-spacing: 0.12em;
  text-shadow: 0 0 14px rgba(var(--p2), 0.6);
}

.mock-bubble p {
  color: var(--color-text);
  font-size: 0.92rem;
}

.mock-author {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 1.05rem 0.4rem 0;
}

.mock-name {
  color: var(--color-text);
  font-size: 0.92rem;
  font-weight: 700;
}

/* ----- Portfolio Placement: three tiles, yours in the middle ----- */
.mock-portfolio {
  display: grid;
  grid-template-columns: 1fr 1.4fr 1fr;
  align-items: center;
  gap: 0.55rem;
}

.mock-tile {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border: 1px solid var(--color-border);
  border-radius: 10px;
  background: linear-gradient(135deg, #0f1a3a, #080d1b);
}

.mock-tile:first-child {
  background: linear-gradient(200deg, #12234d, #080d1b);
}

.mock-tile--yours {
  aspect-ratio: 16 / 11;
  border-color: rgba(var(--rgb-blue), 0.6);
  background:
    radial-gradient(ellipse 70% 90% at 50% 0, rgba(var(--rgb-blue), 0.35), transparent 70%),
    linear-gradient(135deg, #10204a, #08112a);
  box-shadow: 0 0 30px -10px rgba(var(--rgb-blue), 0.8);
}

.mock-tile--yours img {
  width: 30%;
  height: auto;
  opacity: 0.4;
}

.mock-tile-tag {
  position: absolute;
  left: 0.45rem;
  bottom: 0.4rem;
  padding: 0.02rem 0.5rem 0.06rem;
  border: 1px solid rgba(var(--rgb-blue), 0.4);
  border-radius: 999px;
  background-color: rgba(6, 10, 20, 0.7);
  color: var(--color-accent-bright);
  font-size: 0.66rem;
  font-weight: 700;
  line-height: 1.5;
  white-space: nowrap;
}

/* ----- Referral Discount: the big number ----- */
.perk-big {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  margin-bottom: 0.25rem;
}

.perk-big-num {
  color: var(--color-accent-bright);
  font-family: var(--font-display);
  font-size: 3.4rem;
  font-weight: 800;
  line-height: 0.9;
  letter-spacing: -0.05em;
  text-shadow: 0 0 34px rgba(var(--rgb-blue), 0.5);
}

.perk-big-label {
  color: var(--color-text-muted);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* ----- Seasonal Sales: dresses up when a season is switched on in script.js ----- */
.perk-card[data-season] {
  --season: var(--rgb-orange);
  border-color: rgba(var(--season), 0.32);
  background:
    radial-gradient(circle at 100% 0, rgba(var(--season), 0.17), transparent 62%),
    var(--color-surface);
}

.perk-card[data-season="halloween"] { --season: var(--rgb-orange); }
.perk-card[data-season="christmas"] { --season: 255, 107, 107; }
.perk-card[data-season="summer"]    { --season: 255, 209, 102; }

.perk-card[data-season] .perk-text {
  padding-right: 2.2rem; /* keeps the text clear of the seasonal picture */
}

.perk-season-art {
  position: absolute;
  top: 0.85rem;
  right: 1rem;
  width: 2.8rem;
  height: 2.8rem;
  pointer-events: none;
  transform: rotate(8deg);
}

.perk-season-art svg {
  display: block;
  width: 100%;
  height: 100%;
}

/* ----- Layout ----- */

/* Tablets: two columns. The first two cards get a full row each. */
@media (min-width: 640px) {
  .perks-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .perk-card:nth-child(-n + 2),
  .perk-card:last-child {
    grid-column: span 2;
  }

  /* Referral: big number on the left, text on the right */
  .perk-card--referral {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas:
      "big title"
      "big text";
    column-gap: 1.5rem;
    align-content: center;
  }

  .perk-card--referral .perk-big {
    grid-area: big;
    flex-direction: column;
    align-items: flex-start;
    align-self: center;
    gap: 0.2rem;
    margin: 0;
  }

  .perk-card--referral .perk-title { grid-area: title; align-self: end; }
  .perk-card--referral .perk-text  { grid-area: text;  align-self: start; }
}

/* Desktop: the X/Twitter card is tall on the left. Review and Seasonal Sales
   are stacked on the right, so together they are as tall as it is. The last
   two cards sit side by side underneath, as wide, low cards. */
@media (min-width: 960px) {
  .perks-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    align-items: stretch;
  }

  .perk-card {
    grid-column: span 3;
  }

  .perk-card:nth-child(1) { grid-column: 1 / span 3; grid-row: 1 / span 2; }
  .perk-card:nth-child(2) { grid-column: 4 / span 3; grid-row: 1; }
  .perk-card:nth-child(3) { grid-column: 4 / span 3; grid-row: 2; }

  /* Portfolio Placement: text on the left, the tiles on the right */
  .perk-card:nth-child(4) {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas:
      "title mock"
      "text mock";
    column-gap: 1.5rem;
    align-content: center;
    align-items: center;
  }

  .perk-card:nth-child(4) .perk-title { grid-area: title; align-self: end; }
  .perk-card:nth-child(4) .perk-text  { grid-area: text;  align-self: start; }
  .perk-card:nth-child(4) .perk-mock  { grid-area: mock;  margin-top: 0; }
}

/* ==========================================================
   UPDATE: HOMEPAGE, SLIDESHOW, MENU, PERKS, SEASONS
   Everything below was added in one pass. Each block says what it does.
   ========================================================== */

/* ----- Homepage only: no colour change between sections -----
   The coloured side glows are switched off on the homepage, so every
   section sits on the same background. Other pages are unchanged. */
body.is-home .work::before,
body.is-home .reviews::before,
body.is-home .socials::before,
body.is-home .perks::before {
  display: none;
}


/* ----- Hero slideshow (homepage) -----
   Every slide is an <img class="hero-art-image hero-slide"> stacked in the
   frame. The NEW slide fades in on top while drifting a few pixels into place;
   the old one stays fully visible underneath, so the picture never dips dark.
   A slow zoom runs on the visible slide. The drift uses the separate `translate`
   property and the zoom uses `scale`, so neither fights with the mouse-parallax
   `transform`. To make it calmer or livelier: change the drift distance
   (--hero-drift, 0 = pure fade) and the durations below. */
.hero .hero-art-main .hero-art-image.hero-slide {
  --hero-drift: 1.5rem;
  opacity: 0;
  z-index: 1;
  translate: var(--hero-drift) 0;
  transition: none;
  will-change: opacity, translate;
}

.hero .hero-art-main .hero-art-image.hero-slide.is-leaving {
  opacity: 1;
  z-index: 1;
  translate: 0 0;
}

.hero .hero-art-main .hero-art-image.hero-slide.is-active {
  opacity: 1;
  z-index: 2;
  translate: 0 0;
  transition:
    opacity 1.4s ease,
    translate 1.8s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.hero .hero-art-main .hero-art-image.hero-slide.is-active,
.hero .hero-art-main .hero-art-image.hero-slide.is-leaving {
  animation: hero-kenburns 15s ease-out both;
}

@keyframes hero-kenburns {
  from { scale: 1; }
  to   { scale: 1.07; }
}

.hero-sheen {
  display: none;   /* light sweep switched off: calmer slide change */
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  opacity: 0;
  background: linear-gradient(75deg, transparent 38%, rgba(190, 225, 255, 0.16) 50%, transparent 62%);
  transform: translateX(100%);
}

.hero-sheen.is-playing {
  animation: hero-sheen 1.3s cubic-bezier(0.77, 0, 0.18, 1) both;
}

@keyframes hero-sheen {
  0%   { opacity: 0; transform: translateX(100%); }
  25%  { opacity: 1; }
  100% { opacity: 0; transform: translateX(-100%); }
}

/* Little progress bars, one per slide (click one to jump to it) */
.hero-dots {
  position: absolute;
  left: 50%;
  bottom: 1.4rem;
  z-index: 4;
  display: flex;
  gap: 0.1rem;
  transform: translateX(-50%);
}

.hero-dots[hidden] {
  display: none;
}

.hero-dot {
  position: relative;
  width: 2.2rem;
  height: 1.5rem;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}

.hero-dot::before,
.hero-dot::after {
  content: "";
  position: absolute;
  left: 0.2rem;
  right: 0.2rem;
  top: 50%;
  height: 3px;
  margin-top: -1.5px;
  border-radius: 999px;
}

.hero-dot::before {
  background-color: rgba(255, 255, 255, 0.28);
  transition: background-color 0.2s ease;
}

.hero-dot:hover::before {
  background-color: rgba(255, 255, 255, 0.5);
}

.hero-dot::after {
  background-color: #fff;
  opacity: 0.9;
  transform: scaleX(0);
  transform-origin: left center;
}

.hero-dot.is-current::after {
  animation: hero-dot-fill var(--hero-interval, 6.5s) linear forwards;
}

@keyframes hero-dot-fill {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

.hero-dot:focus-visible {
  outline: 2px solid var(--color-accent-bright);
  outline-offset: 1px;
  border-radius: 4px;
}

@media (max-width: 720px) {
  .hero-dots {
    bottom: 0.7rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero .hero-art-main .hero-art-image.hero-slide,
  .hero .hero-art-main .hero-art-image.hero-slide.is-active,
  .hero .hero-art-main .hero-art-image.hero-slide.is-leaving {
    translate: none;
  }

  .hero .hero-art-main .hero-art-image.hero-slide.is-active {
    transition: opacity 0.6s ease;
  }

  .hero .hero-art-main .hero-art-image.hero-slide.is-active,
  .hero .hero-art-main .hero-art-image.hero-slide.is-leaving {
    animation: none;
  }

  .hero-sheen {
    display: none;
  }

  .hero-dot.is-current::after {
    animation: none;
    transform: scaleX(1);
  }
}


/* ----- Work mega menu -----
   1) The notch colour matches the panel's top colour (the panel has a faint
      blue tint at the top, so the notch needs the same tint).
   2) The four category buttons are shorter. */
@media (min-width: 861px) {
  .mega-work .mega-inner {
    --mega-notch-fill: #0d1a2f;
  }

  .mega-work .mega-link {
    gap: 0.65rem;
    padding: 0.4rem 0.8rem;
  }

  .mega-work .mega-link-title {
    line-height: 1.2;
  }

  .mega-work .mega-link-text {
    margin-top: 0;
    line-height: 1.3;
  }
}


/* ----- Your Perks -----
   1) Featured Review card: less yellow. A softer champagne-to-copper pair
      instead of the strong yellow-orange, with gentler corner glows. The
      gradient edge and lit top edge stay, so it still reads as premium.
   2) The little example review: the tail of the speech bubble is the same
      solid colour as the bubble (it used to be a different dark blue).
   3) Desktop: the last two cards are centred as a pair. (The last card was
      only 2 of 6 columns wide, which left an empty column on the right.) */
.perk-card:nth-child(2) {
  --p1: 232, 192, 148;
  --p2: 205, 138, 120;
  background:
    radial-gradient(circle at 100% 0, rgba(var(--p1), 0.1), transparent 58%),
    radial-gradient(circle at 0 100%, rgba(var(--p2), 0.08), transparent 55%),
    linear-gradient(180deg, var(--color-surface-raised), var(--color-surface)) padding-box,
    linear-gradient(135deg, rgba(var(--p1), 0.62), rgba(var(--p2), 0.36) 55%, rgba(var(--p1), 0.12)) border-box;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 24px 50px -30px rgba(0, 0, 0, 0.9),
    0 0 54px -38px rgba(var(--p1), 0.55);
}

.perk-card:nth-child(2) .mock-stars {
  text-shadow: 0 0 12px rgba(var(--p2), 0.35);
}

.mock-bubble {
  background-color: #0a1022;
}

.mock-bubble::after {
  background-color: inherit;
}

@media (min-width: 960px) {
  .perks-grid {
    grid-template-columns: repeat(12, minmax(0, 1fr));
  }

  .perk-card:nth-child(1) { grid-column: 1 / span 6; grid-row: 1 / span 2; }
  .perk-card:nth-child(2) { grid-column: 7 / span 6; grid-row: 1; }
  .perk-card:nth-child(3) { grid-column: 7 / span 6; grid-row: 2; }
  .perk-card:nth-child(4) { grid-column: 2 / span 6; grid-row: 3; }
  .perk-card:nth-child(5) { grid-column: 8 / span 4; grid-row: 3; }
}


/* ==========================================================
   HALLOWEEN: new decorations
   ========================================================== */
.hw-ghost-cheek {
  fill: rgba(255, 140, 175, 0.5);
}

.hw-ghost-shine {
  fill: #fff;
  opacity: 0.85;
}

.hw-bat-eye {
  fill: #ffd45a;
  stroke: none;
}

/* Harvest moon, top right, inside the warm glow */
.hw-moon {
  position: absolute;
  top: calc(var(--header-height) + 4rem);
  right: 8%;
  width: clamp(70px, 8vw, 112px);
  filter: drop-shadow(0 0 26px rgba(255, 166, 70, 0.5));
  animation: hw-moon-glow 6s ease-in-out infinite alternate;
}

.hw-moon svg {
  display: block;
  width: 100%;
  height: auto;
}

@keyframes hw-moon-glow {
  from { opacity: 0.82; }
  to   { opacity: 1; }
}

/* The witch crosses the sky (right to left, past the moon), then rests a while */
.hw-witch {
  position: absolute;
  left: 100%;
  top: calc(var(--header-height) + 5.4rem);
  width: clamp(80px, 8vw, 120px);
  opacity: 0;
  animation: hw-witch var(--dur, 42s) linear var(--delay, 5s) infinite;
  will-change: transform, opacity;
}

.hw-witch-bob {
  display: block;
  animation: hw-witch-bob 1.4s ease-in-out infinite alternate;
}

.hw-witch svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
  filter: drop-shadow(0 0 1.5px rgba(255, 190, 110, 0.95)) drop-shadow(0 0 7px rgba(255, 150, 60, 0.4));
}

.hw-witch-sil {
  fill: #1d1040;
  stroke: #1d1040;
  stroke-width: 0.6;
  stroke-linejoin: round;
}

.hw-witch-cut {
  fill: none;
  stroke: #4a3590;
  stroke-width: 1.2;
  stroke-linecap: round;
}

@keyframes hw-witch {
  0%   { opacity: 0; transform: translate(0, 0); }
  2%   { opacity: 1; }
  30%  { opacity: 1; transform: translate(calc(var(--span, 1400px) * -1), -26px); }
  32%  { opacity: 0; transform: translate(calc(var(--span, 1400px) * -1), -26px); }
  100% { opacity: 0; transform: translate(calc(var(--span, 1400px) * -1), -26px); }
}

@keyframes hw-witch-bob {
  from { transform: translateY(-5px) rotate(-1.5deg); }
  to   { transform: translateY(5px) rotate(1.5deg); }
}

/* Stars */
.hw-star {
  position: absolute;
  left: var(--x, 50%);
  top: var(--y, 20%);
  width: var(--s, 3px);
  height: var(--s, 3px);
  border-radius: 50%;
  background-color: #fff3d6;
  box-shadow: 0 0 6px 1px rgba(255, 230, 180, 0.5);
  opacity: 0;
  animation: hw-twinkle var(--dur, 4s) ease-in-out infinite var(--delay, 0s);
}

@keyframes hw-twinkle {
  0%, 100% { opacity: 0; transform: scale(0.6); }
  50%      { opacity: 0.85; transform: scale(1); }
}

/* Eyes in the dark: they open, blink twice, close */
.hw-eyes {
  position: absolute;
  left: var(--x, 5%);
  top: var(--y, 50%);
  display: flex;
  gap: 7px;
  opacity: 0;
  animation: hw-eyes 15s ease-in-out infinite var(--delay, 0s);
}

.hw-eyes i {
  display: block;
  width: 9px;
  height: 6px;
  border-radius: 50%;
  background: radial-gradient(ellipse 22% 72% at 50% 50%, #1b2a00 0 62%, #d6ff55 68%);
  box-shadow: 0 0 9px 2px rgba(190, 255, 60, 0.5);
  animation: hw-blink 15s ease-in-out infinite var(--delay, 0s);
}

@keyframes hw-eyes {
  0%, 6%    { opacity: 0; }
  10%, 46%  { opacity: 0.9; }
  52%, 100% { opacity: 0; }
}

@keyframes hw-blink {
  0%, 18%  { transform: scaleY(1); }
  20%      { transform: scaleY(0.1); }
  22%, 34% { transform: scaleY(1); }
  36%      { transform: scaleY(0.1); }
  38%, 100% { transform: scaleY(1); }
}

/* Candy corn and little pumpkins drift like the ghosts, with a warm glow */
.hw-ghost.hw-float svg {
  filter: drop-shadow(0 0 8px rgba(255, 150, 50, 0.5));
}

/* A tiny bat flapping in the Work menu decor */
.mega-decor-bat {
  position: absolute;
  right: 5.7rem;
  top: 0.15rem;
  width: 1.5rem;
  animation: hw-bob 0.6s ease-in-out infinite alternate;
}

.mega-decor-bat svg {
  display: block;
  width: 100%;
  height: auto;
  fill: #0b0f1d;
  stroke: rgba(var(--rgb-orange), 0.7);
  stroke-width: 0.8;
  stroke-linejoin: round;
  transform-origin: 50% 55%;
  animation: hw-flap 0.32s ease-in-out infinite alternate;
}

@media (max-width: 760px) {
  .hw-witch {
    display: none;
  }

  .hw-moon {
    right: 4%;
    width: 64px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hw-witch,
  .hw-eyes,
  .hw-eyes i,
  .hw-star,
  .hw-moon,
  .mega-decor-bat,
  .mega-decor-bat svg {
    animation: none;
  }

  .hw-witch,
  .hw-eyes {
    opacity: 0;
  }

  .hw-star {
    opacity: 0.6;
  }
}


/* ==========================================================
   CHRISTMAS: new decorations
   ========================================================== */
.xm-cap-ring {
  fill: rgba(0, 0, 0, 0.18);
}

.xm-stripe {
  fill: none;
  stroke: rgba(255, 255, 255, 0.55);
  stroke-width: 1.6;
  stroke-linecap: round;
}

.xm-hang-star,
.xm-hang-flake {
  width: 30px;
  margin-left: -15px;
}

.xm-hang-star svg,
.xm-hang-flake svg {
  width: 30px;
}

.xm-star-shape {
  fill: #ffd166;
  stroke: #e0a82e;
  stroke-width: 1;
  stroke-linejoin: round;
}

.xm-star-shine {
  fill: none;
  stroke: #fff6d8;
  stroke-width: 1.4;
  stroke-linecap: round;
}

.xm-flake-shape {
  fill: none;
  stroke: #e4f4ff;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Tiny lights on the garland */
.xm-lightbulb {
  animation: xm-twinkle var(--d, 2s) ease-in-out infinite alternate;
  animation-delay: var(--delay, 0s);
}

/* Crescent moon (top right) */
.xm-moon {
  position: absolute;
  top: calc(var(--header-height) + 6.2rem);
  right: 6%;
  width: clamp(48px, 5vw, 72px);
  filter: drop-shadow(0 0 18px rgba(255, 241, 201, 0.45));
  opacity: 0.9;
}

.xm-moon svg {
  display: block;
  width: 100%;
  height: auto;
}

/* Santa's sleigh: a silhouette with a rim of light.
   outer .xm-sleigh   = flies across (left to right), then rests
   .xm-sleigh-wave    = rises and falls in a wave
   .xm-sleigh-tilt    = banks with the wave
   inside the svg     = galloping legs, nodding heads, bobbing reindeer,
                        a waving Santa, twinkling sparkles behind */
.xm-sleigh {
  position: absolute;
  left: -330px;
  top: calc(var(--header-height) + 5rem);
  width: clamp(220px, 22vw, 330px);
  opacity: 0;
  animation: xm-sleigh var(--dur, 36s) linear var(--delay, 3s) infinite;
  will-change: transform, opacity;
}

.xm-sleigh-wave {
  display: block;
  animation: xm-wave 3.6s ease-in-out infinite alternate;
}

.xm-sleigh-tilt {
  display: block;
  transform-origin: 50% 60%;
  animation: xm-tilt 3.6s ease-in-out infinite alternate;
}

.xm-sleigh svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
  filter: drop-shadow(0 0 1.5px rgba(255, 232, 170, 0.95)) drop-shadow(0 0 8px rgba(255, 200, 110, 0.35));
}

.xm-sil {
  fill: #0e1738;
  stroke: #0e1738;
  stroke-linejoin: round;
}

.xm-sleigh-body {
  animation: xm-sleigh-sway 1.8s ease-in-out infinite alternate;
  transform-origin: 50px 60px;
}

.xm-reins {
  stroke: #ffe9a8;
  opacity: 0.7;
}

.xm-nose {
  fill: #ff4d4d;
  stroke: none;
}

.xm-nose-glow {
  fill: rgba(255, 60, 60, 0.35);
  stroke: none;
  animation: xm-nose 1s ease-in-out infinite alternate;
}

.xm-leg {
  transform-origin: 0 0;
  animation: xm-gallop 0.5s ease-in-out infinite alternate;
}

.xm-leg-b {
  animation-direction: alternate-reverse;
}

.xm-deer-bob {
  animation: xm-leap 0.5s ease-in-out infinite alternate;
}

.xm-deer-head {
  transform-origin: 62px -28px;
  animation: xm-nod 0.5s ease-in-out infinite alternate;
}

.xm-tail {
  transform-origin: 2px 0;
  animation: xm-wag 0.25s ease-in-out infinite alternate;
}

.xm-santa-arm {
  transform-origin: 0 0;
  animation: xm-wave-arm 0.9s ease-in-out infinite alternate;
}

.xm-sparkles circle {
  fill: #ffe9a8;
  stroke: none;
  transform-box: fill-box;
  transform-origin: center;
  animation: xm-spark 1s ease-in-out infinite alternate;
}

.xm-sparkles circle:nth-child(2) { animation-delay: -0.2s; }
.xm-sparkles circle:nth-child(3) { animation-delay: -0.4s; }
.xm-sparkles circle:nth-child(4) { animation-delay: -0.6s; }
.xm-sparkles circle:nth-child(5) { animation-delay: -0.8s; }

@keyframes xm-sleigh {
  0%   { opacity: 0; transform: translateX(0); }
  2%   { opacity: 1; }
  38%  { opacity: 1; transform: translateX(var(--span, 1500px)); }
  40%  { opacity: 0; transform: translateX(var(--span, 1500px)); }
  100% { opacity: 0; transform: translateX(var(--span, 1500px)); }
}

@keyframes xm-wave {
  from { transform: translateY(-22px); }
  to   { transform: translateY(26px); }
}

@keyframes xm-tilt {
  from { transform: rotate(-4deg); }
  to   { transform: rotate(4deg); }
}

@keyframes xm-sleigh-sway {
  from { transform: rotate(-1.5deg); }
  to   { transform: rotate(1.5deg); }
}

@keyframes xm-gallop {
  from { transform: rotate(-34deg); }
  to   { transform: rotate(30deg); }
}

@keyframes xm-leap {
  from { transform: translateY(2px) rotate(2deg); }
  to   { transform: translateY(-4px) rotate(-3deg); }
}

@keyframes xm-nod {
  from { transform: rotate(-4deg); }
  to   { transform: rotate(5deg); }
}

@keyframes xm-wag {
  from { transform: rotate(-12deg); }
  to   { transform: rotate(14deg); }
}

@keyframes xm-wave-arm {
  from { transform: rotate(-14deg); }
  to   { transform: rotate(16deg); }
}

@keyframes xm-spark {
  from { opacity: 0.25; transform: scale(0.6); }
  to   { opacity: 1; transform: scale(1.25); }
}

@keyframes xm-nose {
  from { opacity: 0.4; }
  to   { opacity: 1; }
}

.mega-decor-dot--b {
  width: 3px;
  height: 3px;
  opacity: 0.7;
}

@media (prefers-reduced-motion: reduce) {
  .xm-sleigh,
  .xm-sleigh-wave,
  .xm-sleigh-tilt,
  .xm-leg,
  .xm-deer-bob,
  .xm-deer-head,
  .xm-tail,
  .xm-santa-arm,
  .xm-lightbulb {
    animation: none;
  }

  .xm-sleigh {
    opacity: 0;
  }
}



/* ==========================================================
   FASTER SECTION ENTRANCE
   Sections now appear in about half the time, with a shorter slide and a
   shorter stagger between neighbouring cards.
   ========================================================== */
.reveal.is-visible {
  animation: reveal-in 0.28s ease-out backwards;
  animation-delay: calc(var(--reveal-i, 0) * 30ms);
}

@keyframes reveal-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}


/* ==========================================================
   PERKS: card layouts
   Portfolio Placement: text on top, example image below.
   Referral Discount: the big "15% off" on top, text below.
   ========================================================== */
@media (min-width: 640px) {
  .perk-card--referral {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    align-content: normal;
  }

  .perk-card--referral .perk-big {
    flex-direction: row;
    align-items: baseline;
    align-self: auto;
    gap: 0.5rem;
    margin: 0 0 0.6rem;
  }

  .perk-card--referral .perk-title,
  .perk-card--referral .perk-text {
    grid-area: auto;
    align-self: auto;
  }
}

@media (min-width: 960px) {
  .perk-card:nth-child(4) {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    align-content: normal;
    align-items: stretch;
  }

  .perk-card:nth-child(4) .perk-title,
  .perk-card:nth-child(4) .perk-text {
    grid-area: auto;
    align-self: auto;
  }

  .perk-card:nth-child(4) .perk-mock {
    grid-area: auto;
    margin-top: 1.1rem;
  }
}


/* ==========================================================
   HALLOWEEN: spider webs on buttons and frames
   Built by script.js (the "Spider webs / snow" part of the seasonal extras).
   ========================================================== */
.season-web {
  position: absolute;
  top: 0;
  z-index: 2;
  width: 34px;
  height: 34px;
  opacity: 0.8;
  pointer-events: none;
  -webkit-mask-image: radial-gradient(circle at 0 0, #000 40%, transparent 100%);
          mask-image: radial-gradient(circle at 0 0, #000 40%, transparent 100%);
}

.season-web--frame {
  width: 62px;
  height: 62px;
}

.season-web.is-left {
  left: 0;
}

.season-web.is-right {
  right: 0;
  transform: scaleX(-1);
}

.season-web svg {
  display: block;
  width: 100%;
  height: 100%;
}

.season-web path {
  fill: none;
  stroke: rgba(228, 234, 255, 0.9);
  stroke-width: 1;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}


/* ==========================================================
   SUMMER: reworked (no clouds)
   Sun, swaying palm fronds, seagulls, a sailboat, three layers of waves,
   glitter on the water and bubbles.
   ========================================================== */
.sm-decor {
  -webkit-mask-image: linear-gradient(to bottom, #000 0, #000 92%, transparent 100%);
          mask-image: linear-gradient(to bottom, #000 0, #000 92%, transparent 100%);
}

.sm-sun-rays {
  animation: sm-spin 70s linear infinite, sm-pulse 4s ease-in-out infinite alternate;
}

@keyframes sm-pulse {
  from { opacity: 0.6; }
  to   { opacity: 1; }
}

.sm-sun {
  top: calc(var(--header-height) * 2 + 0.8rem);
}

.sm-palm {
  position: absolute;
  top: calc(var(--header-height) * 2 - 1.2rem);
  width: clamp(150px, 17vw, 240px);
  opacity: 0.85;
}

.sm-palm svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

.sm-palm-left {
  left: -2%;
}

.sm-palm-right {
  right: -2%;
  transform: scaleX(-1);
}

.sm-frond {
  transform-origin: 0 0;
  animation: sm-sway 5s ease-in-out infinite alternate;
  animation-delay: var(--d, 0s);
}

.sm-leaf {
  fill: #1e9a66;
  stroke: #0e5a3c;
  stroke-width: 0.8;
}

.sm-rib {
  fill: none;
  stroke: #5fd6a0;
  stroke-width: 1;
  opacity: 0.55;
  stroke-linecap: round;
}

@keyframes sm-sway {
  from { transform: rotate(-3deg); }
  to   { transform: rotate(3.5deg); }
}

.sm-gull {
  position: absolute;
  left: -60px;
  top: var(--y, 20%);
  width: var(--w, 24px);
  animation: sm-fly var(--dur, 36s) linear var(--delay, 0s) infinite;
  will-change: transform;
}

.sm-gull-glide {
  display: block;
  animation: sm-glide 5s ease-in-out infinite alternate;
}

.sm-gull svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

.sm-gull-wing {
  fill: #eef6ff;
  transform-origin: 50% 70%;
  animation: sm-flap 1.1s ease-in-out infinite alternate;
}

@keyframes sm-fly {
  from { transform: translateX(0); }
  to   { transform: translateX(var(--span, 1600px)); }
}

@keyframes sm-glide {
  from { transform: translateY(-10px); }
  to   { transform: translateY(12px); }
}

@keyframes sm-flap {
  from { transform: scaleY(1); }
  to   { transform: scaleY(0.45); }
}

.sm-wave-back { fill: rgba(45, 212, 220, 0.14); }
.sm-wave-front { fill: rgba(45, 212, 220, 0.24); }

.sm-wave-mid {
  height: 82%;
  fill: rgba(45, 212, 220, 0.18);
  animation-duration: 17s;
}

.sm-boat {
  position: absolute;
  left: -90px;
  bottom: 30px;
  width: 52px;
  animation: sm-fly var(--dur, 150s) linear infinite;
}

.sm-boat-rock {
  display: block;
  transform-origin: 50% 90%;
  animation: sm-rock 3.4s ease-in-out infinite alternate;
}

.sm-boat svg {
  display: block;
  width: 100%;
  height: auto;
}

@keyframes sm-rock {
  from { transform: translateY(2px) rotate(-5deg); }
  to   { transform: translateY(-3px) rotate(5deg); }
}

.sm-glint {
  position: absolute;
  left: var(--x, 50%);
  bottom: 14px;
  width: 7px;
  height: 2px;
  border-radius: 2px;
  background: #fff;
  box-shadow: 0 0 6px 1px rgba(255, 255, 255, 0.6);
  opacity: 0;
  animation: sm-glint var(--dur, 3s) ease-in-out infinite var(--delay, 0s);
}

@keyframes sm-glint {
  0%, 100% { opacity: 0; transform: scaleX(0.4); }
  50%      { opacity: 0.85; transform: scaleX(1); }
}

@media (max-width: 760px) {
  .sm-gull:nth-of-type(n+3) {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sm-frond,
  .sm-gull,
  .sm-gull-glide,
  .sm-gull-wing,
  .sm-boat,
  .sm-boat-rock,
  .sm-glint,
  .sm-sun-rays {
    animation: none;
  }

  .sm-gull,
  .sm-glint {
    display: none;
  }
}


/* Referral Discount: the card is only as tall as its content (it used to
   stretch to the height of the Portfolio card next to it and left empty space) */
@media (min-width: 960px) {
  .perk-card:nth-child(5) {
    align-self: start;
  }
}


/* ==========================================================
   CHRISTMAS SNOW ON BUTTONS AND IMAGES
   Built by script.js (CHRISTMAS_SNOW_ON_ITEMS). The shapes are drawn
   there; this only places them: a small drift on top of a button.
   ========================================================== */
.snow-cap {
  position: absolute;
  display: block;
  line-height: 0;
  pointer-events: none;
}

.snow-cap svg {
  display: block;
  overflow: visible;
}

/* Pages (e.g. contact.html) size every svg inside their buttons to icon size.
   The snow is an svg too, so keep it at the size script.js drew it. */
.button.has-snow > .snow-cap svg {
  flex: none;
  width: auto;
  height: auto;
  max-width: none;
}

/* Above the button's edge, over its own light effects */
.snow-cap--over {
  z-index: 3;
  filter: drop-shadow(0 1px 1.5px rgba(2, 8, 24, 0.5));
}

/* Buttons normally hide anything outside their edge. With snow on top they
   must not, so the light sweep stays inside the button instead of sliding
   past its edge (same fix as buttons with a seasonal icon). */
.button.has-snow {
  overflow: visible;
}

.button.has-snow::after {
  border-radius: inherit;
  background-repeat: no-repeat;
  background-size: 300% 100%;
  background-position: 0 0;
  transform: none;
}

.button.has-snow:hover::after,
.button.has-snow:focus-visible::after {
  transform: none;
  background-position: 100% 0;
  transition: background-position 0.7s cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* No snow on locked buttons (it would fade with them) or in the Terms modal's
   button row (the drift would sit on top of the checkbox line above). */
.button[disabled] > .snow-cap,
.button[aria-disabled="true"] > .snow-cap,
.tos-actions .snow-cap {
  display: none;
}

@media print {
  .snow-cap {
    display: none;
  }
}
 

/* ==========================================================
   SEASONAL CLICK EFFECT (snowflakes / Halloween bits)
   Built by script.js (SEASON_CLICK_EFFECTS).
   ========================================================== */
.fx-layer {
  position: fixed;
  inset: 0;
  z-index: 2500;
  overflow: hidden;
  pointer-events: none;
}

.fx-bit {
  position: absolute;
  display: block;
  pointer-events: none;
  opacity: 0;
  will-change: transform, opacity;
  filter: drop-shadow(0 0 5px rgba(160, 210, 255, 0.9));
}

.fx-layer--halloween .fx-bit {
  filter: drop-shadow(0 0 6px rgba(255, 150, 50, 0.5));
}

.fx-bit svg {
  display: block;
  width: 100%;
  height: 100%;
}

.fx-bit--bat svg {
  fill: #0b0f1d;
  stroke: rgba(var(--rgb-orange), 0.85);
  stroke-width: 0.8;
  stroke-linejoin: round;
}

@media (prefers-reduced-motion: reduce) {
  .fx-layer {
    display: none;
  }
}


/* ==========================================================
   HOLIDAY COUNTDOWN BAR
   Built by script.js (HOLIDAY_COUNTDOWN). Sits above the top bar.
   ========================================================== */
.holiday-bar {
  --hb: 255, 82, 82;
  --hb2: 61, 220, 132;
  position: relative;
  border-bottom: 1px solid rgba(var(--hb), 0.3);
  background:
    linear-gradient(90deg, rgba(var(--hb), 0.24), rgba(var(--hb2), 0.16)),
    #080e1e;
  font-size: 0.86rem;
  line-height: 1.2;
}

.holiday-bar--halloween {
  --hb: 255, 138, 61;
  --hb2: 130, 112, 225;
}

.holiday-bar-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.2rem 0.9rem;
  padding: 0.5rem 3rem 0.5rem 3rem;
}

.holiday-bar-icon {
  display: inline-flex;
  width: 1.5rem;
  height: 1.5rem;
}

.holiday-bar-icon svg {
  display: block;
  width: 100%;
  height: 100%;
}

.holiday-bar-label {
  color: var(--color-text);
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.01em;
}

.holiday-bar-time {
  display: inline-flex;
  align-items: baseline;
  gap: 0.15rem;
  font-variant-numeric: tabular-nums;
}

.holiday-bar-time b {
  color: #fff;
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 800;
}

.holiday-bar-time span {
  margin-right: 0.4rem;
  color: var(--color-text-muted);
  font-size: 0.74rem;
  font-weight: 700;
  text-transform: uppercase;
}

.holiday-bar-close {
  position: absolute;
  top: 50%;
  right: 0.75rem;
  display: grid;
  place-items: center;
  width: 1.9rem;
  height: 1.9rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--color-text-muted);
  cursor: pointer;
  transform: translateY(-50%);
  transition: background-color 0.15s ease, color 0.15s ease;
}

.holiday-bar-close:hover,
.holiday-bar-close:focus-visible {
  background-color: rgba(255, 255, 255, 0.1);
  color: #fff;
}

@media (max-width: 639px) {
  .holiday-bar-inner {
    padding: 0.5rem 2.6rem 0.5rem 1rem;
    font-size: 0.8rem;
  }
}

@media print {
  .holiday-bar,
  .fx-layer {
    display: none;
  }
}


/* ==========================================================
   SUMMER: sunrays
   Soft white beams that fan out from the sun in the top right and sweep
   across the screen to the left. Only the left-facing part of the fan is
   drawn (the angle mask), and it fades out with distance. The two layers
   sway slowly in opposite directions, so the rays drift and cross.
   Built by script.js (SUMMER_DECOR).
   Strength: change the two rgba(255, 255, 255, ...) numbers below.
   ========================================================== */
.sm-rays {
  position: absolute;
  top: calc(var(--header-height) * 2 + 0.8rem);
  right: 7%;
  width: 104px;
  height: 104px;
  pointer-events: none;
}

.sm-rays::before,
.sm-rays::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 3600px;
  height: 3600px;
  margin: -1800px 0 0 -1800px;
  border-radius: 50%;
  /* distance fade x angle (only the beams that point left and down-left) */
  -webkit-mask-image:
    radial-gradient(circle, #000 0, rgba(0, 0, 0, 0.75) 26%, transparent 78%),
    conic-gradient(from 0deg, transparent 0 140deg, #000 190deg 270deg, transparent 320deg 360deg);
  -webkit-mask-composite: source-in;
          mask-image:
    radial-gradient(circle, #000 0, rgba(0, 0, 0, 0.75) 26%, transparent 78%),
    conic-gradient(from 0deg, transparent 0 140deg, #000 190deg 270deg, transparent 320deg 360deg);
          mask-composite: intersect;
  transform-origin: 50% 50%;
}

.sm-rays::before {
  background: repeating-conic-gradient(from 0deg, rgba(255, 255, 255, 0.1) 0deg 3deg, transparent 3deg 14deg);
  animation: sm-ray-sway 22s ease-in-out infinite alternate, sm-pulse 6s ease-in-out infinite alternate;
}

.sm-rays::after {
  background: repeating-conic-gradient(from 6deg, rgba(255, 255, 255, 0.06) 0deg 2deg, transparent 2deg 9deg);
  animation: sm-ray-sway 30s ease-in-out infinite alternate-reverse;
}

@keyframes sm-ray-sway {
  from { transform: rotate(-5deg); }
  to   { transform: rotate(5deg); }
}

@media (max-width: 760px) {
  .sm-rays {
    right: 5%;
    width: 76px;
    height: 76px;
  }

  .sm-rays::before,
  .sm-rays::after {
    width: 2000px;
    height: 2000px;
    margin: -1000px 0 0 -1000px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sm-rays::before,
  .sm-rays::after {
    animation: none;
  }
}


/* ==========================================================
   BUTTON HOVER FIXES
   1) Nothing on a button slides to the right on hover any more (the arrows
      used to move, and that also pushed the seasonal icons and the snow
      sideways, because they are drawings inside the button too).
   2) Blue primary buttons no longer get a see-through outline ring and
      glow on hover. They get a clearly brighter blue and a soft shadow.
   ========================================================== */
.button:hover svg,
.button:focus-visible svg,
.footer-cta:hover svg,
.footer-cta:focus-visible svg,
.work-footer .work-all-button:hover svg,
.work-footer .work-all-button:focus-visible svg,
.pc-button:hover .pc-arrow,
.pc-button:focus-visible .pc-arrow,
.pc-portfolio:hover .pc-arrow,
.pc-portfolio:focus-visible .pc-arrow {
  transform: none !important;
}

.button-primary:hover,
.button-primary:focus-visible,
.footer-cta:hover,
.footer-cta:focus-visible {
  background-color: #3a86ff;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.34),
    0 14px 26px -12px rgba(37, 118, 242, 0.9);
}

.sale-popup--christmas .sale-popup-cta:hover,
.sale-popup--christmas .sale-popup-cta:focus-visible,
.sale-popup--summer .sale-popup-cta:hover,
.sale-popup--summer .sale-popup-cta:focus-visible {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.32),
    0 14px 26px -12px rgba(var(--rgb-orange), 0.85);
}

/* ==========================================================
   MOST RECENT X POSTS  (news page and homepage)
   The posts are listed in news-data.js (X_POSTS) and drawn by script.js.
   Every post starts as a quiet card. Nothing from X loads until a visitor
   clicks "Load post" (or "Load all posts"), so the page stays fast and no
   X cookies are set up front.
   ========================================================== */
.x-posts {
  position: relative;
}

.x-posts-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-2) var(--space-3);
  margin-bottom: var(--space-4);
}

.x-posts-lead {
  max-width: 44rem;
  margin: var(--space-2) 0 0;
  color: var(--color-text-muted);
}

.x-posts-all {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  color: var(--color-accent-bright);
  font-weight: 600;
  text-decoration: none;
  transition: color var(--transition);
}

.x-posts-all:hover,
.x-posts-all:focus-visible {
  color: #fff;
}

.x-posts-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}

.x-posts-status {
  color: var(--color-text-muted);
  font-size: 0.9rem;
}

.x-posts-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  gap: var(--space-3);
  align-items: start;
}

.x-post {
  display: flex;
  flex-direction: column;
  min-height: 12rem;
  padding: var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  background: var(--color-surface);
}

.x-post-top {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-weight: 700;
}

.x-post-icon {
  flex: none;
  width: 1.05rem;
  height: 1.05rem;
  color: var(--color-silver);
}

.x-post-handle {
  color: var(--color-text-muted);
  font-weight: 500;
}

.x-post-note {
  flex: 1;
  margin: var(--space-2) 0;
  color: var(--color-text-muted);
  font-size: 0.92rem;
  line-height: 1.5;
}

.x-post-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem 1rem;
}

.x-post-open {
  color: var(--color-accent-bright);
  font-size: 0.9rem;
  font-weight: 600;
}

/* ----- Custom X post card (same look as the X card in "Your Perks") -----
   Built by script.js from an object in X_POSTS (news-data.js). It is plain
   HTML and CSS: nothing is loaded from X, and "View on X" opens the real post. */
.x-post--custom {
  --p1: var(--rgb-blue);
  --p2: 150, 130, 255;
  width: 100%;
  max-width: 36rem;
  min-height: 0;
  padding: 1.15rem 1.25rem 1.2rem;
  border: 1px solid transparent;
  border-radius: 20px;
  background:
    radial-gradient(circle at 100% 0, rgba(var(--p1), 0.2), transparent 58%),
    radial-gradient(circle at 0 100%, rgba(var(--p2), 0.16), transparent 55%),
    linear-gradient(180deg, var(--color-surface-raised), var(--color-surface)) padding-box,
    linear-gradient(135deg, rgba(var(--p1), 0.85), rgba(var(--p2), 0.55) 55%, rgba(var(--p1), 0.18)) border-box;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 24px 50px -30px rgba(0, 0, 0, 0.9),
    0 0 60px -34px rgba(var(--p1), 0.8),
    0 0 60px -40px rgba(var(--p2), 0.7);
}

.x-post-head {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.x-post--custom .mock-avatar {
  width: 44px;
  height: 44px;
}

.x-post-who {
  display: flex;
  flex-direction: column;
  min-width: 0;
  line-height: 1.3;
}

.x-post-name {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  min-width: 0;
  color: var(--color-text);
  font-size: 0.98rem;
  font-weight: 700;
}

.x-post-name > span:first-child {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.x-post-verified {
  flex: none;
  width: 1.15rem;
  height: 1.15rem;
  color: #1d9bf0;
}

.x-post-meta {
  color: var(--color-text-muted);
  font-size: 0.84rem;
}

.x-post-head .mock-x {
  width: 18px;
  height: 18px;
}

.x-post-head .mock-x:hover,
.x-post-head .mock-x:focus-visible {
  color: #fff;
  opacity: 1;
}

.x-post-text {
  margin: 0.85rem 0 0;
  color: var(--color-text);
  font-size: 0.97rem;
  line-height: 1.5;
}

.x-post-text + .x-post-text {
  margin-top: 0.55rem;
}

.x-post-text a,
.x-post-tag {
  color: var(--color-accent-bright);
  text-decoration: none;
}

.x-post-text a:hover,
.x-post-text a:focus-visible {
  text-decoration: underline;
}

.x-post-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.15rem 0.6rem;
}

.x-post-media {
  position: relative;
  display: block;
  margin-top: 0.85rem;
  overflow: hidden;
  border: 1px solid rgba(var(--p1), 0.3);
  border-radius: 14px;
  background: #08112a;
  line-height: 0;
}

/* Any picture shape sits centred in a 16:9 frame; the space around it is the same picture, blurred */
.x-post-media::before {
  content: "";
  position: absolute;
  inset: -24px;
  background: var(--img, none) center / cover no-repeat;
  filter: blur(22px) brightness(0.65) saturate(1.15);
}

.x-post-media img {
  position: relative;
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: contain;
}

.x-post--custom .x-post-actions {
  justify-content: space-between;
  margin-top: 0.95rem;
}

.x-post-date {
  color: var(--color-text-muted);
  font-size: 0.84rem;
}

/* Very subtle 3D tilt toward the mouse on every X post (the angles are set by script.js / socials.js).
   No lift and no zoom: the card and its picture keep their size. */
.x-post:not(.is-loaded) {
  transition: transform 0.45s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.x-post.is-tilting {
  transform: perspective(1800px) rotateX(var(--x-rx, 0deg)) rotateY(var(--x-ry, 0deg));
  transition-duration: 0.12s;
  will-change: transform;
}

@media (prefers-reduced-motion: reduce) {
  .x-post:not(.is-loaded) {
    transition: none;
  }
}

/* Once loaded, the card steps aside and the post from X shows by itself */
.x-post.is-loaded {
  min-height: 0;
  padding: 0;
  border: 0;
  background: transparent;
}

.x-post .twitter-tweet {
  margin: 0 auto !important;
}

.x-posts-empty {
  grid-column: 1 / -1;
}

.x-posts-noscript {
  color: var(--color-text-muted);
}

/* ==========================================================
   MEGA MENU: equal buttons
   The four Work buttons are always exactly the same size: columns are
   equal, and every row is as tall as the tallest button, whatever the
   text length or the font.
   ========================================================== */
.mega-work .mega-links {
  grid-auto-rows: 1fr;
}


/* ==========================================================
   PRICING PAGE: round 2
   Shared "every order" strip, spec chips on the cards, Robux hint, BUNDLES.
   ========================================================== */

/* Title area: the lead and the strip stack on the side the title area is aligned to */
.pc-head-aside {
  display: flex;
  flex-direction: column;
  align-items: inherit;
  gap: 0.6rem;
}

.pc-head-aside .services-lead {
  margin: 0;
}

.pc-includes {
  display: flex;
  flex-wrap: wrap;
  justify-content: inherit;
  gap: 0.35rem 1.4rem;
  margin: 0;
  padding: 0;
  list-style: none;
  color: var(--color-text-muted);
  font-size: 0.88rem;
}

.pc-includes li {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.pc-includes li::before {
  content: "";
  flex: none;
  width: 0.95rem;
  height: 0.95rem;
  background-color: var(--color-accent-bright);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='m3.5 8.5 3 3 6-7' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='m3.5 8.5 3 3 6-7' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Spec chips on the cards */
.pc-specs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.pc-specs li {
  padding: 0.22rem 0.65rem;
  border: 1px solid rgba(var(--rgb-silver), 0.18);
  border-radius: 999px;
  background-color: rgba(var(--rgb-blue), 0.06);
  color: var(--color-text-muted);
  font-size: 0.78rem;
  font-weight: 600;
  line-height: 1.3;
  white-space: nowrap;
}

/* Robux hint, under the carousel */
.pc-extra {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-2);
}

.pc-pay-hint {
  max-width: 46rem;
  margin: 0;
  color: var(--color-text-muted);
  font-size: 0.9rem;
  line-height: 1.5;
  text-align: center;
}

.pc-pay-hint a {
  color: var(--color-accent-bright);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: rgba(var(--rgb-blue), 0.4);
  text-underline-offset: 3px;
}

.pc-pay-hint a:hover,
.pc-pay-hint a:focus-visible {
  text-decoration-color: currentColor;
}

/* ----- BUNDLES -----
   Same design as the product cards: blue edge, a stage with the blurred artwork behind, name, description, spec chips
   and the soft price panel. The stage holds only the artwork, arranged (overlapped thumbnails, a channel line-up,
   fanned cards, posters around a sheet). On hover the artwork moves a little. Only transforms and opacity animate. */
.pc-bundles {
  padding: var(--space-3) 0 var(--space-4);
  scroll-margin-top: var(--header-height);
}

.pc-bundles .section-head {
  margin-bottom: var(--space-3);
}

.pc-bundle-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 960px) {
  .pc-bundle-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.pc-bundle {
  --t1: var(--rgb-blue);
  --t2: var(--rgb-silver);
  --spread: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
  isolation: isolate;
  border: 1px solid rgba(var(--rgb-blue), 0.18);
  border-radius: 20px;
  background-color: var(--color-surface);
  box-shadow: 0 24px 50px -30px rgba(0, 0, 0, 0.9);
  transition: border-color 0.2s ease, box-shadow 0.25s ease;
}

.pc-bundles.is-ready .pc-bundle:not(.is-visible) {
  --spread: 0;
}

.pc-bundle .pc-body {
  gap: 0.6rem;
  min-width: 0;
}

/* Text on top (it takes the spare height so the artwork and prices line up across a row), artwork below it, price at the bottom */
.pc-bundle .pc-bundle-head {
  flex: 1;
  padding: 1.05rem 1.2rem 0.9rem;
}

.pc-bundle .pc-bundle-foot {
  padding: 0.9rem 1.2rem 1.2rem;
}

.pc-bundle .pc-name,
.pc-bundle .pc-desc {
  margin: 0;
}

.pc-bundle .pc-name {
  font-size: 1.2rem;
}

.pc-bundle .pc-desc {
  min-height: 0;
  font-size: 0.9rem;
  line-height: 1.5;
}

/* On small screens the price panel stacks and the button spans it */
.pc-bundle .pc-buy {
  flex-direction: column;
  align-items: stretch;
  gap: 0.7rem;
  margin-top: auto;
  padding: 0.7rem 0.75rem;
}

.pc-bundle .pc-button {
  justify-content: center;
  width: 100%;
}

@media (min-width: 560px) {
  .pc-bundle .pc-buy {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }

  .pc-bundle .pc-price {
    flex: 1;
    min-width: 0;
  }

  .pc-bundle .pc-button {
    width: auto;
  }
}

/* "Separately": the first thing in the price panel. What the pieces cost on their own, struck through, and what you keep. */
.pc-bundle-was {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.2rem 0.5rem;
  width: 100%;
  padding-bottom: 0.55rem;
  margin-bottom: 0.15rem;
  border-bottom: 1px dashed rgba(var(--rgb-silver), 0.28);
}

.pc-bundle-was-label {
  color: var(--color-text-muted);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.pc-bundle-was-price {
  color: var(--color-text);
  font-size: 1.15rem;
  font-weight: 800;
  line-height: 1;
  text-decoration-color: var(--color-orange);
  text-decoration-thickness: 2px;
}

.pc-bundle-save {
  margin-left: auto;
  padding: 0.12rem 0.5rem;
  border-radius: 999px;
  background-color: rgba(var(--rgb-orange), 0.16);
  color: var(--color-orange);
  font-size: 0.72rem;
  font-weight: 800;
  white-space: nowrap;
}

/* ----- The stage: a wide, horizontal frame below the text ----- */
.pc-bundle-stage {
  display: grid;
  place-items: center;
  aspect-ratio: 2.4 / 1;
  container-type: size;
  background: transparent;   /* no blurred backdrop on bundles: the card colour shows through */
}

/* Product cards: no backdrop behind the artwork, the card colour shows through */
.pc-slide .pc-stage {
  background: transparent;
}

/* Real blur behind the artwork on every card (BACKDROP_BLUR = "css" in the script on pricing.html), slightly darkened. */
.pc-stage {
  --pc-blur: 6px;   /* blur strength: lower = sharper, higher = softer */
}

.pc-stage > .pc-stage-blur--css {
  object-fit: cover;
  filter: blur(var(--pc-blur)) brightness(0.72) saturate(1.1);
  transform: scale(1.1);   /* hides the soft edge the blur leaves at the border */
}

@media (max-width: 559px) {
  .pc-bundle-stage {
    aspect-ratio: 16 / 9;
  }
}

/* The scene is as large as the stage allows, at its own shape (--ar) */
.pc-scene {
  --ar: 2.5;
  position: relative;
  z-index: 1;
  width: min(calc(100cqw - 1.2rem), calc((100cqh - 1.2rem) * var(--ar)));
  aspect-ratio: var(--ar);
  container-type: inline-size;
  transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.22, 0.8, 0.3, 1);
}

/* Before a card has scrolled into view its scene is faded out */
.pc-bundles.is-ready .pc-bundle:not(.is-visible) .pc-scene {
  opacity: 0;
  transform: translateY(16px) scale(0.97);
}

/* ----- A piece of artwork (shows the product name until the picture loads), framed like the product artwork ----- */
.pc-piece {
  position: relative;
  display: block;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 10px;
  background: linear-gradient(145deg, rgba(var(--t1), 0.5), rgba(var(--t2), 0.14) 58%, rgba(8, 14, 30, 0.92));
  box-shadow: 0 16px 32px -20px rgba(0, 0, 0, 0.9);
}

.pc-piece--wide { aspect-ratio: 16 / 9; }
.pc-piece--poster { aspect-ratio: 4 / 3; }
.pc-piece--square { aspect-ratio: 1; }

.pc-piece-label {
  position: absolute;
  right: 0.55rem;
  bottom: 0.45rem;
  left: 0.55rem;
  color: rgba(255, 255, 255, 0.85);
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  line-height: 1.2;
  text-transform: uppercase;
  transition: opacity 0.3s ease;
}

.pc-piece img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.pc-piece.has-art .pc-piece-label {
  opacity: 0;
}

/* No file found for this piece: a dashed frame with the product name in the middle (the script also lists it in the console) */
.pc-piece.is-missing {
  border-style: dashed;
  border-color: rgba(255, 255, 255, 0.34);
}

.pc-piece.is-missing .pc-piece-label {
  top: 50%;
  bottom: auto;
  transform: translateY(-50%);
  text-align: center;
}

/* ===== Each bundle gets its own look (colour, emblem, decoration behind the artwork) ===== */
.pc-bundle {
  --t1: var(--rgb-blue);
  --t2: var(--rgb-silver);
  border-color: rgba(var(--t1), 0.3);
  background-image: radial-gradient(ellipse 95% 55% at 50% 0%, rgba(var(--t1), 0.16), transparent 72%);
}

.pc-bundle--red    { --t1: 232, 36, 52;  --t2: 150, 14, 40; }
.pc-bundle--blue   { --t1: 52, 130, 250; --t2: 30, 200, 240; }
.pc-bundle--green  { --t1: 28, 175, 100; --t2: 14, 130, 110; }
.pc-bundle--violet { --t1: 150, 90, 245; --t2: 214, 80, 240; }

/* YouTube: a stronger red wash from the top */
.pc-bundle--red {
  background-image:
    radial-gradient(ellipse 95% 60% at 50% 0%, rgba(232, 36, 52, 0.26), transparent 72%),
    linear-gradient(180deg, transparent 55%, rgba(232, 36, 52, 0.1));
}

/* Name row with the emblem */
.pc-bundle-title {
  display: flex;
  align-items: center;
  gap: 0.65rem;
}

.pc-bundle-emblem {
  display: grid;
  flex: none;
  place-items: center;
  width: 2.2rem;
  height: 2.2rem;
  border-radius: 11px;
  background: linear-gradient(145deg, rgb(var(--t1)), rgb(var(--t2)));
  color: #fff;
  box-shadow: 0 8px 18px -8px rgba(var(--t1), 0.9);
}

.pc-bundle-emblem svg {
  width: 1.3rem;
  height: 1.3rem;
}

/* Price panel and button in the bundle's colour */
.pc-bundle .pc-buy {
  border-color: rgba(var(--t1), 0.32);
  background:
    radial-gradient(ellipse 90% 140% at 0% 0%, rgba(var(--t1), 0.2), transparent 70%),
    rgba(var(--t1), 0.06);
}

.pc-bundle .pc-button {
  border-color: transparent;
  background-color: rgb(var(--t1));
  background-image: linear-gradient(135deg, rgb(var(--t1)), rgb(var(--t2)));
  color: #fff;
}

.pc-bundle .pc-button:hover,
.pc-bundle .pc-button:focus-visible {
  filter: brightness(1.12);
}

/* Decoration layer behind the artwork */
.pc-deco {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

.pc-deco::before {
  content: "";
  position: absolute;
  inset: 0;
}

.pc-deco-mark {
  position: absolute;
  top: 50%;
  right: -3%;
  height: 120%;
  aspect-ratio: 1;
  color: rgba(var(--t1), 0.14);
  transform: translateY(-50%) rotate(-12deg);
}

.pc-deco-mark svg {
  display: block;
  width: 100%;
  height: 100%;
}

/* YouTube: red glow from below, a video progress bar, the logo mark behind */
.pc-deco--red::before {
  background:
    radial-gradient(ellipse 70% 90% at 50% 115%, rgba(232, 36, 52, 0.38), transparent 70%),
    linear-gradient(135deg, rgba(232, 36, 52, 0.16), transparent 55%);
}

.pc-deco--red .pc-deco-mark {
  right: auto;
  left: -4%;
  color: rgba(232, 36, 52, 0.16);
  transform: translateY(-50%) rotate(8deg);
}

.pc-deco-bar {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 4px;
  background: linear-gradient(90deg, #ff2a3c 0 38%, rgba(255, 255, 255, 0.2) 38%);
}

.pc-deco-bar::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 38%;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: #ff2a3c;
  box-shadow: 0 0 10px rgba(255, 42, 60, 0.8);
  transform: translate(-50%, -50%);
}

/* Game launch: stars, a light streak and a glow from below */
.pc-deco--blue::before {
  background:
    radial-gradient(circle at 10% 24%, #fff 0 1px, transparent 1.6px),
    radial-gradient(circle at 24% 70%, rgba(255, 255, 255, 0.8) 0 1px, transparent 1.6px),
    radial-gradient(circle at 38% 14%, rgba(255, 255, 255, 0.7) 0 1.2px, transparent 1.8px),
    radial-gradient(circle at 63% 84%, #fff 0 1px, transparent 1.6px),
    radial-gradient(circle at 78% 22%, rgba(255, 255, 255, 0.85) 0 1.3px, transparent 2px),
    radial-gradient(circle at 92% 62%, rgba(255, 255, 255, 0.7) 0 1px, transparent 1.6px),
    radial-gradient(ellipse 80% 80% at 50% 120%, rgba(52, 130, 250, 0.34), transparent 70%),
    linear-gradient(115deg, transparent 40%, rgba(120, 210, 255, 0.1) 50%, transparent 60%);
}

/* Hire me: a pin-board dot grid and a stamp */
.pc-deco--green::before {
  background:
    radial-gradient(rgba(var(--t1), 0.45) 1.2px, transparent 1.7px) 0 0 / 16px 16px,
    radial-gradient(ellipse 80% 90% at 50% 120%, rgba(28, 175, 100, 0.28), transparent 70%);
  -webkit-mask-image: radial-gradient(ellipse 75% 85% at 50% 50%, #000 35%, transparent 100%);
  mask-image: radial-gradient(ellipse 75% 85% at 50% 50%, #000 35%, transparent 100%);
}

.pc-deco-stamp {
  position: absolute;
  bottom: 0.7rem;
  left: 0.8rem;
  padding: 0.18rem 0.6rem;
  border: 2px dashed rgba(60, 220, 140, 0.7);
  border-radius: 6px;
  color: rgba(90, 235, 160, 0.9);
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  transform: rotate(-6deg);
}

/* Renders: a spotlight from above and twinkling sparkles */
.pc-deco--violet::before {
  background:
    radial-gradient(ellipse 60% 105% at 50% -10%, rgba(180, 110, 255, 0.4), transparent 70%),
    radial-gradient(ellipse 70% 60% at 50% 115%, rgba(214, 80, 240, 0.22), transparent 70%);
}

.pc-deco-spark {
  --s: 1rem;
  position: absolute;
  width: var(--s);
  height: var(--s);
  background: linear-gradient(145deg, #fff, rgb(214, 160, 255));
  clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%);
  opacity: 0.8;
  animation: pcb-twinkle 3.2s ease-in-out infinite;
}

@keyframes pcb-twinkle {
  0%, 100% { opacity: 0.25; }
  50% { opacity: 0.95; }
}

@media (prefers-reduced-motion: reduce) {
  .pc-deco-spark {
    animation: none;
  }
}

/* ===== Scene: game launch (Game Launch Pack) ===== */
.pc-scene--game {
  --ar: 2.5;
}

.pc-game-shot {
  position: absolute;
  width: 54%;
  transition: transform 0.5s cubic-bezier(0.22, 0.8, 0.3, 1);
}

.pc-game-shot.is-a { top: 0; left: 0; z-index: 1; transform: rotate(-3deg); }
.pc-game-shot.is-b { right: 0; bottom: 0; z-index: 2; transform: rotate(3deg); }

.pc-game-icon {
  position: absolute;
  bottom: -3%;
  left: 50%;
  z-index: 3;
  width: 24%;
  border: 2px solid rgba(255, 255, 255, 0.4);
  border-radius: 18px;
  transform: translateX(-50%) rotate(-4deg);
  transition: transform 0.5s cubic-bezier(0.3, 1.5, 0.5, 1);
}

/* ===== Scene: channel line-up (YouTuber Starter Pack) ===== */
.pc-scene--channel {
  --ar: 2;
}

.pc-ch-banner {
  width: 100%;
}

.pc-ch-videos {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 3cqw;
  margin: 8.5cqw 5cqw 0;
}

.pc-ch-videos .pc-piece {
  transition: transform 0.5s cubic-bezier(0.22, 0.8, 0.3, 1);
}

.pc-ch-videos .pc-piece:nth-child(odd) { transform: rotate(-1.5deg); }
.pc-ch-videos .pc-piece:nth-child(even) { transform: rotate(1.5deg); }

.pc-ch-pfp {
  position: absolute;
  top: 9cqw;
  right: 7cqw;
  z-index: 2;
  width: 15cqw;
  border: 3px solid rgba(255, 255, 255, 0.5);
  border-radius: 50%;
  transition: transform 0.4s cubic-bezier(0.3, 1.5, 0.5, 1);
}

/* ===== Scene: fanned cards (Render Pack, also the fallback) ===== */
.pc-scene--cards {
  --ar: 2.5;
  display: grid;
  place-items: center;
}

.pc-trade {
  --o: 0;
  position: relative;
  grid-area: 1 / 1;
  width: clamp(4.4rem, calc(var(--w, 28) * 1cqw), 8.5rem);
  padding: 0.28rem;
  overflow: hidden;
  border-radius: 12px;
  background: linear-gradient(150deg, var(--color-accent-bright), rgb(var(--t1)) 45%, rgba(var(--t2), 0.7) 100%);
  box-shadow: 0 18px 30px -14px rgba(0, 0, 0, 0.9);
  transform:
    translateX(calc(var(--o) * var(--k, 21) * var(--spread) * 1cqw))
    rotate(calc(var(--o) * 8deg * var(--spread)));
  transition: transform 0.5s cubic-bezier(0.22, 0.8, 0.3, 1);
}

/* The piece keeps its real shape (set by the script), so nothing is cropped */
.pc-trade .pc-trade-art {
  width: 100%;
  border: 0;
  border-radius: 8px;
  box-shadow: none;
}

/* A light streak crosses the cards on hover (same idea as the sheen on the Popular products) */
.pc-trade::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 38%, rgba(255, 255, 255, 0.3) 50%, transparent 62%);
  transform: translateX(-130%);
  transition: transform 0.9s ease;
  pointer-events: none;
}

/* ===== Scene: posters around a sheet (Hire Me Kit) ===== */
.pc-scene--pinboard {
  --ar: 2.5;
  display: grid;
  place-items: center;
}

.pc-pin {
  --x: 0cqw;
  --y: 0cqw;
  --r: 0deg;
  position: relative;
  grid-area: 1 / 1;
  width: 30cqw;
  transform: translate(var(--x), var(--y)) rotate(var(--r));
  transition: transform 0.5s cubic-bezier(0.22, 0.8, 0.3, 1);
}

.pc-pin--poster.is-left { --x: -25cqw; --y: -1cqw; --r: -6deg; }
.pc-pin--poster.is-right { --x: 25cqw; --y: 1cqw; --r: 5deg; }
.pc-pin--sheet { z-index: 2; width: 40cqw; --y: 3cqw; --r: -1.5deg; }

@media (prefers-reduced-motion: reduce) {
  .pc-bundle,
  .pc-scene,
  .pc-piece,
  .pc-trade,
  .pc-trade::after,
  .pc-pin,
  .pc-game-icon,
  .pc-game-shot,
  .pc-ch-videos .pc-piece,
  .pc-ch-pfp {
    transition: none;
  }
}


/* ==========================================================
   SHOWCASE EXTRAS: glow, shimmer,
   order button, talking hero
   (script.js: CARD EXTRAS, TALKING HERO)
   ========================================================== */

/* ----- Glow, tilt, glare, shimmer ----- */
.portfolio-art {
  box-shadow: 0 22px 44px -36px rgba(var(--glow, var(--rgb-blue)), 0.5);
}

/* Shimmer while the picture loads; gone as soon as it is there (or missing) */
.art-shimmer {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(100deg, transparent 20%, rgba(var(--rgb-blue), 0.14) 50%, transparent 80%);
  background-size: 220% 100%;
  pointer-events: none;
}

@media (prefers-reduced-motion: no-preference) {
  .art-shimmer {
    animation: art-shimmer 1.6s ease-in-out infinite;
  }
}

@keyframes art-shimmer {
  from { background-position: 120% 0; }
  to   { background-position: -120% 0; }
}

.work-image.is-loaded ~ .art-shimmer,
.portfolio-art.is-missing .art-shimmer {
  display: none;
}

/* On hover the card keeps its normal lift, plus a glow in the main colour of the artwork */
@media (hover: hover) {
  .portfolio-item:hover .portfolio-art {
    border-color: rgba(var(--glow, var(--rgb-blue)), 0.65);
    box-shadow: 0 26px 46px -26px rgba(var(--glow, var(--rgb-blue)), 0.75);
  }
}

/* ----- "Surprise me": the dashed chip at the end of the filters ----- */
.tool-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1.1rem 0.5rem 0.9rem;
  border: 1px dashed rgba(var(--rgb-silver), 0.34);
  border-radius: 999px;
  background-color: transparent;
  color: var(--color-text);
  font: inherit;
  font-size: 0.92rem;
  font-weight: 700;
  line-height: 1.2;
  cursor: pointer;
  transition: transform 0.25s var(--spring), background-color 0.2s ease, border-color 0.2s ease;
}

.tool-chip svg {
  flex: none;
}

.tool-chip:hover {
  border-style: solid;
  border-color: var(--color-accent-bright);
  background-color: rgba(var(--rgb-blue), 0.12);
  transform: translateY(-1px);
}

.tool-chip:focus-visible {
  outline: 2px solid var(--color-accent-bright);
  outline-offset: 2px;
}

.tool-chip[hidden] {
  display: none;
}

/* ----- Viewer: order button ----- */
.lightbox-info {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  min-width: 0;
}

.lightbox-order {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  height: 2.5rem;
  padding: 0 1rem 0 1.1rem;
  border: 1px solid rgba(var(--rgb-silver), 0.26);
  border-radius: 999px;
  background-color: rgba(var(--rgb-silver), 0.06);
  color: var(--color-text);
  font: inherit;
  font-size: 0.85rem;
  font-weight: 800;
  cursor: pointer;
  transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.2s var(--spring);
}

.lightbox-order:hover {
  border-color: rgba(var(--rgb-blue), 0.6);
  background-color: rgba(var(--rgb-blue), 0.16);
}

.lightbox-order:hover svg {
  transform: translateX(2px);
}

.lightbox-order svg {
  transition: transform 0.2s var(--spring);
}

.lightbox-order:focus-visible {
  outline: 2px solid var(--color-accent-bright);
  outline-offset: 2px;
}

.lb-order-short {
  display: none;
}

.lightbox-pan {
  position: relative;
}

@media (max-width: 639px) {
  .lightbox-order {
    height: 2.25rem;
    padding: 0 0.8rem 0 0.9rem;
    font-size: 0.8rem;
  }

  .lb-order-long {
    display: none;
  }

  .lb-order-short {
    display: inline;
  }
}

/* ----- Talking hero: the small secret ----- */
.hover-stage.is-excited .hover-glow {
  opacity: 1;
  transform: scale(1.18);
  transition: opacity 0.3s ease, transform 0.4s var(--spring);
}

.hover-spark--burst {
  bottom: 30%;
  animation: hover-spark var(--d, 1.8s) ease-out 1 var(--delay, 0s) both;
}

@media (prefers-reduced-motion: reduce) {
  .hover-spark--burst {
    display: none;
  }
}

/* Talking hero bubble: a shorter loop (5s instead of 7s), and it never changes
   size: the bubble is as wide as its text from the start, the dots sit in it,
   and the text just fades in (no pop, no growing). */
@media (prefers-reduced-motion: no-preference) {
  .hover-bubble {
    max-width: none;
    animation: hover-bubble-pop 5s var(--spring) 0.3s infinite both;
  }

  .hover-bubble .about-bubble-dots {
    animation: hover-bubble-dots 5s linear 0.3s infinite both;
  }

  .hover-bubble .about-bubble-hi {
    animation: hover-bubble-text 5s linear 0.3s infinite both;
  }
}

@keyframes hover-bubble-pop {
  0%        { opacity: 0; transform: scale(0.4); }
  5%, 90%   { opacity: 1; transform: scale(1); }
  96%, 100% { opacity: 0; transform: scale(0.8) translateY(6px); }
}

@keyframes hover-bubble-dots {
  0%, 15% { opacity: 1; }
  19%, 100% { opacity: 0; }
}

@keyframes hover-bubble-text {
  0%, 15% { opacity: 0; }
  22%, 100% { opacity: 1; }
}


/* ==========================================================
   "YOU LIKED THIS" BANNER (pricing.html, contact.html)
   Built in script.js. A compact bar, centered at the bottom of the screen.
   --liked-banner-h (its height) is set by script.js on <html>.
   ========================================================== */
.liked-banner-wrap {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 95;
  padding-bottom: max(0.75rem, env(safe-area-inset-bottom, 0px));
  pointer-events: none;
}

.liked-banner-wrap .liked-banner {
  pointer-events: auto;
}

/* Room for the banner: the page, and the things that live in the bottom corners */
.has-liked-banner body {
  padding-bottom: calc(var(--liked-banner-h, 0px) + 0.5rem);
}

.has-liked-banner .sale-popup,
.has-liked-banner .sale-tab,
.has-liked-banner .to-top {
  bottom: calc(var(--liked-banner-h, 0px) + 0.75rem);
}

.liked-banner {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  width: fit-content;
  max-width: 100%;
  margin-inline: auto;
  padding: 0.4rem 2.5rem 0.4rem 0.4rem;
  border: 1px solid rgba(var(--rgb-blue), 0.35);
  border-radius: 999px;
  background:
    linear-gradient(90deg, rgba(var(--rgb-blue), 0.16), rgba(var(--rgb-blue), 0.04)),
    var(--color-surface);
  box-shadow:
    0 -10px 40px -18px rgba(0, 0, 0, 0.8),
    0 18px 40px -28px rgba(var(--rgb-blue), 0.6);
}

@media (prefers-reduced-motion: no-preference) {
  .liked-banner {
    animation: liked-banner-in 0.5s var(--spring) 0.2s backwards;
  }
}

@keyframes liked-banner-in {
  from { opacity: 0; transform: translateY(120%); }
  to   { opacity: 1; transform: translateY(0); }
}

.liked-banner-thumb {
  flex: none;
  width: 2.5rem;
  height: 2.5rem;
  overflow: hidden;
  border: 1px solid rgba(var(--rgb-blue), 0.3);
  border-radius: 50%;
  background-color: var(--color-surface-raised);
}

.liked-banner-thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.liked-banner-text {
  flex: 1 1 auto;
  min-width: 0;
}

/* If the thumbnail is missing, keep the text off the rounded edge */
.liked-banner-text:first-child {
  margin-left: 0.75rem;
}

.liked-banner-title {
  margin: 0;
  color: var(--color-text);
  font-size: 0.92rem;
  font-weight: 800;
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.liked-banner-sub {
  margin: 0;
  color: var(--color-text-muted);
  font-size: 0.78rem;
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.liked-banner-button {
  flex: none;
  min-height: 0;
  padding: 0.5rem 1rem;
  font-size: 0.88rem;
  white-space: nowrap;
}

.liked-banner-close {
  position: absolute;
  top: 50%;
  right: 0.5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  margin-top: -0.875rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--color-text-muted);
  cursor: pointer;
}

.liked-banner-close:hover {
  background-color: rgba(var(--rgb-blue), 0.16);
  color: var(--color-text);
}

.liked-banner-close:focus-visible {
  outline: 2px solid var(--color-accent-bright);
  outline-offset: 2px;
}

/* Phones: one slim row, no second line of text */
@media (max-width: 639px) {
  .liked-banner-wrap .container {
    padding-inline: 0.75rem;
  }

  .liked-banner-thumb {
    width: 2rem;
    height: 2rem;
  }

  .liked-banner {
    gap: 0.5rem;
    width: 100%;
    padding-right: 2.25rem;
  }

  .liked-banner-sub {
    display: none;
  }

  .liked-banner-word {
    display: none;
  }

  .liked-banner-title {
    font-size: 0.8rem;
  }

  .liked-banner-button {
    padding: 0.45rem 0.8rem;
    font-size: 0.82rem;
  }
}

/* ==========================================================
   WELCOME OFFER
   A sticky card in the bottom-right corner, stacked right above the sale
   popup (script.js measures the popup and sets `bottom`). It starts as a
   small blue tab; the tab opens the card, the Redeem button opens a small
   window. Built by script.js (WELCOME_OFFER).

   Built around the render: the bag stands on the bottom edge of the card,
   light pours out of its opening (glow, a beam, slowly turning rays) and
   sparks rise from it. All of that sits behind the text and is clipped to
   the card. The light is the blue of the bag (see --wo-glow below).
   --wo-glow-x / --wo-glow-y (set from WELCOME_OFFER.glowX / glowY in
   script.js) are the point the light comes from.
   ========================================================== */
.welcome-offer {
  --wo-glow: 110, 130, 255;      /* the light's colour: the blue of the bag */
  --wo-glow-hi: 214, 222, 255;   /* its bright centre (the white of the logo) */
  --wo-glow-lo: 52, 66, 235;     /* its deep outer edge (the dark blue side of the bag) */
  --wo-art-h: 13rem;      /* height of the render */
  --wo-deal-size: 2.6rem; /* size of "$5" and "1.5K" (script.js shrinks it if the line would not fit) */
  --wo-scale: 1;          /* script.js lowers this a little when the window is short */
  --wo-aspect: 0.92;      /* width / height of the render (script.js sets the real one) */
  --wo-strip-h: 1.9rem;   /* the info strip along the bottom edge ("New clients only ...") */
  --wo-glow-x: 45%;
  --wo-glow-y: 19%;
  position: fixed;
  right: 1.25rem;
  bottom: 1.25rem;
  z-index: 91;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  min-height: calc(var(--wo-art-h) + 3.2rem + var(--wo-strip-h));   /* room for the bag, with the tag above it and the strip below */
  width: min(420px, calc(100vw - 2rem));
  border: 1px solid rgba(var(--rgb-blue), 0.22);
  border-radius: 22px;
  background:
    radial-gradient(ellipse 70% 55% at 0% 0%, rgba(var(--rgb-blue), 0.16), transparent 70%),
    linear-gradient(180deg, rgba(10, 16, 34, 0.98), rgba(5, 9, 20, 0.98));
  box-shadow:
    0 34px 70px -24px rgba(0, 0, 0, 0.95),
    0 0 80px -30px rgba(var(--wo-glow), 0.55),
    0 0 50px -30px rgba(var(--rgb-blue), 0.7);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(18px) scale(0.97);
  transform-origin: 100% 100%;
  transition: opacity 0.3s ease, transform 0.45s var(--spring), bottom 0.35s var(--spring), visibility 0s linear 0.45s;
}

.welcome-offer.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: scale(var(--wo-scale, 1));
  transition-delay: 0s;
}

/* A fine ring: icy blue at the top left, the bag's blue where the light is */
.welcome-offer::after {
  content: "";
  position: absolute;
  inset: -1px;
  z-index: 4;
  padding: 1px;
  border-radius: inherit;
  background: linear-gradient(
    155deg,
    rgba(var(--rgb-blue), 0.95),
    rgba(var(--rgb-blue), 0.16) 36%,
    rgba(var(--rgb-blue), 0.12) 62%,
    rgba(var(--wo-glow), 0.8)
  );
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  pointer-events: none;
}

/* Fine icy light along the top edge */
.welcome-offer::before {
  content: "";
  position: absolute;
  top: 0;
  left: 10%;
  right: 38%;
  z-index: 4;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(var(--rgb-blue), 0.95), transparent);
  pointer-events: none;
}

/* ----- The light show (clipped to the card, only once the render exists) ----- */
.welcome-offer-fx {
  position: absolute;
  inset: 0 0 var(--wo-strip-h) 0;   /* the render stands on the info strip */
  z-index: 1;
  display: none;
  overflow: hidden;
  border-radius: 22px 22px 0 0;
  pointer-events: none;
}

.welcome-offer.has-art .welcome-offer-fx {
  display: block;
}

/* The pool of light the bag stands in */
.wo-floor {
  position: absolute;
  right: -4%;
  bottom: 0;
  width: 82%;
  height: 6.5rem;
  background: radial-gradient(ellipse closest-side at 50% 100%, rgba(var(--wo-glow), 0.4), rgba(var(--wo-glow-lo), 0.14) 55%, transparent);
}

/* The render's box: its bottom edge IS the bottom edge of the card */
.wo-stage {
  position: absolute;
  right: 0.5rem;
  bottom: 0;
  width: calc(var(--wo-art-h) * var(--wo-aspect));
  height: var(--wo-art-h);
}

.wo-halo,
.wo-burst,
.wo-beam,
.wo-glow,
.wo-rim {
  position: absolute;
  pointer-events: none;
}

/* Wide deep-blue haze around the light */
.wo-halo {
  left: var(--wo-glow-x);
  top: var(--wo-glow-y);
  width: 28rem;
  height: 28rem;
  margin: -14rem 0 0 -14rem;
  background: radial-gradient(circle closest-side, rgba(var(--wo-glow-lo), 0.34), rgba(var(--wo-glow-lo), 0.1) 55%, transparent);
}

/* The sunburst: slowly turning rays that fade out with distance */
.wo-burst {
  left: var(--wo-glow-x);
  top: var(--wo-glow-y);
  width: 34rem;
  height: 34rem;
  margin: -17rem 0 0 -17rem;
  background:
    repeating-conic-gradient(from 0deg, rgba(var(--wo-glow), 0.3) 0deg 3.2deg, transparent 3.2deg 11deg),
    repeating-conic-gradient(from 5deg, rgba(var(--wo-glow-hi), 0.16) 0deg 1.4deg, transparent 1.4deg 7.5deg);
  -webkit-mask-image: radial-gradient(circle closest-side, #000 0%, rgba(0, 0, 0, 0.55) 32%, transparent 100%);
  mask-image: radial-gradient(circle closest-side, #000 0%, rgba(0, 0, 0, 0.55) 32%, transparent 100%);
  mix-blend-mode: screen;
  opacity: 0.12;          /* how strong the rays are (0 = invisible) */
  animation: wo-spin 70s linear infinite;
  will-change: transform;
}

/* A soft shaft of light rising out of the opening */
.wo-beam {
  left: var(--wo-glow-x);
  bottom: calc(100% - var(--wo-glow-y));
  width: 6rem;
  height: 12rem;
  margin-left: -3rem;
  background: linear-gradient(to top, rgba(var(--wo-glow-hi), 0.5), rgba(var(--wo-glow), 0.14) 60%, transparent);
  filter: blur(11px);
  transform: rotate(-9deg);
  transform-origin: 50% 100%;
  mix-blend-mode: screen;
}

/* The glow from inside the bag */
.wo-glow {
  left: var(--wo-glow-x);
  top: var(--wo-glow-y);
  width: 15rem;
  height: 12rem;
  margin: -6rem 0 0 -7.5rem;
  background: radial-gradient(closest-side, rgba(var(--wo-glow-hi), 0.95) 0%, rgba(var(--wo-glow), 0.6) 22%, rgba(var(--wo-glow-lo), 0.24) 52%, transparent 100%);
  mix-blend-mode: screen;
  animation: wo-pulse 4.2s ease-in-out infinite;
}

/* The render: bottom-aligned, with a warm light on its top edges */
.welcome-offer-image {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: 50% 100%;
  transform-origin: 50% 100%;
  filter: drop-shadow(0 -3px 12px rgba(var(--wo-glow), 0.5)) drop-shadow(0 0 1.5px rgba(var(--wo-glow-hi), 0.55));
  opacity: 0;
  transition: opacity 0.6s ease, transform 0.5s var(--spring);
}

.welcome-offer-image.is-loaded {
  opacity: 1;
}

/* Light spilling over the front of the rim, along the bag's slanted top edge */
.wo-rim {
  left: var(--wo-glow-x);
  top: var(--wo-glow-y);
  width: 52%;
  height: 7%;
  background: radial-gradient(ellipse closest-side, rgba(var(--wo-glow-hi), 0.95), rgba(var(--wo-glow), 0.5) 48%, transparent);
  filter: blur(3px);
  mix-blend-mode: screen;
  transform: translate(-50%, -50%) rotate(-31deg);
  animation: wo-pulse 4.2s ease-in-out infinite;
}

/* Floating sparks (made by script.js) */
.wo-particles {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.wo-particle {
  position: absolute;
  left: calc(var(--wo-glow-x) + var(--ox, 0px));
  top: calc(var(--wo-glow-y) + var(--oy, 0px));
  width: var(--s);
  height: var(--s);
  margin: calc(var(--s) / -2) 0 0 calc(var(--s) / -2);
  border-radius: 50%;
  background-color: rgb(var(--c));
  box-shadow: 0 0 calc(var(--s) * 3) rgba(var(--c), 0.9);
  opacity: 0;
  animation: wo-rise var(--dur) ease-out var(--delay) infinite;
  will-change: transform, opacity;
}

.wo-particle.is-star {
  border-radius: 0;
  box-shadow: none;
  filter: drop-shadow(0 0 4px rgba(var(--c), 0.9));
  clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%);
  animation-name: wo-rise-star;
}

@keyframes wo-spin {
  to { transform: rotate(360deg); }
}

@keyframes wo-pulse {
  0%, 100% { opacity: 0.78; }
  50% { opacity: 1; }
}

@keyframes wo-rise {
  0% { opacity: 0; transform: translate(0, 0) scale(0.4); }
  15% { opacity: 1; }
  100% { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(1); }
}

@keyframes wo-rise-star {
  0% { opacity: 0; transform: translate(0, 0) scale(0.3) rotate(0deg); }
  20% { opacity: 1; }
  60% { opacity: 0.85; transform: translate(calc(var(--dx) * 0.6), calc(var(--dy) * 0.6)) scale(1) rotate(45deg); }
  100% { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(0.5) rotate(90deg); }
}

/* Nothing moves while the card is hidden */
.welcome-offer:not(.is-open) .welcome-offer-fx * {
  animation-play-state: paused;
}

/* ----- The text, in front of the light ----- */
.welcome-offer-link {
  position: relative;
  z-index: 2;
  display: flex;
  flex: 1 1 auto;
  padding: 1.1rem 1.15rem 0.95rem 1.2rem;
  border-radius: inherit;
  color: inherit;
}

/* Leave the right side to the render */
.welcome-offer.has-art .welcome-offer-link {
  padding-right: calc(var(--wo-art-h) * var(--wo-aspect) + 0.7rem);
}

.welcome-offer-text {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.35rem;
  min-width: 0;
}

/* The label ("Welcome offer" / "Offer applied") sits in the top right corner,
   which leaves the top left to the price */
.welcome-offer-tag {
  position: absolute;
  top: 1.05rem;
  right: 1.1rem;
  margin: 0;
}

/* "$5 off  or  [Robux] 1.5K" on one line, both prices the same size */
.welcome-offer-deal {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.55rem;
  margin-top: 0;
  white-space: nowrap;
  font-family: var(--font-display);
  line-height: 1;
}

.welcome-offer-row {
  display: flex;
  align-items: baseline;
  gap: 0.3rem;
}

.welcome-offer-row--robux {
  align-items: center;
  gap: 0.4rem;
}

/* No dot in the label (the small orange diamond the other tags have) */
.welcome-offer-tag::before {
  display: none;
}

.welcome-offer-amount,
.welcome-offer-robux {
  font-size: var(--wo-deal-size);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.045em;
}

.welcome-offer-amount {
  background: linear-gradient(180deg, #ffffff 20%, var(--color-accent-bright));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  filter: drop-shadow(0 2px 14px rgba(var(--rgb-blue), 0.55));
}

/* The Robux price is orange, like on the pricing cards */
.welcome-offer-robux {
  color: var(--color-orange);
  filter: drop-shadow(0 2px 14px rgba(var(--rgb-orange), 0.4));
}

.welcome-offer-off {
  color: #fff;
  font-size: calc(var(--wo-deal-size) * 0.5);
  font-weight: 800;
  letter-spacing: -0.02em;
}

.welcome-offer-or {
  color: var(--color-text-muted);
  font-family: var(--font-main);
  font-size: 0.82rem;
  font-weight: 600;
}

.welcome-offer-robux {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}

.welcome-offer-robux .robux-icon {
  display: block;
  flex: none;
  width: 0.8em;
  height: 0.8em;
  object-fit: contain;
}

.welcome-offer-sub {
  color: var(--color-text-muted);
  font-size: 0.86rem;
  line-height: 1.3;
}

.welcome-offer-cta {
  align-self: stretch;
  gap: 0.5rem;
  margin-top: auto;        /* pushes the button and the small text down to the bottom */
  padding: 0.7rem 1.1rem;
}

/* Info strip along the bottom edge: the countdown (only when the offer has an end date) on the
   left, the small print in the bottom right corner */
.welcome-offer-terms {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  min-height: var(--wo-strip-h);
  padding: 0 1rem;
  border-top: 1px solid rgba(var(--rgb-blue), 0.18);
  border-radius: 0 0 22px 22px;
  background-color: rgba(4, 7, 16, 0.6);
  color: var(--color-text-muted);
  font-size: 0.68rem;
  line-height: 1.2;
  text-align: right;
  white-space: nowrap;
}

@media (hover: hover) {
  .welcome-offer:hover .welcome-offer-image {
    transform: scale(1.035);
  }
}

/* The close button hangs half outside the corner, so it never covers the render */
.welcome-offer-close {
  position: absolute;
  top: -0.55rem;
  right: -0.4rem;
  z-index: 5;
  display: grid;
  place-items: center;
  width: 1.8rem;
  height: 1.8rem;
  padding: 0;
  border: 1px solid rgba(var(--rgb-silver), 0.3);
  border-radius: 50%;
  background-color: rgba(8, 13, 28, 0.96);
  color: #fff;
  cursor: pointer;
  transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.25s var(--spring);
}

.welcome-offer-close:hover,
.welcome-offer-close:focus-visible {
  border-color: rgba(var(--rgb-blue), 0.8);
  background-color: rgba(var(--rgb-blue), 0.25);
  transform: translateY(2px);
}

.welcome-offer-close:focus-visible,
.welcome-offer-tab:focus-visible {
  outline: 2px solid var(--color-accent-bright);
  outline-offset: 3px;
}

/* The small tab: same shape as the sale tab, in the button blue */
.welcome-offer-tab {
  position: fixed;
  right: 1.25rem;
  bottom: 1.25rem;
  z-index: 90;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.9rem 0.5rem 0.5rem;
  border: 1px solid rgba(var(--rgb-blue), 0.75);
  border-radius: 999px;
  background: linear-gradient(180deg, #3b8bff, var(--color-button));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.35),
    0 10px 24px -10px rgba(var(--rgb-blue), 0.8),
    0 0 0 4px rgba(var(--rgb-blue), 0.14);
  color: #fff;
  font: inherit;
  font-size: 0.92rem;
  font-weight: 800;
  line-height: 1;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(10px);
  transition: opacity 0.3s ease, transform 0.35s var(--spring), bottom 0.35s var(--spring),
              box-shadow 0.25s ease, visibility 0s linear 0.35s;
}

.welcome-offer-tab.is-visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: none;
  transition-delay: 0.15s, 0.15s, 0s, 0s, 0s;
}

/* The soft nudge: one hop, a ring that spreads out, and a shine across the tab */
.welcome-offer-tab::before,
.welcome-offer-tab::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
}

.welcome-offer-tab::after {
  background: linear-gradient(105deg, transparent 40%, rgba(255, 255, 255, 0.55) 50%, transparent 60%) 160% 0 / 260% 100% no-repeat;
  opacity: 0;
}

.welcome-offer-tab.is-nudging {
  animation: wo-tab-hop 1.2s var(--spring) 0.1s 1;
}

.welcome-offer-tab.is-nudging::before {
  animation: wo-tab-ring 1.4s ease-out 0.1s 2;
}

.welcome-offer-tab.is-nudging::after {
  opacity: 1;
  animation: wo-tab-shine 1.1s ease-out 0.35s 1;
}

.welcome-offer-tab.is-nudging .welcome-offer-tab-icon {
  animation: wo-gift-wiggle 0.9s ease-in-out 0.3s 1;
}

@keyframes wo-tab-hop {
  0%, 100% { transform: none; }
  35% { transform: translateY(-5px) scale(1.05); }
  60% { transform: translateY(0) scale(0.99); }
}

@keyframes wo-tab-ring {
  0% { box-shadow: 0 0 0 0 rgba(var(--rgb-blue), 0.6); }
  100% { box-shadow: 0 0 0 16px rgba(var(--rgb-blue), 0); }
}

@keyframes wo-tab-shine {
  0% { background-position: 160% 0; }
  100% { background-position: -60% 0; }
}

@keyframes wo-gift-wiggle {
  0%, 100% { transform: rotate(0); }
  20% { transform: rotate(-14deg); }
  40% { transform: rotate(12deg); }
  60% { transform: rotate(-8deg); }
  80% { transform: rotate(4deg); }
}

.welcome-offer-tab-icon {
  background-color: rgba(var(--rgb-blue), 0.3);
  color: #fff;
}

.welcome-offer-tab-icon {
  display: grid;
  place-items: center;
  width: 1.8rem;
  height: 1.8rem;
  border-radius: 50%;
  background-color: rgba(8, 13, 28, 0.82);
  color: var(--color-accent-bright);
}

.welcome-offer-tab-chevron {
  opacity: 0.8;
}

.welcome-offer-tab.is-visible:hover,
.welcome-offer-tab.is-visible:focus-visible {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.4),
    0 14px 30px -10px rgba(var(--rgb-blue), 0.9),
    0 0 0 5px rgba(var(--rgb-blue), 0.2);
  transform: translateY(-2px);
  transition-delay: 0s;
}

/* Phones: a slightly smaller render and tighter text */
@media (max-width: 520px) {
  .welcome-offer {
    --wo-art-h: 11.4rem;
    right: 0.75rem;
    bottom: 0.75rem;
    width: calc(100vw - 1.5rem);
  }

  .welcome-offer-tab {
    right: 0.75rem;
    bottom: 0.75rem;
  }

  .welcome-offer-link {
    padding: 0.95rem 1rem 0.85rem 1.05rem;
  }

  .welcome-offer-terms {
    padding: 0 0.8rem;
    font-size: 0.64rem;
  }

  .welcome-offer-cta {
    gap: 0.4rem;
    padding: 0.62rem 0.8rem;
    font-size: 0.95rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .welcome-offer,
  .welcome-offer-tab,
  .welcome-offer-image,
  .welcome-offer-close {
    transition: opacity 0.15s ease, visibility 0s linear 0.15s;
  }

  .welcome-offer.is-open,
  .welcome-offer-tab.is-visible {
    transition-delay: 0s;
  }

  .welcome-offer,
  .welcome-offer-tab,
  .welcome-offer-tab.is-visible:hover,
  .welcome-offer:hover .welcome-offer-image,
  .welcome-offer-close:hover {
    transform: none;
  }

  /* No spinning rays, pulsing or sparks */
  .wo-burst,
  .wo-glow,
  .wo-rim,
  .welcome-offer-ends::before {
    animation: none;
  }

  .welcome-offer-tab.is-nudging,
  .welcome-offer-tab.is-nudging::before,
  .welcome-offer-tab.is-nudging::after,
  .welcome-offer-tab.is-nudging .welcome-offer-tab-icon {
    animation: none;
  }

  .wo-particles {
    display: none;
  }
}

.welcome-offer-terms-text {
  margin-left: auto;
}

.welcome-offer-ends {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: var(--color-accent-bright);
  font-weight: 700;
}

.welcome-offer-ends:empty {
  display: none;
}

.welcome-offer-ends::before {
  content: "";
  flex: none;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: rgb(var(--wo-glow-hi));
  box-shadow: 0 0 8px 2px rgba(var(--wo-glow), 0.8);
  animation: wo-pulse 2.4s ease-in-out infinite;
}

.welcome-offer:not(.is-open) .welcome-offer-ends::before,
.welcome-modal:not(.is-open) .welcome-offer-ends::before {
  animation-play-state: paused;
}

/* display: grid / flex on these would otherwise beat the hidden attribute */
.welcome-modal-steps[hidden],
.welcome-offer-row[hidden] {
  display: none;
}

/* ----- Little "DM me > Mention it > Done" path on the card ----- */
.welcome-offer-path {
  display: flex;
  align-items: flex-start;
  align-self: stretch;
  margin-top: auto;      /* shares the free space with the button, so it floats between the price and the button */
}

.wo-path-step {
  display: flex;
  flex: none;
  flex-direction: column;
  align-items: center;
  gap: 0.28rem;
}

.wo-path-dot {
  display: grid;
  place-items: center;
  width: 1.9rem;
  height: 1.9rem;
  border: 1px solid rgba(var(--rgb-blue), 0.5);
  border-radius: 50%;
  background-color: rgba(8, 13, 28, 0.92);
  box-shadow: 0 0 16px -5px rgba(var(--wo-glow), 0.9);
  color: var(--color-accent-bright);
}

.wo-path-dot svg {
  width: 0.95rem;
  height: 0.95rem;
}

.wo-path-label {
  color: var(--color-text-muted);
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  white-space: nowrap;
}

/* Dashed road between the steps */
.wo-path-line {
  position: relative;
  flex: 1 1 0;
  min-width: 0.5rem;
  height: 0;
  margin: 0.95rem 0.3rem 0;
  border-top: 1.5px dashed rgba(var(--rgb-blue), 0.42);
}

/* ----- Redeem window: the same panel as the card, with the same render and light ----- */
.welcome-modal {
  position: fixed;
  inset: 0;
  z-index: 1500;
  display: flex;
  overflow-y: auto;
  padding: 1.5rem 1rem;
  background:
    radial-gradient(ellipse 55% 45% at 50% 55%, rgba(var(--rgb-blue), 0.14), transparent 72%),
    rgba(3, 6, 14, 0.74);
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.25s ease, visibility 0s linear 0.25s;
}

.welcome-modal.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition-delay: 0s;
}

.welcome-modal-box {
  --wo-glow: 110, 130, 255;
  --wo-glow-hi: 214, 222, 255;
  --wo-glow-lo: 52, 66, 235;
  --wo-art-h: 11.5rem;
  --wo-deal-size: 2.1rem;
  --wo-aspect: 0.92;
  --wo-glow-x: 45%;
  --wo-glow-y: 19%;
  --wo-strip-h: 1.9rem;
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  width: min(470px, 100%);
  min-height: calc(var(--wo-art-h) + 3.2rem + var(--wo-strip-h));
  margin: auto;
  border: 1px solid rgba(var(--rgb-blue), 0.22);
  border-radius: 22px;
  background:
    radial-gradient(ellipse 70% 55% at 0% 0%, rgba(var(--rgb-blue), 0.16), transparent 70%),
    linear-gradient(180deg, rgba(10, 16, 34, 0.99), rgba(5, 9, 20, 0.99));
  box-shadow:
    0 34px 70px -24px rgba(0, 0, 0, 0.95),
    0 0 80px -30px rgba(var(--wo-glow), 0.55),
    0 0 50px -30px rgba(var(--rgb-blue), 0.7);
  color: #fff;
  transform: translateY(18px) scale(0.97);
  transform-origin: 50% 60%;
  transition: transform 0.45s var(--spring);
}

.welcome-modal.is-open .welcome-modal-box {
  transform: none;
}

.welcome-modal-box:focus {
  outline: none;
}

/* The same fine ring and icy top light as the card */
.welcome-modal-box::after {
  content: "";
  position: absolute;
  inset: -1px;
  z-index: 4;
  padding: 1px;
  border-radius: inherit;
  background: linear-gradient(
    155deg,
    rgba(var(--rgb-blue), 0.95),
    rgba(var(--rgb-blue), 0.16) 36%,
    rgba(var(--rgb-blue), 0.12) 62%,
    rgba(var(--wo-glow), 0.8)
  );
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  pointer-events: none;
}

.welcome-modal-box::before {
  content: "";
  position: absolute;
  top: 0;
  left: 10%;
  right: 38%;
  z-index: 4;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(var(--rgb-blue), 0.95), transparent);
  pointer-events: none;
}

.welcome-modal-box.has-art .welcome-offer-fx {
  display: block;
}

.welcome-modal:not(.is-open) .welcome-offer-fx * {
  animation-play-state: paused;
}

.welcome-modal-body {
  position: relative;
  z-index: 2;
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.5rem;
  padding: 1.3rem 1.2rem 1.1rem 1.3rem;
  min-width: 0;
}

/* Leave the right side to the render, like on the card */
.welcome-modal-box.has-art .welcome-modal-body {
  padding-right: calc(var(--wo-art-h) * var(--wo-aspect) + 0.7rem);
}

.welcome-modal-title {
  margin: 0 0 0.15rem;
  color: #fff;
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.15;
}

.welcome-modal-deal {
  flex-wrap: wrap;
  row-gap: 0.3rem;
}

.welcome-modal-text {
  margin: 0.3rem 0 0;
  color: var(--color-text-muted);
  font-size: 0.86rem;
  line-height: 1.5;
}

/* Steps: numbered, joined by a dotted line */
/* The page behind the window does not scroll while it is open */
html.welcome-modal-open {
  overflow: hidden;
  padding-right: var(--wo-scrollbar, 0px);
}

.welcome-modal {
  overscroll-behavior: contain;
}

.welcome-modal-grab {
  display: none;
}

.welcome-modal-steps {
  display: grid;
  gap: 0.7rem;
  align-self: stretch;
  margin: 0.35rem 0 0;
  padding: 0;
  list-style: none;
  counter-reset: wo-step;
}

.welcome-modal-steps li {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  min-height: 1.6rem;
  padding-top: 0.24rem;       /* centres a one-line step on its number */
  color: #fff;
  font-size: 0.86rem;
  font-weight: 600;
  line-height: 1.3;
  counter-increment: wo-step;
}

.welcome-modal-steps li::before {
  content: counter(wo-step);
  flex: none;
  display: grid;
  place-items: center;
  width: 1.6rem;
  height: 1.6rem;
  border: 1px solid rgba(var(--rgb-blue), 0.5);
  border-radius: 50%;
  background-color: rgba(8, 13, 28, 0.92);
  box-shadow: 0 0 14px -5px rgba(var(--wo-glow), 0.9);
  margin-top: -0.24rem;
  color: var(--color-accent-bright);
  font-size: 0.75rem;
  font-weight: 800;
}

.welcome-modal-steps li:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 1.7rem;
  left: 0.8rem;
  height: calc(100% - 1.1rem);
  border-left: 1.5px dashed rgba(var(--rgb-blue), 0.4);
}

/* Order-size hint: the $10 minimum in one short line */
.welcome-modal-hint {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  align-self: stretch;
  margin: 0.2rem 0 0;
  padding: 0.55rem 0.7rem;
  border: 1px solid rgba(var(--rgb-blue), 0.28);
  border-radius: 12px;
  background-color: rgba(var(--rgb-blue), 0.1);
  color: #fff;
  font-size: 0.8rem;
  line-height: 1.45;
}

.welcome-modal-hint svg {
  flex: none;
  margin-top: 0.1rem;
  color: var(--color-accent-bright);
}

.welcome-modal-hint[hidden],
.welcome-modal-faq[hidden],
.welcome-modal-email[hidden] {
  display: none;
}

/* Mini FAQ: small folding rows */
.welcome-modal-faq {
  align-self: stretch;
  margin-top: 0.3rem;
}

.welcome-modal-faq-title {
  margin: 0.4rem 0 0.15rem;
  color: var(--color-text-muted);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.welcome-modal-faq details {
  border-bottom: 1px solid rgba(var(--rgb-silver), 0.14);
}

.welcome-modal-faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  padding: 0.55rem 0;
  color: #fff;
  font-size: 0.82rem;
  font-weight: 600;
  line-height: 1.3;
  list-style: none;
  cursor: pointer;
}

.welcome-modal-faq summary::-webkit-details-marker {
  display: none;
}

.welcome-modal-faq summary::after {
  content: "";
  flex: none;
  width: 0.45rem;
  height: 0.45rem;
  border-right: 1.8px solid currentColor;
  border-bottom: 1.8px solid currentColor;
  opacity: 0.7;
  transform: rotate(45deg) translateY(-2px);
  transition: transform 0.2s ease;
}

.welcome-modal-faq details[open] summary::after {
  transform: rotate(-135deg) translate(-2px, -1px);
}

.welcome-modal-faq summary:focus-visible {
  outline: 2px solid var(--color-accent-bright);
  outline-offset: 2px;
  border-radius: 4px;
}

.welcome-modal-faq details p {
  margin: 0 0 0.65rem;
  color: var(--color-text-muted);
  font-size: 0.8rem;
  line-height: 1.5;
}

.welcome-modal-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-self: stretch;
  margin-top: 0.55rem;
}

.welcome-modal-actions .button {
  justify-content: center;
  gap: 0.5rem;
  padding: 0.7rem 1.1rem;
}

.welcome-modal-dm {
  flex: 1 1 6.5rem;
}

.welcome-modal-email {
  flex: 1 1 6.5rem;
}

.welcome-modal-dismiss {
  flex: 0 0 auto;
}

/* Close button: hangs half outside the corner, like on the card */
.welcome-modal-close {
  position: absolute;
  top: -0.55rem;
  right: -0.4rem;
  z-index: 5;
  display: grid;
  place-items: center;
  width: 1.8rem;
  height: 1.8rem;
  padding: 0;
  border: 1px solid rgba(var(--rgb-silver), 0.3);
  border-radius: 50%;
  background-color: rgba(8, 13, 28, 0.96);
  color: #fff;
  cursor: pointer;
  transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.25s var(--spring);
}

.welcome-modal-close:hover,
.welcome-modal-close:focus-visible {
  border-color: rgba(var(--rgb-blue), 0.8);
  background-color: rgba(var(--rgb-blue), 0.25);
  transform: rotate(90deg);
}

.welcome-modal-close:focus-visible {
  outline: 2px solid var(--color-accent-bright);
  outline-offset: 3px;
}

@media (max-width: 520px) {
  .welcome-modal-box {
    --wo-art-h: 8.8rem;
    --wo-deal-size: 1.8rem;
  }

  .welcome-modal-body {
    padding: 1.1rem 0.9rem 0.95rem 1rem;
  }

  .welcome-modal-title {
    font-size: 1.12rem;
  }

  .welcome-modal-text,
  .welcome-modal-steps li {
    font-size: 0.8rem;
  }

  .wo-path-dot {
    width: 1.6rem;
    height: 1.6rem;
  }

  .wo-path-line {
    min-width: 0.3rem;
    margin: 0.8rem 0.15rem 0;
  }

  .wo-path-label {
    font-size: 0.58rem;
  }
}

/* Phones: the redeem window is a bottom sheet. The render sits above the text,
   and the handle at the top can be dragged down to close it. */
@media (max-width: 520px) {
  .welcome-modal {
    padding: 0;
  }

  .welcome-modal-box {
    --wo-art-h: 9rem;
    width: 100%;
    min-height: 0;
    margin: auto 0 0;
    border-bottom: 0;
    border-radius: 24px 24px 0 0;
    transform: translateY(100%);
  }

  .welcome-modal-box .welcome-offer-fx {
    inset: 0 0 auto 0;
    height: calc(var(--wo-art-h) + 1rem);
    border-radius: 24px 24px 0 0;
  }

  .welcome-modal-box .wo-stage {
    right: auto;
    left: 50%;
    margin-left: calc(var(--wo-art-h) * var(--wo-aspect) / -2);
  }

  .welcome-modal-box .wo-floor {
    right: auto;
    left: 10%;
    width: 80%;
  }

  .welcome-modal-box.has-art .welcome-modal-body {
    padding: calc(var(--wo-art-h) + 1.1rem) 1.1rem 1rem;
  }

  .welcome-modal-box .welcome-offer-tag {
    right: auto;
    left: 1.1rem;
  }

  .welcome-modal-box .welcome-offer-terms {
    min-height: calc(var(--wo-strip-h) + env(safe-area-inset-bottom, 0px));
    padding-bottom: env(safe-area-inset-bottom, 0px);
    border-radius: 0;
  }

  .welcome-modal-close {
    top: 0.75rem;
    right: 0.75rem;
  }

  .welcome-modal-grab {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 6;
    display: block;
    height: 1.8rem;
    cursor: grab;
    touch-action: none;
  }

  .welcome-modal-grab::after {
    content: "";
    position: absolute;
    top: 0.55rem;
    left: 50%;
    width: 2.6rem;
    height: 4px;
    margin-left: -1.3rem;
    border-radius: 4px;
    background-color: rgba(255, 255, 255, 0.28);
  }
}

/* Very narrow phones: no room for the countdown, and none for the path next to the render */
@media (max-width: 360px) {
  .welcome-offer-ends {
    display: none;
  }
}

/* Very narrow phones: no room for the path next to the render */
@media (max-width: 380px) {
  .welcome-offer-path {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .welcome-modal,
  .welcome-modal-box {
    transition: opacity 0.15s ease, visibility 0s linear 0.15s;
    transform: none;
  }

  .welcome-modal-close:hover {
    transform: none;
  }
}

/* Contact page: small "i" reminder about redeeming the offer */
.welcome-offer-notice {
  position: relative;
  display: block;
  width: fit-content;
  max-width: 100%;
  margin: 0 0 1.25rem;
}

.welcome-offer-notice-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.25rem 0.75rem 0.25rem 0.3rem;
  border: 1px solid rgba(var(--rgb-blue), 0.4);
  border-radius: 999px;
  background-color: rgba(10, 16, 34, 0.9);
  color: var(--color-text-muted);
  font: inherit;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 0.2s ease, background-color 0.2s ease, color 0.2s ease;
}

.welcome-offer-notice-btn:hover,
.welcome-offer-notice.is-open .welcome-offer-notice-btn {
  border-color: rgba(var(--rgb-blue), 0.8);
  background-color: rgba(var(--rgb-blue), 0.18);
  color: #fff;
}

.welcome-offer-notice-btn:focus-visible {
  outline: 2px solid var(--color-accent-bright);
  outline-offset: 3px;
}

.welcome-offer-notice-icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 1.4rem;
  height: 1.4rem;
  color: var(--color-accent-bright);
}

.welcome-offer-notice-pop {
  position: absolute;
  top: calc(100% + 0.5rem);
  left: 0;
  z-index: 30;
  width: min(19rem, calc(100vw - 2rem));
  padding: 0.75rem 0.95rem;
  border: 1px solid rgba(var(--rgb-blue), 0.4);
  border-radius: 14px;
  background:
    radial-gradient(ellipse 60% 130% at 0% 0%, rgba(var(--rgb-blue), 0.18), transparent 70%),
    rgba(10, 16, 34, 0.98);
  box-shadow: 0 18px 40px -22px rgba(0, 0, 0, 0.9);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0s linear 0.18s;
}

.welcome-offer-notice.is-open .welcome-offer-notice-pop {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition-delay: 0s;
}

.welcome-offer-notice-title {
  display: block;
  color: #fff;
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 800;
  letter-spacing: -0.01em;
}

.welcome-offer-notice-text {
  margin: 0.2rem 0 0;
  color: var(--color-text-muted);
  font-size: 0.84rem;
  line-height: 1.5;
}

@media (prefers-reduced-motion: reduce) {
  .welcome-offer-notice-pop {
    transform: none;
    transition: opacity 0.1s ease, visibility 0s linear 0.1s;
  }
}

/* If the price and the Commission button no longer fit side by side, the button
   moves to its own line instead of being pushed out of the card */
.pc-buy {
  flex-wrap: wrap;
  row-gap: 0.7rem;
}

.pc-buy .pc-price {
  min-width: 0;
}

.pc-price-row {
  flex-wrap: wrap;
  row-gap: 0.2rem;
}

/* Redeem window, wide layout (desktop/tablet): two columns, render on the right.
   Left: price, text, steps. Middle: quick answers, the $10 strip, then the contact buttons. */
.welcome-modal-col {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.5rem;
  min-width: 0;
}

.welcome-modal-col--side .welcome-modal-hint {
  margin-top: 0.35rem;
  margin-bottom: 0;
}

.welcome-modal-col--side .welcome-modal-actions {
  margin-top: 0.4rem;
}

@media (min-width: 721px) {
  .welcome-modal-box {
    width: min(900px, 100%);
    --wo-art-h: 13rem;
  }

  .welcome-modal-body {
    flex-direction: row;
    align-items: stretch;
    gap: 1.6rem;
    padding: 1.5rem 1.4rem 1.2rem 1.6rem;
  }

  .welcome-modal-box.has-art .welcome-modal-body {
    padding-right: calc(var(--wo-art-h) * var(--wo-aspect) + 1rem);
  }

  .welcome-modal-col--main {
    flex: 0 1 15rem;
  }

  .welcome-modal-col--side {
    flex: 1 1 18rem;
    align-self: stretch;
    justify-content: flex-start;
  }

  .welcome-modal-col--side > * {
    align-self: stretch;
  }

  .welcome-modal-col--side .welcome-modal-faq {
    margin-top: 0.1rem;
  }

  .welcome-modal-col--side .welcome-modal-actions {
    margin-top: auto;
  }
}


/* Redeem window: the small print sits inside the main frame (no separate dark bar, no divider).
   The render now stands on the bottom edge of the frame itself. */
.welcome-modal-box {
  --wo-strip-h: 0px;
  min-height: calc(var(--wo-art-h) + 3.2rem);
}

.welcome-modal-box .welcome-offer-terms {
  min-height: 0;
  padding: 0 1.4rem 1rem 1.6rem;
  border-top: 0;
  border-radius: 0;
  background: none;
  justify-content: flex-start;
  text-align: left;
  white-space: normal;
}

.welcome-modal-box.has-art .welcome-offer-terms {
  padding-right: calc(var(--wo-art-h) * var(--wo-aspect) + 1rem);
}

.welcome-modal-box .welcome-offer-ends {
  display: none;
}

@media (max-width: 520px) {
  .welcome-modal-box .welcome-offer-terms,
  .welcome-modal-box.has-art .welcome-offer-terms {
    min-height: 0;
    padding: 0 1.1rem calc(0.9rem + env(safe-area-inset-bottom, 0px));
    justify-content: center;
    text-align: center;
  }
}


/* Redeem window: the small print sits on the left (it was pushed right by the auto margin) */
.welcome-modal-box .welcome-offer-terms {
  justify-content: flex-start;
  text-align: left;
}

.welcome-modal-box .welcome-offer-terms-text {
  margin-left: 0;
  text-align: left;
}

@media (max-width: 520px) {
  .welcome-modal-box .welcome-offer-terms,
  .welcome-modal-box.has-art .welcome-offer-terms {
    justify-content: flex-start;
    text-align: left;
  }
}

/* Contact page: the welcome offer chip sits in the row of contact buttons, after "DM Me on X" */
.welcome-offer-notice--inline {
  flex: none;
  align-self: flex-start;
  margin: 0.75rem 0 0;
}

.welcome-offer-notice--inline .welcome-offer-notice-btn {
  min-height: 3rem;
  padding: 0.35rem 1rem 0.35rem 0.5rem;
  font-size: 0.9rem;
}

/* A bridge over the gap, so the info does not close while the pointer travels to it */
.welcome-offer-notice-pop::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 100%;
  height: 0.6rem;
}

/* Opens to the left when there is no room on the right */
.welcome-offer-notice.is-flip .welcome-offer-notice-pop {
  left: auto;
  right: 0;
}


/* ===== Contact page chip, wide version ===== */
.welcome-offer-row-host {
  position: relative;
}

.welcome-offer-notice--inline {
  width: 16rem;
  max-width: 100%;
}

.welcome-offer-notice--inline.is-floating {
  position: absolute;
  margin: 0;
}

.welcome-offer-notice--inline .welcome-offer-notice-btn {
  width: 100%;
  min-height: 3.5rem;
  padding: 0.4rem 0.6rem 0.4rem 0.6rem;
  gap: 0.65rem;
  font-size: 0.95rem;
}

.welcome-offer-notice-badge {
  margin-left: auto;
  padding: 0.28rem 0.7rem;
  border-radius: 999px;
  background-color: rgba(var(--rgb-blue), 0.28);
  color: #fff;
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  white-space: nowrap;
}

.welcome-offer-notice-pop {
  width: min(22rem, calc(100vw - 2rem));
}

.welcome-offer-notice--inline .welcome-offer-notice-pop {
  width: 100%;
  min-width: 17rem;
}

/* ===== Redeem window: vertical gift card (no FAQ) =====
   The render sits on top, then the big offer, a short line, three small steps and the buttons. */
@media (min-width: 521px) {
  .welcome-modal-box {
    --wo-art-h: 11rem;
    --wo-deal-size: 2.7rem;
    width: min(410px, 100%);
    min-height: 0;
  }

  .welcome-modal-box .welcome-offer-fx {
    inset: 0 0 auto 0;
    height: calc(var(--wo-art-h) + 1.6rem);
    border-radius: 22px 22px 0 0;
  }

  .welcome-modal-box .wo-stage {
    right: auto;
    left: 50%;
    margin-left: calc(var(--wo-art-h) * var(--wo-aspect) / -2);
  }

  .welcome-modal-box .wo-floor {
    right: auto;
    left: 10%;
    width: 80%;
  }

  .welcome-modal-box .welcome-modal-body {
    flex-direction: column;
    align-items: stretch;
    gap: 0.9rem;
    padding: 1.6rem 1.6rem 1.1rem;
  }

  .welcome-modal-box.has-art .welcome-modal-body {
    padding: calc(var(--wo-art-h) + 1.9rem) 1.6rem 1.1rem;
  }

  .welcome-modal-box .welcome-offer-tag {
    right: auto;
    left: 1.2rem;
    top: 1.1rem;
  }

  .welcome-modal-box .welcome-modal-col--main,
  .welcome-modal-box .welcome-modal-col--side {
    flex: none;
    align-self: stretch;
    align-items: center;
    width: 100%;
    text-align: center;
    gap: 0.45rem;
  }

  .welcome-modal-box .welcome-modal-col--side {
    align-items: stretch;
  }

  .welcome-modal-box .welcome-modal-title {
    font-size: 1.45rem;
  }

  .welcome-modal-box .welcome-modal-deal {
    justify-content: center;
  }

  .welcome-modal-box .welcome-modal-text {
    max-width: 22rem;
    margin: 0.35rem auto 0;
    font-size: 0.9rem;
  }

  /* three small steps side by side instead of a tall list */
  .welcome-modal-box .welcome-modal-steps {
    grid-template-columns: repeat(3, 1fr);
    gap: 0.5rem;
    margin: 0.7rem 0 0;
  }

  .welcome-modal-box .welcome-modal-steps li {
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;
    padding-top: 0;
    font-size: 0.78rem;
    text-align: center;
  }

  .welcome-modal-box .welcome-modal-steps li::before {
    margin-top: 0;
  }

  .welcome-modal-box .welcome-modal-steps li:not(:last-child)::after {
    top: 0.8rem;
    left: calc(50% + 1.1rem);
    width: calc(100% - 1.7rem);
    height: 0;
    border-left: 0;
    border-top: 1.5px dashed rgba(var(--rgb-blue), 0.4);
  }

  .welcome-modal-box .welcome-modal-actions {
    margin-top: 0.4rem;
  }

  .welcome-modal-box .welcome-modal-dm {
    flex: 1 1 100%;
    padding: 0.85rem 1.1rem;
    font-size: 1.02rem;
  }

  .welcome-modal-box .welcome-modal-email,
  .welcome-modal-box .welcome-modal-dismiss {
    flex: 1 1 0;
  }

  .welcome-modal-box .welcome-offer-terms,
  .welcome-modal-box.has-art .welcome-offer-terms {
    padding: 0 1.6rem 1.1rem;
  }
}


/* ===== Bottom-right widgets: the $5 gift card and the seasonal popup, same vertical look ===== */

/* $5 gift card: render on top, then the offer, then one button. Same width as the seasonal popup. */
.welcome-offer {
  --wo-art-h: 8.5rem;
  --wo-deal-size: 2.5rem;
  --wo-strip-h: 0px;
  min-height: 0;
}

@media (min-width: 521px) {
  .welcome-offer {
    --wo-art-h: 9.5rem;
    width: min(340px, calc(100vw - 2rem));
  }
}

.welcome-offer .welcome-offer-fx {
  inset: 0 0 auto 0;
  height: calc(var(--wo-art-h) + 1.4rem);
}

.welcome-offer .wo-stage {
  right: auto;
  left: 50%;
  margin-left: calc(var(--wo-art-h) * var(--wo-aspect) / -2);
}

.welcome-offer .wo-floor {
  right: auto;
  left: 10%;
  width: 80%;
}

.welcome-offer .welcome-offer-link {
  padding: 1.2rem 1.25rem 0.7rem;
}

.welcome-offer.has-art .welcome-offer-link {
  padding: calc(var(--wo-art-h) + 1.7rem) 1.25rem 0.7rem;
}

.welcome-offer .welcome-offer-text {
  align-items: center;
  gap: 0.4rem;
  text-align: center;
}

.welcome-offer .welcome-offer-tag {
  right: auto;
  left: 1.1rem;
}

.welcome-offer .welcome-offer-deal {
  justify-content: center;
}

.welcome-offer .welcome-offer-cta {
  margin-top: 0.7rem;
  padding: 0.8rem 1.1rem;
}

/* the little DM / mention / done path is gone: the button says it all */
.welcome-offer .welcome-offer-path {
  display: none;
}

/* the small print: left, quiet, no dark bar */
.welcome-offer .welcome-offer-terms {
  min-height: 0;
  padding: 0 1.25rem 0.95rem;
  border-top: 0;
  border-radius: 0;
  background: none;
  justify-content: flex-start;
  text-align: left;
  white-space: normal;
}

.welcome-offer .welcome-offer-terms-text {
  margin-left: 0;
  text-align: left;
}

.welcome-offer .welcome-offer-ends {
  margin-right: auto;
}

/* Seasonal popup: the same centred offer */
.sale-popup-body {
  text-align: center;
}

.sale-popup-offer {
  justify-content: center;
}

.sale-popup-cta {
  margin-top: 1.1rem;
}


/* ===== Contact info frame: same look as the chip, and it never catches the mouse ===== */
.welcome-offer-notice-pop {
  pointer-events: none;
  border: 1px solid rgba(var(--rgb-blue), 0.8);
  border-radius: 1.5rem;
  background:
    linear-gradient(rgba(var(--rgb-blue), 0.18), rgba(var(--rgb-blue), 0.18)),
    rgba(10, 16, 34, 0.98);
  box-shadow: none;
  padding: 0.7rem 1.1rem;
}

.welcome-offer-notice-pop::before {
  display: none;
}

.welcome-offer-notice-title {
  color: #fff;
  font-family: inherit;
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0;
}

.welcome-offer-notice-text {
  color: var(--color-text-muted);
  font-size: 0.8rem;
  font-weight: 600;
  line-height: 1.45;
}


/* ===== Seasonal countdown, inside the Work menu next to "Browse the work" =====
   Plain text, no pill or box around it. */
.mega-countdown {
  --hb: 255, 99, 99;
  display: inline-flex;
  align-items: baseline;
  gap: 0.45rem;
  margin-left: 1.1rem;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.2;
  text-transform: none;
  white-space: nowrap;
}

.mega-countdown--halloween {
  --hb: 255, 138, 61;
}

.mega-countdown .holiday-bar-label {
  color: var(--color-text);
}

.mega-countdown .holiday-bar-time b {
  color: rgb(var(--hb));
  font-size: 0.92rem;
}

.mega-countdown .holiday-bar-time span {
  margin-right: 0.35rem;
  font-size: 0.7rem;
}

/* ----- Pricing hero: artwork covering the right side, fading out toward the headline -----
   Sits behind the text. It fades out in a circle from the top-right corner, so the
   edges are round and soft instead of a hard block. */
.pc-hero {
  /* clip sideways only, so the artwork can reach up behind the top bar */
  overflow-x: clip;
  overflow-y: visible;
}

/* Hero artwork: wide cut-out (transparent webp) on the right, sized by its height so it never reaches the headline.
   Effects: blue glow behind it, soft shadow, slow float + tiny tilt, a few drifting sparkles. */
.pc-hero-visual {
  position: absolute;
  /* starts at the very top of the page, behind the navbar; padding keeps the art centred in the visible hero */
  top: calc(var(--header-height) * -1);
  right: 0;
  bottom: 0;
  z-index: 0;
  box-sizing: border-box;
  width: 58%;
  padding-top: var(--header-height);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  isolation: isolate;
  pointer-events: none;
  /* only the very bottom fades out, so nothing shows a hard edge where the hero ends */
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 84%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 84%, transparent 100%);
}

/* The glow behind the art, centred on the rose + character */
.pc-hero-visual::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(ellipse 52% 54% at 52% 54%, rgba(60, 130, 255, 0.38), rgba(60, 130, 255, 0.12) 52%, transparent 78%),
    radial-gradient(ellipse 66% 30% at 50% 93%, rgba(60, 130, 255, 0.14), transparent 70%);
}

/* A few small sparkles drifting up in front of the art */
.pc-hero-visual::after {
  content: "";
  position: absolute;
  inset: 12% 4% 10% 8%;
  z-index: 2;
  background:
    radial-gradient(circle at 12% 62%, rgba(190, 220, 255, 0.95) 0 1.6px, transparent 3.2px),
    radial-gradient(circle at 24% 24%, rgba(190, 220, 255, 0.8) 0 1.2px, transparent 2.6px),
    radial-gradient(circle at 41% 82%, rgba(190, 220, 255, 0.85) 0 1.4px, transparent 3px),
    radial-gradient(circle at 58% 12%, rgba(190, 220, 255, 0.9) 0 1.8px, transparent 3.6px),
    radial-gradient(circle at 73% 70%, rgba(190, 220, 255, 0.8) 0 1.3px, transparent 2.8px),
    radial-gradient(circle at 88% 30%, rgba(190, 220, 255, 0.95) 0 1.6px, transparent 3.2px),
    radial-gradient(circle at 94% 86%, rgba(190, 220, 255, 0.75) 0 1.2px, transparent 2.6px);
  animation: pc-hero-sparkle 9s ease-in-out infinite;
}

.pc-hero-art {
  position: relative;
  display: block;
  width: auto;
  height: 80%;
  max-width: 100%;
  max-height: 36rem;
  margin-right: 3%;
  object-fit: contain;
  object-position: center;
  transform-origin: 55% 75%;
  filter: drop-shadow(0 26px 30px rgba(0, 0, 0, 0.5)) drop-shadow(0 0 42px rgba(70, 140, 255, 0.26));
  animation: pc-hero-float 8s ease-in-out infinite;
}

@keyframes pc-hero-float {
  0%, 100% { transform: translateY(0) rotate(-0.8deg); }
  50% { transform: translateY(-0.7rem) rotate(0.8deg); }
}

@keyframes pc-hero-sparkle {
  0%, 100% { transform: translateY(0); opacity: 0.45; }
  50% { transform: translateY(-1.1rem); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .pc-hero-art, .pc-hero-visual::after { animation: none; }
}

/* Narrower screens: the art becomes a faint backdrop so the text stays readable */
@media (max-width: 1100px) {
  .pc-hero-visual {
    width: 100%;
    justify-content: center;
  }

  .pc-hero-art {
    height: 74%;
    margin-right: 0;
    opacity: 0.24;
  }

  .pc-hero-visual::before {
    opacity: 0.6;
  }

  .pc-hero-visual::after {
    display: none;
  }
}

/* ==========================================================
   NAV BUTTON "COMMISSION ME": TEXT ROLL + CURSOR SPOTLIGHT
   script.js (section "NAV BUTTON COMMISSION ME") adds two layers inside
   .site-menu > .button on every page. The button keeps the normal blue
   look of the other main buttons (brighter blue and soft shadow on hover,
   the light sweep, the lift and the press). On top of that: the label
   rolls up while a second line rolls in, and a soft light with a bright
   edge follows the cursor across the button. Only this one button is
   affected. Colour of the light: --cta-light (an R, G, B triplet).
   ========================================================== */
.cta-fx {
  --cta-light: 255, 255, 255;
  --cta-x: 50%;
  --cta-y: 50%;
}

/* This button does not lift on hover: it stays exactly where it is.
   The little press when it is clicked stays. */
.site-menu > .button.cta-fx:hover,
.site-menu > .button.cta-fx:focus-visible {
  transform: none;
}

.site-menu > .button.cta-fx:active {
  transform: scale(0.97);
}

/* Light layer: sits behind the label, in front of the blue surface */
.cta-fx-light {
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(110px circle at var(--cta-x) var(--cta-y), rgba(var(--cta-light), 0.3), rgba(var(--cta-light), 0) 70%);
  transition: opacity 0.25s ease;
}

/* Bright edge: only the 1px rim is lit, brightest near the cursor */
.cta-fx-light::before {
  content: "";
  position: absolute;
  inset: 0;
  padding: 1px;
  border-radius: inherit;
  background: radial-gradient(80px circle at var(--cta-x) var(--cta-y), rgba(var(--cta-light), 0.95), rgba(var(--cta-light), 0) 70%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}

@media (hover: hover) {
  .cta-fx:hover .cta-fx-light,
  .cta-fx:focus-visible .cta-fx-light {
    opacity: 1;
  }
}

/* Text roll: both lines share one grid cell, so the button never changes width */
.cta-roll {
  display: inline-grid;
  overflow: hidden;
  padding: 0.1em 0;
  margin: -0.1em 0;
}

.cta-roll-line {
  grid-area: 1 / 1;
  display: block;
  text-align: center;
  white-space: nowrap;
  transition: transform 0.45s cubic-bezier(0.22, 0.9, 0.3, 1);
}

.cta-roll-line--alt {
  transform: translateY(120%);
  transition-delay: 0.04s;
}

.cta-fx:hover .cta-roll-line,
.cta-fx:focus-visible .cta-roll-line {
  transform: translateY(-120%);
}

.cta-fx:hover .cta-roll-line--alt,
.cta-fx:focus-visible .cta-roll-line--alt {
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .cta-fx-light {
    display: none;
  }

  .cta-roll-line {
    transition: none;
  }
}

/* ==========================================================
   HERO HEADLINE "ROBLOX": BLINKING CARET + HOVER WIPE
   Idea from a Uiverse snippet (satyamchaudharydev), adapted: the word stays
   solid white and an orange line blinks at its left edge, in front of the word, like the
   cursor in a text field. On hover the caret is gone (no blinking while hovered) and an ORANGE copy of the word wipes in
   from the left with a bar on its right edge and a soft glow. No JS: the copy
   is a ::after that reads the word from data-text in index.html; the caret is
   the ::before. Colours: --hfx-color, --hfx-glow. Blink speed: the 1.1s on
   .hero-fx-word::before.
   ========================================================== */
.hero-fx-word {
  --hfx-color: var(--color-orange);
  --hfx-glow: rgba(var(--rgb-orange), 0.85);
  position: relative;
  display: inline-block;
  padding-right: 0.06em;
}

/* the blinking caret */
.hero-fx-word::before {
  content: "";
  position: absolute;
  top: 0.12em;
  bottom: 0.12em;
  left: 0;
  width: 0.05em;
  background-color: var(--hfx-color);
  box-shadow: 0 0 10px var(--hfx-glow);
  pointer-events: none;
  /* it blinks at rest; after a hover it waits 0.55s (the wipe going back) before it blinks again */
  opacity: 0;
  animation: hfx-caret 1.1s steps(1, end) 0.55s infinite;
}

@keyframes hfx-caret {
  0%, 49%   { opacity: 1; }
  50%, 100% { opacity: 0; }
}

.hero-fx-word::after {
  content: attr(data-text);
  content: attr(data-text) / "";
  position: absolute;
  inset: 0;
  box-sizing: border-box;
  width: 0;
  overflow: hidden;
  white-space: nowrap;
  color: var(--hfx-color);
  border-right: 0.05em solid transparent;
  pointer-events: none;
  transition: width 0.5s ease, filter 0.5s ease, border-color 0.2s ease;
}

@media (hover: hover) {
  /* no blinking at all while the word is hovered */
  .hero-fx-word:hover::before {
    animation: none;
    opacity: 0;
  }

  .hero-fx-word:hover::after {
    width: 100%;
    border-right-color: var(--hfx-color);
    filter: drop-shadow(0 0 23px var(--hfx-glow));
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-fx-word::before {
    animation: none;
    opacity: 1;
  }

  .hero-fx-word::after {
    transition: none;
  }
}


/* ==========================================================
   HOMEPAGE HOVER FX ("hfx")
   script.js (section "HOMEPAGE HOVER FX") adds the helper layers; everything
   is drawn here. Homepage only (body.is-home).
   - Hero "View My Work": Uiverse button by MuhammadHasann (a royal blue
     button that goes see-through on hover while six stars fly out of it).
   - Hero "View Reviews": its text scrolls up on hover and five orange stars pop out above it.
   - Hero rating pill: its five stars lift and glow in a left-to-right wave on hover (separate).
   - FAQ: accent bar, nudge and a cursor-following light.
   Switches in script.js: HERO_BUTTON_FX (hero buttons) and HOME_HOVER_FX (FAQ).
   The hero rules only apply to buttons that script.js marked with .hfx-btn,
   so with HERO_BUTTON_FX = false the buttons look exactly like before.
   ========================================================== */

/* ---------- Primary hero button: Uiverse "stars" button (by MuhammadHasann) ---------- */
.hero-actions .button-primary.hfx-btn {
  justify-content: center;
  padding: 0.95rem 1.8rem;     /* same size and type as the other hero button */
  border: 1px solid var(--color-button);
  border-radius: var(--radius-button);
  background-color: var(--color-button);
  background-image: none;
  color: #ffffff;
  overflow: visible;           /* the stars fly out past the edge */
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.24), 0 6px 16px -8px rgba(28, 100, 220, 0.7);
  transition: background-color 0.3s ease-in-out, border-color 0.3s ease-in-out, color 0.3s ease-in-out, box-shadow 0.3s ease-in-out, transform 0.2s var(--spring);
}
.hero-actions .button-primary.hfx-btn::after { display: none; }
.hero-actions .button-primary.hfx-btn:hover,
.hero-actions .button-primary.hfx-btn:focus-visible {
  transform: none;
  background-color: transparent;
  border-color: var(--color-accent);
  color: var(--color-accent-bright);
  box-shadow: 0 0 25px -2px rgba(var(--rgb-blue), 0.5);
}
.hero-actions .button-primary.hfx-btn:active { transform: scale(0.97); }

.hfx-label { position: relative; z-index: 1; }

.hfx-stars { position: absolute; inset: 0; pointer-events: none; }
.hfx-star {
  position: absolute;
  height: auto;
  opacity: 0;
  filter: drop-shadow(0 0 0 rgba(var(--rgb-blue), 0));
  z-index: -5;
}
.hfx-star svg { display: block; width: 100%; height: auto; }
.hfx-star path { fill: #dff0ff; }
.hero-actions .button-primary.hfx-btn:is(:hover, :focus-visible) .hfx-star {
  opacity: 1;
  filter: drop-shadow(0 0 10px rgba(var(--rgb-blue), 0.95));
  z-index: 2;
}
.hfx-star--1 { top: 20%; left: 20%; width: 25px; transition: all 1s cubic-bezier(0.05, 0.83, 0.43, 0.96); }
.hfx-star--2 { top: 45%; left: 45%; width: 15px; transition: all 1s cubic-bezier(0, 0.4, 0, 1.01); }
.hfx-star--3 { top: 40%; left: 40%; width: 5px; transition: all 1s cubic-bezier(0, 0.4, 0, 1.01); }
.hfx-star--4 { top: 20%; left: 40%; width: 8px; transition: all 0.8s cubic-bezier(0, 0.4, 0, 1.01); }
.hfx-star--5 { top: 25%; left: 45%; width: 15px; transition: all 0.6s cubic-bezier(0, 0.4, 0, 1.01); }
.hfx-star--6 { top: 5%; left: 50%; width: 5px; transition: all 0.8s ease; }
.hero-actions .button-primary.hfx-btn:is(:hover, :focus-visible) .hfx-star--1 { top: -80%; left: -30%; }
.hero-actions .button-primary.hfx-btn:is(:hover, :focus-visible) .hfx-star--2 { top: -25%; left: 10%; }
.hero-actions .button-primary.hfx-btn:is(:hover, :focus-visible) .hfx-star--3 { top: 55%; left: 25%; }
.hero-actions .button-primary.hfx-btn:is(:hover, :focus-visible) .hfx-star--4 { top: 30%; left: 80%; }
.hero-actions .button-primary.hfx-btn:is(:hover, :focus-visible) .hfx-star--5 { top: 25%; left: 115%; }
.hero-actions .button-primary.hfx-btn:is(:hover, :focus-visible) .hfx-star--6 { top: 5%; left: 60%; }

/* ---------- Secondary hero button "View Reviews": scroll-up text + rating-star burst ----------
   On hover the label rolls up and a copy rolls in from below, while five orange stars spin
   out above the button and twinkle left to right. This is separate from the rating pill
   above the buttons, which has its own hover (next section). */
.hero-actions .button-secondary.hfx-btn {
  overflow: visible;
  transition: border-color 0.25s ease, background-color 0.25s ease, box-shadow 0.3s ease, transform 0.25s var(--spring);
}
.hero-actions .button-secondary.hfx-btn::after { display: none; }
.hero-actions .button-secondary.hfx-btn:is(:hover, :focus-visible) {
  border-color: rgba(var(--rgb-orange), 0.6);
  background-color: rgba(var(--rgb-orange), 0.1);
  box-shadow:
    0 12px 26px -14px rgba(0, 0, 0, 0.9),
    0 0 0 3px rgba(var(--rgb-orange), 0.1),
    0 0 26px -8px rgba(var(--rgb-orange), 0.55);
}

/* Scroll-up text */
.hfx-roll {
  position: relative;
  display: inline-block;
  overflow: hidden;
  line-height: 1.3;
  vertical-align: middle;
}
.hfx-roll-a, .hfx-roll-b {
  display: block;
  transition: transform 0.45s cubic-bezier(0.65, 0, 0.2, 1);
}
.hfx-roll-b { position: absolute; top: 100%; left: 0; width: 100%; text-align: center; color: var(--color-orange-bright); }
.hfx-btn:is(:hover, :focus-visible) .hfx-roll-a,
.hfx-btn:is(:hover, :focus-visible) .hfx-roll-b { transform: translateY(-100%); }

/* Stars */
.hfx-sparks { position: absolute; inset: 0; pointer-events: none; }
.hfx-spark {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 2;
  width: var(--s);
  height: var(--s);
  margin: calc(var(--s) / -2) 0 0 calc(var(--s) / -2);
  opacity: 0;
  transform: translate(0, 0) scale(0) rotate(-120deg);
  transition: transform 0.2s ease, opacity 0.15s ease;   /* quick, tidy exit */
}
.hfx-spark svg {
  display: block;
  width: 100%;
  height: 100%;
  fill: var(--spark-fill, var(--color-orange));
  filter: drop-shadow(0 0 5px var(--spark-glow, rgba(var(--rgb-orange), 0.75)));
}
.hfx-btn:is(:hover, :focus-visible) .hfx-spark {
  opacity: 1;
  transform: translate(var(--x), var(--y)) scale(1) rotate(var(--r));
  transition: transform 0.6s cubic-bezier(0.2, 1.5, 0.4, 1), opacity 0.2s ease;
  transition-delay: var(--d);
}
.hfx-btn:is(:hover, :focus-visible) .hfx-spark svg {
  animation: hfx-twinkle 1.3s ease-in-out infinite;
  animation-delay: calc(var(--d) + 0.55s);               /* the wave starts once the stars have landed */
}
@keyframes hfx-twinkle {
  0%, 55%, 100% { transform: scale(1); filter: drop-shadow(0 0 5px var(--spark-glow, rgba(var(--rgb-orange), 0.75))); }
  25%           { transform: scale(1.3); filter: drop-shadow(0 0 9px rgba(255, 190, 120, 1)) brightness(1.25); }
}
.hfx-spark--1 { --s: 11px; --x: -62px; --y: -32px; --r: -16deg; --d: 0ms; }
.hfx-spark--2 { --s: 14px; --x: -32px; --y: -39px; --r: 10deg;  --d: 60ms; }
.hfx-spark--3 { --s: 18px; --x: 0px;   --y: -43px; --r: -6deg;  --d: 120ms; }
.hfx-spark--4 { --s: 14px; --x: 32px;  --y: -39px; --r: 14deg;  --d: 180ms; }
.hfx-spark--5 { --s: 11px; --x: 62px;  --y: -32px; --r: -12deg; --d: 240ms; }
@media (prefers-reduced-motion: reduce) {
  .hfx-roll-b { display: none; }
  .hfx-btn:is(:hover, :focus-visible) .hfx-roll-a { transform: none; }
}

/* ---------- Top bar "Commission Me": scroll-up text + stars, but NO lighting up on hover ----------
   Same effect as "View Reviews" (the stars burst out below the button, because the top
   bar has no room above it). Hover keeps the button's resting colour and shadow, and the
   light sweep is off. The rolled-in text stays white. */
.site-header .button-primary.hfx-nav {
  position: relative;
  overflow: visible;
  --spark-fill: #dff0ff;
  --spark-glow: rgba(var(--rgb-blue), 0.9);
}
.site-header .button-primary.hfx-nav::after { display: none; }
.site-header .button-primary.hfx-nav:is(:hover, :focus-visible) {
  background-color: var(--color-button);
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0) 62%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.24), 0 6px 16px -8px rgba(28, 100, 220, 0.7);
}
.hfx-nav .hfx-roll-b { color: inherit; }
.hfx-nav .hfx-spark--1 { --s: 10px; --x: -64px; --y: 30px; --r: -16deg; }
.hfx-nav .hfx-spark--2 { --s: 13px; --x: -34px; --y: 38px; --r: 10deg; }
.hfx-nav .hfx-spark--3 { --s: 17px; --x: 0px;   --y: 42px; --r: -6deg; }
.hfx-nav .hfx-spark--4 { --s: 13px; --x: 34px;  --y: 38px; --r: 14deg; }
.hfx-nav .hfx-spark--5 { --s: 10px; --x: 64px;  --y: 30px; --r: -12deg; }

/* ---------- Corner popup buttons: seasonal sale popup + welcome offer ("Redeem") ----------
   script.js (addButtonFx) adds the layers. The label scrolls up on hover, seven stars burst
   out above the button and twinkle left to right, and a soft shine sweeps across every few
   seconds (once, quicker, on hover). The normal hover look of these buttons is unchanged. */
.hfx-pop {
  position: relative;
  overflow: visible;
  --spark-fill: #dff0ff;
  --spark-glow: rgba(var(--rgb-blue), 0.9);
}
.sale-popup .hfx-pop {                       /* the seasonal popup is orange-themed */
  --spark-fill: #ffe2c2;
  --spark-glow: rgba(var(--rgb-orange), 0.95);
}
.hfx-pop::after { display: none; }           /* the shine below replaces the old sweep */
.hfx-pop .hfx-roll-b { color: inherit; }
.hfx-pop .hfx-sparks { z-index: 3; }

.hfx-shine {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  border-radius: inherit;                    /* stays inside the button's rounded corners */
  pointer-events: none;
}
.hfx-shine::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 45%;
  background: linear-gradient(105deg, transparent, rgba(255, 255, 255, 0.38), transparent);
  transform: translateX(-130%) skewX(-18deg);
  animation: hfx-shine-idle 5.5s ease-in-out 1.5s infinite;
}
.hfx-pop:is(:hover, :focus-visible) .hfx-shine::before { animation: hfx-shine-hover 0.8s ease-out; }
@keyframes hfx-shine-idle {
  0%, 62% { transform: translateX(-130%) skewX(-18deg); }
  100%    { transform: translateX(330%) skewX(-18deg); }
}
@keyframes hfx-shine-hover {
  from { transform: translateX(-130%) skewX(-18deg); }
  to   { transform: translateX(330%) skewX(-18deg); }
}

/* Seven stars along the top edge of the (wide) button */
.hfx-pop .hfx-spark--1 { --s: 10px; --x: -105px; --y: -31px; --r: -16deg; --d: 0ms; }
.hfx-pop .hfx-spark--2 { --s: 13px; --x: -70px;  --y: -39px; --r: 10deg;  --d: 40ms; }
.hfx-pop .hfx-spark--3 { --s: 16px; --x: -35px;  --y: -45px; --r: -6deg;  --d: 80ms; }
.hfx-pop .hfx-spark--4 { --s: 20px; --x: 0px;    --y: -49px; --r: 8deg;   --d: 120ms; }
.hfx-pop .hfx-spark--5 { --s: 16px; --x: 35px;   --y: -45px; --r: 14deg;  --d: 160ms; }
.hfx-pop .hfx-spark--6 { --s: 13px; --x: 70px;   --y: -39px; --r: -10deg; --d: 200ms; }
.hfx-pop .hfx-spark--7 { --s: 10px; --x: 105px;  --y: -31px; --r: 12deg;  --d: 240ms; }

/* The arrow nudge (.button:hover svg) must not push the star shapes around */
.button.hfx-btn:is(:hover, :focus-visible) .hfx-spark svg,
.button.hfx-btn:is(:hover, :focus-visible) .hfx-star svg { transform: none; }

@media (prefers-reduced-motion: reduce) {
  .hfx-shine { display: none; }
}


/* ---------- Welcome "Redeem": a little gift that opens (no stars) ----------
   The arrow is swapped for a gift box. On hover the lid tips open and a soft light spills out;
   every few seconds it gives a small wiggle so the offer gets noticed. */
.button .wo-gift {
  flex: none;
  overflow: visible;
  transform-origin: 50% 90%;
  transition: filter 0.3s ease;
  animation: wo-gift-wiggle 5.5s ease-in-out 2.5s infinite;
}
.wo-gift-lid {
  transform-box: view-box;
  transform-origin: 3px 12px;                  /* the lid hinges on its left edge */
  transition: transform 0.45s var(--spring);
}
.wo-gift-glow {
  fill: #fff;
  stroke: none;
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
  transform: scale(0.3);
  filter: blur(1.4px);
  transition: opacity 0.3s ease, transform 0.5s var(--spring);
}
.button.hfx-pop:is(:hover, :focus-visible) svg.wo-gift { transform: none; animation: none; filter: drop-shadow(0 0 4px rgba(255, 255, 255, 0.65)); }
.hfx-pop:is(:hover, :focus-visible) .wo-gift-lid { transform: translate(1px, -3.5px) rotate(-18deg); }
.hfx-pop:is(:hover, :focus-visible) .wo-gift-glow { opacity: 0.85; transform: scale(1.5) translateY(-1px); }
@keyframes wo-gift-wiggle {
  0%, 22%, 100% { transform: rotate(0deg); }
  4%  { transform: rotate(-12deg); }
  8%  { transform: rotate(10deg); }
  12% { transform: rotate(-7deg); }
  16% { transform: rotate(4deg); }
}
@media (prefers-reduced-motion: reduce) {
  .button .wo-gift { animation: none; }
  .wo-gift-lid, .wo-gift-glow { transition: none; }
}


/* ---------- Seasonal popup button: a price tag swinging on the corner (no stars) ----------
   The tag ("20% off") is pinned to the top-right corner of the button. It sways a little every
   few seconds and swings like a pendulum, pivoting on its hole, when the button is hovered. */
.hfx-tag {
  position: absolute;
  top: -12px;
  right: 14px;
  z-index: 4;
  pointer-events: none;
  filter: drop-shadow(0 4px 5px rgba(0, 0, 0, 0.45));
  transform: rotate(-6deg);
  transform-origin: 16% 50%;                   /* the hole */
  animation: hfx-tag-idle 6s ease-in-out 3s infinite;
}
.hfx-tag-body {
  position: relative;
  display: block;
  padding: 0.24rem 0.65rem 0.24rem 1.2rem;
  clip-path: polygon(0 50%, 12% 0, 100% 0, 100% 100%, 12% 100%);
  background: linear-gradient(180deg, var(--color-orange-bright), var(--color-orange));
  color: var(--color-orange-ink);
  font-size: 0.72rem;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: 0.01em;
  white-space: nowrap;
}
.hfx-tag-body::before {                          /* the hole */
  content: "";
  position: absolute;
  left: 0.5rem;
  top: 50%;
  width: 5px;
  height: 5px;
  margin-top: -2.5px;
  border-radius: 50%;
  background: rgba(8, 13, 28, 0.95);
}
.sale-popup--christmas .hfx-tag-body,
.sale-popup--summer .hfx-tag-body {              /* these buttons are orange already: use a cream tag */
  background: linear-gradient(180deg, #fffaf2, #ffe6cc);
}
.sale-popup--christmas .hfx-tag-body {           /* the Christmas ink is white, which vanishes on the cream tag: use dark red */
  color: #8f1414;
}
.hfx-btn:is(:hover, :focus-visible) .hfx-tag { animation: hfx-tag-swing 1.1s ease-out; }
@keyframes hfx-tag-idle {
  0%, 16%, 100% { transform: rotate(-6deg); }
  5%  { transform: rotate(-13deg); }
  10% { transform: rotate(1deg); }
}
@keyframes hfx-tag-swing {
  0%   { transform: rotate(-6deg) scale(1); }
  18%  { transform: rotate(-24deg) scale(1.12); }
  38%  { transform: rotate(10deg) scale(1.08); }
  56%  { transform: rotate(-14deg) scale(1.04); }
  74%  { transform: rotate(2deg) scale(1.02); }
  100% { transform: rotate(-6deg) scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .hfx-tag, .hfx-btn:is(:hover, :focus-visible) .hfx-tag { animation: none; }
}

/* ---------- Hero rating pill: star wave (only while the pill itself is hovered / focused) ----------
   The five stars lift one after another from left to right and glow. They only move up
   (no scaling), so the last star, which is only partly filled, is never cut off.
   "View Reviews" itself has no extra effect; it just scrolls to the reviews section. */
.hero-rating .rating-stars-fill {
  overflow: visible;                         /* lets the stars lift above the box ... */
  clip-path: inset(-10px 0 -10px 0);         /* ... while the fill width still cuts the right side */
}
.hero-rating:is(:hover, :focus-visible) {
  border-color: rgba(var(--rgb-orange), 0.55);
  background-color: rgba(var(--rgb-orange), 0.1);
  box-shadow: 0 0 22px -8px rgba(var(--rgb-orange), 0.6);
}
@media (prefers-reduced-motion: no-preference) {
  .hero-rating:is(:hover, :focus-visible) .rating-stars-fill .rating-star {
    animation: hfx-rate-wave 1.3s ease-in-out infinite;
  }
  .hero-rating:is(:hover, :focus-visible) .rating-stars-fill .rating-star:nth-child(1) { animation-delay: 0s; }
  .hero-rating:is(:hover, :focus-visible) .rating-stars-fill .rating-star:nth-child(2) { animation-delay: 0.08s; }
  .hero-rating:is(:hover, :focus-visible) .rating-stars-fill .rating-star:nth-child(3) { animation-delay: 0.16s; }
  .hero-rating:is(:hover, :focus-visible) .rating-stars-fill .rating-star:nth-child(4) { animation-delay: 0.24s; }
  .hero-rating:is(:hover, :focus-visible) .rating-stars-fill .rating-star:nth-child(5) { animation-delay: 0.32s; }
  /* soft glow around the whole row (drawn outside the clipped layer, so it is never cut) */
  .hero-rating:is(:hover, :focus-visible) .rating-stars { animation: hfx-rate-glow 1.3s ease-in-out infinite; }
}
@keyframes hfx-rate-wave {
  0%, 55%, 100% { transform: translateY(0); filter: none; }
  25%           { transform: translateY(-2px); filter: brightness(1.3); }
}
@keyframes hfx-rate-glow {
  0%, 100% { filter: drop-shadow(0 0 0 rgba(var(--rgb-orange), 0)); }
  35%      { filter: drop-shadow(0 0 6px rgba(var(--rgb-orange), 0.8)); }
}

/* ---------- Cards: light that follows the cursor ---------- */
.hfx-glow {
  position: absolute; inset: 0; z-index: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity 0.3s ease;
  background: radial-gradient(260px circle at var(--hx, 50%) var(--hy, 50%), rgba(134, 197, 255, 0.10), transparent 70%);
}
.hfx-glow::before {
  content: ""; position: absolute; inset: 0; padding: 1px; border-radius: inherit;
  background: radial-gradient(180px circle at var(--hx, 50%) var(--hy, 50%), rgba(134, 197, 255, 0.85), transparent 70%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}
@media (hover: hover) {
  .hfx-host:hover > .hfx-glow { opacity: 1; }
}

/* ---------- FAQ: accent bar + nudge ---------- */
.faq-trigger { position: relative; }
.faq-trigger::before {
  content: ""; position: absolute; left: 0; top: 24%; bottom: 24%; width: 3px; border-radius: 3px;
  background: var(--color-accent-bright); box-shadow: 0 0 10px rgba(var(--rgb-blue), 0.8);
  transform: scaleY(0); transition: transform 0.3s var(--spring);
}
.faq-q-text { transition: transform 0.3s var(--spring), color 0.2s ease; }
.faq-trigger:hover::before, .faq-trigger:focus-visible::before, .faq-item.is-open .faq-trigger::before { transform: scaleY(1); }
.faq-trigger:hover .faq-q-text, .faq-trigger:focus-visible .faq-q-text { transform: translateX(5px); color: var(--color-accent-bright); }

@media (prefers-reduced-motion: reduce) {
  .hfx-stars, .hfx-sparks { display: none; }
   .faq-trigger::before, .faq-q-text, .hfx-glow { transition: none; }
  .faq-trigger:hover .faq-q-text, .faq-trigger:focus-visible .faq-q-text { transform: none; }
}

/* ==========================================================
   PERKS: "View more" on the last card (Portfolio Placement)
   The card starts collapsed (index.html hides it right away), so the section
   is only as tall as your original layout's first two rows. The button under
   the grid shows / hides it. Everything else is your original perks layout.
   ========================================================== */
.perk-card[hidden] { display: none !important; }
.perks-more { display: flex; justify-content: center; margin-top: var(--space-3); }
.perks-more[hidden] { display: none; }
/* ----- Portfolio Placement sits in the middle (it is the only card on the last row) ----- */
#perk-portfolio { justify-self: center; width: 100%; max-width: 36rem; }
@media (min-width: 960px) {
  #perk-portfolio { grid-column: 4 / span 6; grid-row: 3; max-width: none; }   /* columns 4-9 of 12 = centred */
}

/* ----- "View more": the last perk shows as a faded peek, the button sits on top of it ----- */
@property --perk-fade { syntax: "<percentage>"; inherits: false; initial-value: 100%; }
#perk-portfolio { transition: max-height 0.6s cubic-bezier(0.65, 0, 0.2, 1), --perk-fade 0.6s ease, transform 0.3s var(--spring), border-color 0.25s ease, box-shadow 0.3s ease; }
#perk-portfolio.is-peek,
#perk-portfolio.is-anim {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, #000 var(--perk-fade), transparent 100%);
          mask-image: linear-gradient(to bottom, #000 var(--perk-fade), transparent 100%);
}
#perk-portfolio.is-peek {
  --perk-fade: 32%;
  max-height: 7.75rem;
  pointer-events: none;
  user-select: none;
}
.perks-more { position: relative; z-index: 4; transition: margin-top 0.6s cubic-bezier(0.65, 0, 0.2, 1); }
.perks-more.is-peek { margin-top: -3.4rem; }          /* the button overlaps the faded bottom of the card */
.perks-more .perks-more-btn {                    /* a text button: no background, no border */
  position: relative;
  gap: 0.5rem;
  padding: 0.45rem 0.35rem;
  border: 0;
  border-radius: 6px;
  background: none;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  color: var(--color-accent-bright);
  font-size: 0.98rem;
  letter-spacing: 0;
}
/* No hover or click effects: nothing lifts, glows, shines, underlines or fades.
   The keyboard focus ring stays. */
.perks-more .perks-more-btn,
.perks-more .perks-more-btn:is(:hover, :focus-visible, :active) {
  border: 0;
  background: none;
  box-shadow: none;
  transform: none;
  opacity: 1;
  filter: none;
  color: var(--color-accent-bright);
  transition: none;
}
.perks-more .perks-more-btn::after { content: none; }
.perks-more-chevron { flex: none; transition: transform 0.35s var(--spring); }
.perks-more.is-peek .perks-more-btn .perks-more-chevron { animation: perks-bob 1.8s ease-in-out infinite; }
.perks-more .perks-more-btn:is(:hover, :focus-visible, :active) .perks-more-chevron { transform: none; }
.perks-more:not(.is-peek) .perks-more-btn .perks-more-chevron,
.perks-more:not(.is-peek) .perks-more-btn:is(:hover, :focus-visible) .perks-more-chevron { transform: rotate(180deg); }
@keyframes perks-bob { 0%, 100% { transform: translateY(-1px); } 50% { transform: translateY(3px); } }
@media (prefers-reduced-motion: reduce) {
  #perk-portfolio, .perks-more { transition: none; }
  .perks-more.is-peek .perks-more-btn .perks-more-chevron { animation: none; }
}

/* Tablet: Seasonal Sales used to pair up with the removed card, so it takes the full row */
@media (min-width: 640px) and (max-width: 959px) {
  .perk-card:nth-child(3) { grid-column: span 2; }
}

/* ==========================================================
   NAVBAR: "NEWS" DOT
   A small dot above the word "News" when there is a post the visitor has
   not seen yet. script.js adds it and removes it once News is clicked.
   ========================================================== */
.nav-news-label {
  position: relative;
  display: inline-block;
}

.nav-news-dot {
  position: absolute;
  top: 0;
  right: -0.6rem;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: var(--color-orange-bright, var(--color-orange, #ff9a3c));
  box-shadow: 0 0 0 2px rgba(6, 10, 20, 0.85);
  pointer-events: none;
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.nav-news-dot.is-gone {
  transform: scale(0);
  opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
  .nav-news-dot { transition: none; }
}

/* ==========================================================
   SEASONAL SALE POPUPS: THEMED BACKGROUNDS
   Each season gets its own colours and a small repeating pattern, plus one
   decoration along the bottom of the card (cobweb / snow drift / waves).
   The patterns are drawn with tiny inline SVGs, so there are no extra files.
   The first layer is a soft dark patch behind the text, so it stays readable.
   Halloween: bats + sparkles on deep purple. Christmas: snowflakes + holly on
   deep green. Summer: waves + sun on deep teal.
   ========================================================== */
.sale-popup--halloween {
  background:
    radial-gradient(ellipse 80% 62% at 50% 76%, rgba(14, 9, 28, 0.58), transparent 100%),
    url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='84'%20height='84'%20viewBox='0%200%2084%2084'%3E%20%3Cpath%20d='M0%207%20C3%201%208%201%2011%206%20C12%203%2014%203%2014%205%20C14%203%2016%203%2017%206%20C20%201%2025%201%2028%207%20C25%206%2022%207%2021%2011%20C19%209%2017%2010%2014%2014%20C11%2010%209%209%207%2011%20C6%207%203%206%200%207Z'%20transform='translate(6%208)'%20fill='rgb(255,138,61)'%20fill-opacity='0.36'/%3E%20%3Cpath%20d='M0%207%20C3%201%208%201%2011%206%20C12%203%2014%203%2014%205%20C14%203%2016%203%2017%206%20C20%201%2025%201%2028%207%20C25%206%2022%207%2021%2011%20C19%209%2017%2010%2014%2014%20C11%2010%209%209%207%2011%20C6%207%203%206%200%207Z'%20transform='translate(52%2052)%20scale(0.8)'%20fill='rgb(176,130,255)'%20fill-opacity='0.40'/%3E%20%3Ccircle%20cx='56'%20cy='14'%20r='1.8'%20fill='rgb(255,138,61)'%20fill-opacity='0.38'/%3E%20%3Ccircle%20cx='14'%20cy='56'%20r='1.8'%20fill='rgb(176,130,255)'%20fill-opacity='0.40'/%3E%20%3Cpath%20d='M70%2030%20l1.2%203%203%201.2%20-3%201.2%20-1.2%203%20-1.2%20-3%20-3%20-1.2%203%20-1.2z'%20fill='rgb(255,200,120)'%20fill-opacity='0.34'/%3E%20%3C/svg%3E") 0 0 / 84px 84px repeat,
    radial-gradient(ellipse 80% 50% at 100% 100%, rgba(var(--rgb-orange), 0.18), transparent 70%),
    radial-gradient(ellipse 70% 45% at 0% 0%, rgba(140, 90, 255, 0.22), transparent 70%),
    rgba(14, 9, 28, 0.97);
}

.sale-popup--christmas {
  background:
    radial-gradient(ellipse 80% 62% at 50% 76%, rgba(6, 18, 18, 0.58), transparent 100%),
    url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='76'%20height='76'%20viewBox='0%200%2076%2076'%3E%20%3Cg%20transform='translate(14%2014)'%3E%3Cg%20stroke='rgb(255,255,255)'%20stroke-opacity='0.36'%20stroke-width='1.2'%20stroke-linecap='round'%20fill='none'%3E%20%3Cpath%20d='M0%20-7%20V7%20M-6%20-3.5%20L6%203.5%20M-6%203.5%20L6%20-3.5'/%3E%20%3Cpath%20d='M-2%20-6%20L0%20-4%20L2%20-6%20M-2%206%20L0%204%20L2%206%20M-6.5%20-1%20L-4%20-0.5%20L-5%202%20M6.5%201%20L4%200.5%20L5%20-2%20M-6.5%201%20L-4%200.5%20L-5%20-2%20M6.5%20-1%20L4%20-0.5%20L5%202'%20stroke-width='0.9'/%3E%3C/g%3E%3C/g%3E%20%3Cg%20transform='translate(52%2052)%20scale(0.75)'%3E%3Cg%20stroke='rgb(255,255,255)'%20stroke-opacity='0.36'%20stroke-width='1.2'%20stroke-linecap='round'%20fill='none'%3E%20%3Cpath%20d='M0%20-7%20V7%20M-6%20-3.5%20L6%203.5%20M-6%203.5%20L6%20-3.5'/%3E%20%3Cpath%20d='M-2%20-6%20L0%20-4%20L2%20-6%20M-2%206%20L0%204%20L2%206%20M-6.5%20-1%20L-4%20-0.5%20L-5%202%20M6.5%201%20L4%200.5%20L5%20-2%20M-6.5%201%20L-4%200.5%20L-5%20-2%20M6.5%20-1%20L4%20-0.5%20L5%202'%20stroke-width='0.9'/%3E%3C/g%3E%3C/g%3E%20%3Ccircle%20cx='56'%20cy='16'%20r='2'%20fill='rgb(255,90,90)'%20fill-opacity='0.46'/%3E%20%3Ccircle%20cx='60'%20cy='19'%20r='1.6'%20fill='rgb(255,90,90)'%20fill-opacity='0.40'/%3E%20%3Cpath%20d='M52%2013%20q4%20-5%207%20-1%20q-3%204%20-7%201z'%20fill='rgb(61,220,132)'%20fill-opacity='0.46'/%3E%20%3Ccircle%20cx='16'%20cy='58'%20r='1.4'%20fill='rgb(255,255,255)'%20fill-opacity='0.34'/%3E%20%3Ccircle%20cx='36'%20cy='38'%20r='1.1'%20fill='rgb(255,255,255)'%20fill-opacity='0.30'/%3E%20%3C/svg%3E") 0 0 / 76px 76px repeat,
    radial-gradient(ellipse 80% 50% at 100% 100%, rgba(var(--rgb-orange), 0.18), transparent 70%),
    radial-gradient(ellipse 70% 45% at 0% 0%, rgba(61, 220, 132, 0.18), transparent 70%),
    rgba(6, 18, 18, 0.97);
}

.sale-popup--summer {
  background:
    radial-gradient(ellipse 80% 62% at 50% 76%, rgba(6, 20, 32, 0.58), transparent 100%),
    url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='104'%20height='68'%20viewBox='0%200%20104%2068'%3E%20%3Cpath%20d='M0%2014%20Q13%204%2026%2014%20T52%2014%20T78%2014%20T104%2014'%20fill='none'%20stroke='rgb(45,212,220)'%20stroke-opacity='0.36'%20stroke-width='1.6'%20stroke-linecap='round'/%3E%20%3Cpath%20d='M0%2052%20Q13%2042%2026%2052%20T52%2052%20T78%2052%20T104%2052'%20fill='none'%20stroke='rgb(45,212,220)'%20stroke-opacity='0.28'%20stroke-width='1.6'%20stroke-linecap='round'/%3E%20%3Cg%20transform='translate(78%2033)'%3E%3Ccircle%20r='4'%20fill='rgb(255,196,61)'%20fill-opacity='0.44'/%3E%20%3Cg%20stroke='rgb(255,196,61)'%20stroke-opacity='0.40'%20stroke-width='1.4'%20stroke-linecap='round'%3E%3Cpath%20d='M0%20-7.5%20V-10.5'%20transform='rotate(0)'/%3E%3Cpath%20d='M0%20-7.5%20V-10.5'%20transform='rotate(45)'/%3E%3Cpath%20d='M0%20-7.5%20V-10.5'%20transform='rotate(90)'/%3E%3Cpath%20d='M0%20-7.5%20V-10.5'%20transform='rotate(135)'/%3E%3Cpath%20d='M0%20-7.5%20V-10.5'%20transform='rotate(180)'/%3E%3Cpath%20d='M0%20-7.5%20V-10.5'%20transform='rotate(225)'/%3E%3Cpath%20d='M0%20-7.5%20V-10.5'%20transform='rotate(270)'/%3E%3Cpath%20d='M0%20-7.5%20V-10.5'%20transform='rotate(315)'/%3E%3C/g%3E%3C/g%3E%20%3Ccircle%20cx='22'%20cy='34'%20r='1.6'%20fill='rgb(255,255,255)'%20fill-opacity='0.32'/%3E%20%3Ccircle%20cx='30'%20cy='29'%20r='1'%20fill='rgb(255,255,255)'%20fill-opacity='0.28'/%3E%20%3C/svg%3E") 0 0 / 104px 68px repeat,
    radial-gradient(ellipse 80% 50% at 100% 100%, rgba(var(--rgb-orange), 0.20), transparent 70%),
    radial-gradient(ellipse 70% 45% at 0% 0%, rgba(45, 212, 220, 0.20), transparent 70%),
    rgba(6, 20, 32, 0.97);
}

/* One decoration along the bottom of each card (behind the text and the button) */
.sale-popup--halloween::after,
.sale-popup--christmas::after,
.sale-popup--summer::after {
  content: "";
  position: absolute;
  z-index: 1;
  pointer-events: none;
}

.sale-popup--halloween::after {
  left: 0;
  bottom: 0;
  width: 110px;
  height: 110px;
  background: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='110'%20height='110'%20viewBox='0%200%20110%20110'%20fill='none'%20stroke='rgb(235,225,255)'%20stroke-opacity='0.20'%20stroke-width='1'%20stroke-linecap='round'%3E%20%3Cpath%20d='M0%20110%20L0%208%20M0%20110%20L22%2012%20M0%20110%20L48%2022%20M0%20110%20L78%2046%20M0%20110%20L100%2080%20M0%20110%20L102%20110'/%3E%20%3Cpath%20d='M0%2084%20Q20%2082%2028%2096%20M0%2062%20Q30%2058%2044%2084%20M0%2040%20Q40%2036%2062%2070%20M0%2018%20Q50%2014%2082%2058'/%3E%20%3C/svg%3E") no-repeat left bottom / contain;
}

.sale-popup--christmas::after {
  left: 0;
  right: 0;
  bottom: 0;
  height: 20px;
  background: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='64'%20height='20'%20viewBox='0%200%2064%2020'%3E%20%3Cpath%20d='M0%2020%20V11%20Q8%202%2016%2011%20Q24%204%2032%2011%20Q40%201%2048%2011%20Q56%204%2064%2011%20V20Z'%20fill='rgb(255,255,255)'%20fill-opacity='0.2'/%3E%3C/svg%3E") repeat-x left bottom / 64px 20px;
}

.sale-popup--summer::after {
  left: 0;
  right: 0;
  bottom: 0;
  height: 16px;
  background:
    url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='56'%20height='16'%20viewBox='0%200%2056%2016'%3E%20%3Cpath%20d='M0%209%20Q7%201%2014%209%20T28%209%20T42%209%20T56%209%20V16%20H0Z'%20fill='rgb(255,196,61)'%20fill-opacity='0.22'/%3E%3C/svg%3E") repeat-x 14px bottom / 56px 16px,
    url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='56'%20height='16'%20viewBox='0%200%2056%2016'%3E%20%3Cpath%20d='M0%209%20Q7%201%2014%209%20T28%209%20T42%209%20T56%209%20V16%20H0Z'%20fill='rgb(45,212,220)'%20fill-opacity='0.26'/%3E%3C/svg%3E") repeat-x 0 bottom / 56px 16px;
}


/* ==========================================================
   WORK MENU: the buttons answer instantly, and the page dims behind the open menu
   (kept at the end of the file so it wins over the older hover timings above)
   ========================================================== */
.mega-work .mega-link {
  transition: background-color 0.06s ease, border-color 0.06s ease, box-shadow 0.06s ease;
}

.mega-work .mega-link-icon {
  transition: color 0.06s ease, opacity 0.06s ease;
}

.mega-work .mega-link-title {
  transition: color 0.06s ease;
}

.mega-work .mega-link .mega-arrow {
  transition: opacity 0.06s ease, color 0.06s ease, transform 0.1s ease;
}

/* The dim: sits under the header (z-index 100) and over the page, and never catches the mouse */
.mega-backdrop {
  position: fixed;
  inset: 0;
  z-index: 90;
  background: rgba(3, 7, 18, 0.3);          /* was 0.5: less dark */
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  will-change: opacity;                      /* own layer: the fade costs no repaint */
  transition: opacity 0.2s ease, visibility 0s linear 0.2s;
}

.mega-backdrop.is-visible {
  opacity: 1;
  visibility: visible;
  transition-delay: 0s;
}

@media (max-width: 860px) {
  .mega-backdrop { display: none; }
}

/* ==========================================================
   WORK MENU: floating preview card
   Shows the picture of the hovered button beside the menu (the banner stays as it is).
   Desktop only; script.js places it and points it at the hovered button.
   ========================================================== */
.mega-float { display: none; }

@media (min-width: 861px) {
  .mega-float {
    display: block;
    position: fixed;
    z-index: 101;
    width: 280px;
    padding: 8px 8px 10px;
    border: 1px solid rgba(var(--rgb-blue), 0.3);
    border-radius: var(--radius-card);
    background: #0d1a2f;
    box-shadow:
      0 24px 48px -20px rgba(0, 0, 0, 0.9),
      0 0 44px -14px rgba(var(--rgb-blue), 0.5);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateX(var(--float-shift, 0));
    transition: opacity 0.12s ease, transform 0.18s ease, visibility 0s linear 0.12s;
  }

  .mega-float[data-side="right"] { --float-shift: -6px; }
  .mega-float[data-side="left"]  { --float-shift: 6px; }

  .mega-float.is-visible {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition-delay: 0s;
  }

  .mega-float-frame {
    overflow: hidden;
    border-radius: calc(var(--radius-card) - 4px);
    background: rgba(var(--rgb-blue), 0.06);
  }

  .mega-float-image {
    display: block;
    width: 100%;
    height: auto;
    max-height: 320px;
    object-fit: contain;
  }

  .mega-float-text {
    display: grid;
    gap: 2px;
    padding: 8px 4px 0;
  }

  .mega-float-title {
    color: var(--color-text);
    font-size: 0.9rem;
    font-weight: 700;
    line-height: 1.2;
  }

  .mega-float-desc {
    color: var(--color-text-muted);
    font-size: 0.78rem;
    line-height: 1.3;
  }

  /* the pointer towards the hovered button */
  .mega-float::before {
    content: "";
    position: absolute;
    top: var(--float-pointer, 50%);
    width: 12px;
    height: 12px;
    margin-top: -6px;
    background: #0d1a2f;
    border: 1px solid rgba(var(--rgb-blue), 0.3);
    transform: rotate(45deg);
  }

  .mega-float[data-side="right"]::before {
    left: -7px;
    border-right: 0;
    border-top: 0;
  }

  .mega-float[data-side="left"]::before {
    right: -7px;
    border-left: 0;
    border-bottom: 0;
  }

  /* Speech-bubble tail on the bottom edge, pointing down at the side render (script.js sets
     data-pointer="down" and --float-tail). It replaces the pointer on the card's side. */
  .mega-float[data-pointer="down"]::before { display: none; }

  .mega-float[data-pointer="down"]::after {
    content: "";
    position: absolute;
    bottom: -7px;
    left: var(--float-tail, 50%);
    width: 12px;
    height: 12px;
    margin-left: -6px;
    background: #0d1a2f;
    border: 1px solid rgba(var(--float-rgb, var(--rgb-blue)), 0.34);
    border-left: 0;
    border-top: 0;
    transform: rotate(45deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .mega-float { transition: opacity 0.1s ease; transform: none; }
}

/* ==========================================================
   WORK MENU: button fill
   A coloured panel sits on the right side of each button. On hover / keyboard focus it grows
   to fill the whole button (same shape and corners as the button). script.js adds the
   .mega-deco element. Change the colour per button with --fill-rgb, and how far the panel
   reaches at rest with --fill-start.
   ========================================================== */
.mega-deco { display: none; }

@media (min-width: 861px) {
  .mega-work .mega-link {
    position: relative;
    --fill-start: 58%;
    --fill-rgb: 59, 130, 246;
  }

  .mega-work .mega-link[data-preview="all-graphics"]       { --fill-rgb: 59, 130, 246; }
  .mega-work .mega-link[data-preview="game-thumbnails"]    { --fill-rgb: 139, 92, 246; }
  .mega-work .mega-link[data-preview="youtube-thumbnails"] { --fill-rgb: 255, 30, 30; }
  .mega-work .mega-link[data-preview="profile-pictures"]   { --fill-rgb: 236, 72, 153; }

  /* keep the real content above the fill */
  .mega-work .mega-link > :not(.mega-deco) {
    position: relative;
    z-index: 1;
  }

  .mega-deco {
    display: block;
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    border-radius: 11px;
    pointer-events: none;
  }

  .mega-deco-fill {
    position: absolute;
    inset: 0;
    background-color: rgb(var(--fill-rgb));
    clip-path: polygon(calc(var(--fill-start) + 4%) 0, 100% 0, 100% 100%, var(--fill-start) 100%);
    transition: clip-path 0.34s cubic-bezier(0.22, 1, 0.36, 1);
  }

  .mega-work .mega-link:hover .mega-deco-fill,
  .mega-work .mega-link:focus-visible .mega-deco-fill {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
  }

  /* text, icon and arrow turn white once the button is filled */
  .mega-work .mega-link:hover .mega-link-title,
  .mega-work .mega-link:focus-visible .mega-link-title,
  .mega-work .mega-link:hover .mega-link-text,
  .mega-work .mega-link:focus-visible .mega-link-text,
  .mega-work .mega-link:hover .mega-link-icon,
  .mega-work .mega-link:focus-visible .mega-link-icon,
  .mega-work .mega-link:hover .mega-arrow,
  .mega-work .mega-link:focus-visible .mega-arrow {
    color: #fff;
  }

  /* YouTube logo: red with a white play button; on the red fill the colours swap */
  .mega-link-icon .yt-bg   { fill: #ff0033; transition: fill 0.2s ease; }
  .mega-link-icon .yt-play { fill: #fff;    transition: fill 0.2s ease; }

  .mega-work .mega-link:hover .yt-bg,
  .mega-work .mega-link:focus-visible .yt-bg   { fill: #fff; }
  .mega-work .mega-link:hover .yt-play,
  .mega-work .mega-link:focus-visible .yt-play { fill: #ff1e1e; }
}

@media (prefers-reduced-motion: reduce) {
  .mega-deco-fill { transition: none; }
}

/* ==========================================================
   WORK MENU: picture tiles
   Each button is a small poster. The category's own picture fills the tile (the same width as the
   picture in the hover card) and the icon, title and line sit on a soft dark fade at the bottom. Pictures
   rest slightly dimmed and come to full colour on hover, with a slow zoom, a thin light line that
   draws across the bottom and an arrow that slides in. No per-button colours: one quiet accent.
   Tweak the shape with --tile-ratio (smaller second number = shorter tile) and which part of the
   picture shows with --tile-focus. script.js adds the .mega-link-pic element with the picture.
   Kept at the very end of the file so it wins over the older rules above.
   ========================================================== */
.mega-link-pic { display: none; }

@media (min-width: 861px) {
  .mega-work .mega-link[data-preview] {
    --fill-rgb: 74, 163, 255;      /* the same for all four: the old per-button colours are retired */
    --tile-ratio: 16 / 5.6;
    --tile-focus: 50% 32%;
    position: relative;
    isolation: isolate;
    overflow: hidden;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas: none;
    align-items: center;
    align-content: end;
    align-self: start;
    aspect-ratio: var(--tile-ratio);
    height: auto;
    gap: 0 0.65rem;
    padding: 0.6rem 0.85rem 0.65rem 0.7rem;
    border: 1px solid rgba(var(--rgb-silver), 0.14);
    border-radius: 14px;
    background: #0b1426;
    box-shadow: none;
    transition: border-color 0.06s ease, transform 0.06s ease;
  }

  /* The picture and its fade */
  .mega-work .mega-link[data-preview] .mega-link-pic {
    display: block;
    position: absolute;
    inset: 0;
    z-index: 0;
    background: linear-gradient(135deg, #14253f, #0b1426);
  }

  .mega-work .mega-link[data-preview] .mega-link-pic img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: var(--tile-focus);
    filter: saturate(0.8) brightness(0.72);
    transform: scale(1.02);
    opacity: 0;
    transition: opacity 0.2s ease, filter 0.06s ease, transform 0.1s ease-out;
  }

  .mega-work .mega-link[data-preview] .mega-link-pic.is-ready img { opacity: 1; }

  /* Profile Pictures: the picture is square, so the wide tile shows a strip of it. Aim the strip at
     the face (the first number is left/right, the second is up/down: bigger = lower) */
  .mega-work .mega-link[data-preview="profile-pictures"] { --tile-focus: 50% 100%; }

  .mega-work .mega-link[data-preview] .mega-link-pic::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(6, 10, 20, 0.92) 0%, rgba(6, 10, 20, 0.55) 50%, rgba(6, 10, 20, 0.06) 100%);
  }

  /* Icon: a small glass chip to the left of the text */
  .mega-work .mega-link[data-preview] > .mega-link-icon {
    grid-area: auto;
    position: relative;
    z-index: 2;
    display: grid;
    place-items: center;
    justify-self: start;
    width: 2rem;
    height: 2rem;
    margin: 0;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 10px;
    background: rgba(6, 10, 20, 0.62);
    color: rgba(255, 255, 255, 0.92);
    opacity: 1;
    transform: none;
    transition: background-color 0.06s ease, border-color 0.06s ease;
  }

  .mega-work .mega-link[data-preview] > .mega-link-icon svg {
    width: 18px;
    height: 18px;
  }

  /* YouTube logo in one neutral tone: a light badge with a dark play button */
  .mega-work .mega-link[data-preview] .mega-link-icon .yt-bg   { fill: currentColor; }
  .mega-work .mega-link[data-preview] .mega-link-icon .yt-play { fill: #0b1426; opacity: 1; }

  /* Title and line, laid over the fade */
  .mega-work .mega-link[data-preview] > .mega-link-body {
    grid-area: auto;
    position: relative;
    z-index: 2;
    min-width: 0;
  }

  .mega-work .mega-link[data-preview] .mega-link-title {
    color: #fff;
    text-shadow: 0 1px 10px rgba(0, 0, 0, 0.5);
  }

  .mega-work .mega-link[data-preview] .mega-link-text {
    margin-top: 0.1rem;
    color: rgba(255, 255, 255, 0.72);
    font-size: 0.82rem;
  }

  /* Arrow: hidden at rest, slides in from the corner on hover */
  .mega-work .mega-link[data-preview] > .mega-arrow {
    grid-area: auto;
    position: absolute;
    top: 0.7rem;
    right: 0.75rem;
    z-index: 2;
    width: 20px;
    height: 20px;
    margin: 0;
    color: #fff;
    opacity: 0;
    filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.6));
    transform: translate(-6px, 6px) rotate(-45deg);
    transition: opacity 0.06s ease, transform 0.08s ease-out;
  }

  .mega-work .mega-link[data-preview] > .mega-arrow svg {
    width: 20px;
    height: 20px;
  }

  /* The thin light line along the bottom edge (drawn by the old fill element) */
  .mega-work .mega-link[data-preview] .mega-deco {
    display: block;
    position: absolute;
    inset: 0;
    z-index: 3;
    overflow: hidden;
    border-radius: inherit;
    pointer-events: none;
  }

  .mega-work .mega-link[data-preview] .mega-deco-fill {
    inset: auto 0 0 0;
    height: 2px;
    clip-path: none;
    background: linear-gradient(90deg, rgba(var(--rgb-blue), 0), rgba(190, 220, 255, 0.95) 50%, rgba(var(--rgb-blue), 0));
    opacity: 1;
    transform: scaleX(0);
    transition: transform 0.1s ease-out;
  }

  /* Hover / keyboard focus */
  .mega-work .mega-link[data-preview]:hover,
  .mega-work .mega-link[data-preview]:focus-visible {
    border-color: rgba(var(--rgb-blue), 0.5);
    background-color: #0b1426;
    transform: translateY(-1px);
  }

  .mega-work .mega-link[data-preview]:hover .mega-link-pic img,
  .mega-work .mega-link[data-preview]:focus-visible .mega-link-pic img {
    filter: saturate(1) brightness(0.95);
    transform: scale(1.07);
  }

  .mega-work .mega-link[data-preview]:hover > .mega-link-icon,
  .mega-work .mega-link[data-preview]:focus-visible > .mega-link-icon {
    border-color: rgba(var(--rgb-blue), 0.65);
    background: rgba(var(--rgb-blue), 0.3);
    color: #fff;
  }

  .mega-work .mega-link[data-preview]:hover .mega-link-title,
  .mega-work .mega-link[data-preview]:focus-visible .mega-link-title { color: #fff; }

  .mega-work .mega-link[data-preview]:hover .mega-link-text,
  .mega-work .mega-link[data-preview]:focus-visible .mega-link-text { color: rgba(255, 255, 255, 0.85); }

  .mega-work .mega-link[data-preview]:hover > .mega-arrow,
  .mega-work .mega-link[data-preview]:focus-visible > .mega-arrow {
    color: #fff;
    opacity: 1;
    transform: translate(0, 0) rotate(-45deg);
  }

  .mega-work .mega-link[data-preview]:hover .mega-deco-fill,
  .mega-work .mega-link[data-preview]:focus-visible .mega-deco-fill { transform: scaleX(1); }

  .mega-work .mega-link[data-preview]:focus-visible {
    outline: 2px solid var(--color-accent-bright);
    outline-offset: 2px;
  }

  /* Small tag next to a title ("New", "Most ordered"): set badge in MEGA_MENU_DATA */
  .mega-link-badge {
    display: inline-block;
    margin-left: 0.4rem;
    padding: 0.05rem 0.38rem;
    border: 1px solid rgba(255, 255, 255, 0.28);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.14);
    color: #fff;
    font-size: 0.56rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    line-height: 1.5;
    text-transform: uppercase;
    vertical-align: 2px;
    white-space: nowrap;
  }
}

/* On short screens the tiles are a little shorter */
@media (min-width: 861px) and (max-height: 780px) {
  .mega-work .mega-link[data-preview] { --tile-ratio: 16 / 5; }
}


/* ==========================================================
   WORK MENU: preview card, banner, footer, entrance
   Kept at the very end of the file so it wins over the older rules above.
   ========================================================== */
@media (min-width: 861px) {

  /* ----- Preview card: wears the tone of the hovered ticket, crossfades between pictures.
     The frame takes the exact shape of each picture (script.js sets its aspect-ratio). ----- */
  .mega-float {
    --float-rgb: 74, 163, 255;
    border-color: rgba(var(--float-rgb), 0.34);
    box-shadow:
      0 24px 48px -20px rgba(0, 0, 0, 0.9),
      0 0 44px -16px rgba(var(--float-rgb), 0.45);
    transition: opacity 0.08s ease, transform 0.1s ease, visibility 0s linear 0.08s;
  }

  .mega-float::before {
    border-color: rgba(var(--float-rgb), 0.34);
    transition: top 0.08s ease-out;
  }

  /* The frame never changes: it always has the shape of a 16:9 thumbnail and the same width.
     Thumbnails fill it exactly. Square pictures (icons) are fitted to that same width, so they are
     trimmed at the top and bottom (--mega-float-focus picks which part stays: 50% 35% = a little above
     the middle). To show a whole icon instead, set --mega-float-fit to contain: it is then centred
     with a dark blurred copy of itself on both sides.
     The card width is the 280px in the "floating preview card" section above. */
  .mega-float-frame {
    --mega-float-fit: cover;
    --mega-float-focus: 50% 35%;
    position: relative;
    aspect-ratio: 16 / 9;
    background: rgba(var(--float-rgb), 0.06);
  }

  .mega-float-layer {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 0.1s ease;
  }

  .mega-float-layer.is-front { opacity: 1; }

  .mega-float-layer::before {
    content: "";
    position: absolute;
    inset: -24px;
    background: var(--bg) center / cover no-repeat;
    filter: blur(18px) brightness(0.5) saturate(1.2);
  }

  /* ----- Picture pair: two pictures overlap like cards, one top left (behind) and one bottom right
     (in front). They are listed as "images" in MEGA_MENU_DATA in script.js; one picture only = one
     big picture.
     --mega-pair-w   width of each picture as a share of the frame (bigger = more overlap) ----- */
  .mega-float-frame { --mega-pair-w: 70%; }

  .mega-float-track {
    position: absolute;
    inset: 0;
  }

  .mega-float-tile {
    position: absolute;
    width: var(--mega-pair-w);
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    box-shadow: 0 10px 22px -8px rgba(0, 0, 0, 0.85);
    transition: transform 0.18s ease;
  }

  .mega-float-tile:nth-child(1) { top: 8px; left: 8px; z-index: 1; transform: translate(-6px, -4px); }
  .mega-float-tile:nth-child(2) { right: 8px; bottom: 8px; z-index: 2; transform: translate(6px, 4px); }

  /* the pair slides together when its layer comes forward */
  .mega-float-layer.is-front .mega-float-tile { transform: none; }

  .mega-float-track.is-single .mega-float-tile {
    inset: 0;
    width: 100%;
    aspect-ratio: auto;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    transform: none;
  }

  /* Square pictures (shape: "square" in MEGA_MENU_DATA): the pair is made of squares, so a whole
     avatar shows instead of a wide strip of it. --mega-square-size is the side of each square. */
  .mega-float-frame { --mega-square-size: 136px; }

  .mega-float-track[data-shape="square"] .mega-float-tile {
    width: var(--mega-square-size);
    aspect-ratio: 1 / 1;
  }

  .mega-float-track[data-shape="square"] .mega-float-tile:nth-child(1) { top: 8px; }
  .mega-float-track[data-shape="square"] .mega-float-tile:nth-child(2) { bottom: 8px; }

  /* One square picture inside a pair of wide ones ("shapes" in MEGA_MENU_DATA, e.g. All Graphics):
     only that tile is a 1:1 square, the other one keeps the thumbnail shape. */
  .mega-float-track:not([data-shape="square"]) .mega-float-tile[data-shape="square"] {
    width: var(--mega-square-size);
    aspect-ratio: 1 / 1;
  }

  /* one square picture: centred, whole */
  .mega-float-track.is-single[data-shape="square"] .mega-float-tile {
    inset: 8px auto auto 50%;
    width: calc(100% - 16px);
    max-width: 141px;
    height: auto;
    margin-left: -70.5px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    aspect-ratio: 1 / 1;
    box-shadow: 0 10px 22px -8px rgba(0, 0, 0, 0.85);
  }

  .mega-float-image {
    display: block;
    width: 100%;
    height: 100%;
    max-height: none;
    object-fit: var(--mega-float-fit);
    object-position: var(--mega-float-focus);
  }

  @media (prefers-reduced-motion: reduce) {
    .mega-float-tile { transition: none; }
  }

  .mega-float-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5rem;
  }

  .mega-float-price {
    color: color-mix(in srgb, rgb(var(--float-rgb)) 72%, #fff);
    font-size: 0.78rem;
    font-weight: 700;
    white-space: nowrap;
  }

  .mega-float-hint {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    margin-top: 4px;
    color: color-mix(in srgb, rgb(var(--float-rgb)) 72%, #fff);
    font-size: 0.74rem;
    font-weight: 600;
  }

  /* ----- Banner: shorter, with a sale button on it -----
     --mega-banner-ratio is the shape. 16 / 5 is the full original artwork; the smaller the
     second number, the shorter the banner (the artwork is trimmed top and bottom). */
  .mega-work .mega-banner {
    --mega-banner-ratio: 16 / 4.2;
    aspect-ratio: var(--mega-banner-ratio);
  }

  .mega-banner-cta {
    --cta-rgb: 255, 255, 255;
    position: absolute;
    right: 0.6rem;
    bottom: 0.6rem;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.38rem 0.8rem;
    border: 1px solid rgba(var(--cta-rgb), 0.5);
    border-radius: 999px;
    background: rgba(6, 10, 20, 0.76);
    color: #fff;
    font-size: 0.8rem;
    font-weight: 700;
    line-height: 1.2;
    text-decoration: none;
    transition: background-color 0.06s ease, border-color 0.06s ease;
  }

  html[data-season="halloween"] .mega-banner-cta { --cta-rgb: 255, 138, 61; }
  html[data-season="christmas"] .mega-banner-cta { --cta-rgb: 255, 99, 99; }
  html[data-season="summer"]    .mega-banner-cta { --cta-rgb: 255, 196, 61; }

  a.mega-banner-cta:hover,
  a.mega-banner-cta:focus-visible {
    border-color: rgba(var(--cta-rgb), 0.85);
    background: rgba(var(--cta-rgb), 0.22);
  }

  a.mega-banner-cta:focus-visible {
    outline: 2px solid rgba(var(--cta-rgb), 0.9);
    outline-offset: 2px;
  }

  /* ----- "View all work": the same champagne gold as the featured ticket ----- */
  .mega-work .mega-all {
    transition: background-color 0.06s ease, border-color 0.06s ease, color 0.06s ease;
    border-color: rgba(226, 187, 104, 0.36);
    background-color: rgba(226, 187, 104, 0.1);
    color: #f0d9a2;
  }

  .mega-work .mega-all:hover,
  .mega-work .mega-all:focus-visible {
    border-color: rgba(226, 187, 104, 0.58);
    background-color: rgba(226, 187, 104, 0.18);
    color: #f8e7bd;
  }

  .mega-work .mega-all:focus-visible { outline-color: #f0d9a2; }
}


/* ==========================================================
   WORK MENU: bottom strip (replaces "View all work")
   A status dot + short text on the left, the "Commission Me" button on the right.
   The button is a .mega-all link, so it keeps that button's look. The status and the wording are
   set in MEGA_STRIP in script.js. data-status is open, limited or closed.
   ========================================================== */
.mega-strip-status {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.15rem 0.5rem;
  min-width: 0;
  margin: 0;
  color: var(--color-text-muted);
  font-size: 0.86rem;
  line-height: 1.3;
}

.mega-strip-dot {
  position: relative;
  flex: none;
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 50%;
  background-color: var(--color-accent);
  box-shadow: 0 0 8px var(--color-accent-glow);
}

/* a soft ring that grows and fades around the dot (transform + opacity only) */
.mega-strip-dot::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1px solid var(--color-accent);
  opacity: 0;
  animation: mega-strip-ring 2.6s ease-out infinite;
}

.mega-strip[data-status="limited"] .mega-strip-dot {
  background-color: var(--color-orange);
  box-shadow: none;
}

.mega-strip[data-status="limited"] .mega-strip-dot::after { border-color: var(--color-orange); }

.mega-strip[data-status="closed"] .mega-strip-dot {
  background-color: var(--color-text-muted);
  box-shadow: none;
}

.mega-strip[data-status="closed"] .mega-strip-dot::after { animation: none; }

.mega-strip-text {
  color: var(--color-text);
  font-weight: 700;
}

.mega-strip-sep { opacity: 0.45; }

.mega-strip-sep[hidden],
.mega-strip-meta[hidden] { display: none; }

@keyframes mega-strip-ring {
  0%   { opacity: 0.7; transform: scale(1); }
  70%, 100% { opacity: 0; transform: scale(2.6); }
}

@media (prefers-reduced-motion: reduce) {
  .mega-strip-dot::after { animation: none; }
}

/* ==========================================================
   WORK MENU: side render
   A transparent render that peeks out from behind the right edge of the menu (script.js adds
   the .mega-side-render element and sets its size from MEGA_SIDE_RENDER at the top of script.js).
   It sits behind the panel, so only the part beyond the right edge shows, and it slides out
   when the menu opens. Desktop only.
   ========================================================== */
.mega-side-render { display: none; }

@media (min-width: 861px) {
  .mega-work { isolation: isolate; }

  .mega-side-render {
    display: block;
    position: absolute;
    left: 100%;
    bottom: var(--side-bottom, 22px);
    z-index: -1;
    width: var(--side-w, 250px);
    height: var(--side-h, 250px);
    margin-left: calc(var(--side-tuck, 70px) * -1 - 3px);   /* the extra 3px keeps the flat edge hidden under the panel border */
    pointer-events: none;
    user-select: none;
    opacity: 0;
    transform: translateX(calc(var(--side-tuck, 70px) * -0.4));
    transition: opacity 0.14s ease, transform 0.34s cubic-bezier(0.22, 1, 0.36, 1);
    filter: drop-shadow(0 14px 20px rgba(0, 0, 0, 0.45));
  }

  .mega-side-render img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
  }

  .mega.is-open .mega-side-render.is-ready.has-room {
    opacity: 1;
    transform: none;
  }

  /* Idle motion: a very slow bob, only while the menu is open */
  .mega.is-open .mega-side-render.is-ready.has-room img {
    animation: mega-side-bob 6.5s ease-in-out infinite;
  }

  @keyframes mega-side-bob {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(calc(var(--side-bob, 3px) * -1)); }
  }
}

@media (prefers-reduced-motion: reduce) {
  .mega-side-render { transition: none; }
  .mega.is-open .mega-side-render.is-ready.has-room img { animation: none; }
}


/* ==========================================================
   WORK MENU: "Commission Me" BUTTON HOVER ("Circle Fill")
   Its own animation, different from the hero buttons (star burst / rolling text):
   on hover an orange circle grows out of the arrow and floods the whole button, the
   label turns dark and the arrow slides a little to the right. No JS and no extra
   markup: it only styles the existing .mega-strip-button link (the circle is its
   ::before). Change the circle's start point with left/top of ::before.
   ========================================================== */
.mega-work .mega-strip-button {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  transition: color 0.2s ease 0.12s, border-color 0.3s ease, box-shadow 0.35s ease;
}

/* the circle: a small orange dot that sits behind the arrow, ready to grow */
.mega-work .mega-strip-button::before {
  content: "";
  position: absolute;
  right: 0.55rem;
  top: 50%;
  width: 1.6rem;
  height: 1.6rem;
  margin-top: -0.8rem;
  z-index: -1;
  border-radius: 50%;
  background: var(--color-orange);
  transform: scale(0);
  transition: transform 0.55s cubic-bezier(0.22, 0.9, 0.3, 1);
  pointer-events: none;
}

.mega-work .mega-strip-button:hover,
.mega-work .mega-strip-button:focus-visible {
  border-color: var(--color-orange);
  color: var(--color-orange-ink);
  box-shadow: 0 0 18px rgba(var(--rgb-orange), 0.3);
}

.mega-work .mega-strip-button:hover::before,
.mega-work .mega-strip-button:focus-visible::before {
  transform: scale(22);
}

.mega-work .mega-strip-button:focus-visible {
  outline-color: var(--color-orange-bright);
}

.mega-work .mega-strip-button .mega-arrow {
  transition: transform 0.35s cubic-bezier(0.22, 0.9, 0.3, 1);
}

.mega-work .mega-strip-button:hover .mega-arrow,
.mega-work .mega-strip-button:focus-visible .mega-arrow {
  color: inherit;
  opacity: 1;
  transform: translateX(3px);
}

@media (prefers-reduced-motion: reduce) {
  .mega-work .mega-strip-button::before,
  .mega-work .mega-strip-button .mega-arrow { transition: none; }
}


/* ==========================================================
   WORK MENU: banner sale button hover ("Claim 20% off")
   A light streak sweeps across the pill, the pill fills with its sale colour and glows a little
   (--cta-rgb: white normally, orange / red / yellow in the seasons), the arrow slides forward and
   the button grows slightly. Pure CSS; the streak is a background layer, so nothing is clipped.
   ========================================================== */
@media (min-width: 861px) {
  a.mega-banner-cta {
    background-image: linear-gradient(110deg, transparent 38%, rgba(255, 255, 255, 0.45) 50%, transparent 62%);
    background-size: 260% 100%;
    background-position: 140% 0;
    background-repeat: no-repeat;
    transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.25s ease, transform 0.2s ease;
  }

  a.mega-banner-cta svg {
    transition: transform 0.25s cubic-bezier(0.22, 0.9, 0.3, 1);
  }

  a.mega-banner-cta:hover,
  a.mega-banner-cta:focus-visible {
    background-color: rgba(var(--cta-rgb), 0.3);
    background-image: linear-gradient(110deg, transparent 38%, rgba(255, 255, 255, 0.45) 50%, transparent 62%);
    box-shadow: 0 0 18px rgba(var(--cta-rgb), 0.45);
    transform: scale(1.05);
    animation: mega-claim-shine 0.8s ease-out 1;
  }

  a.mega-banner-cta:hover svg,
  a.mega-banner-cta:focus-visible svg {
    transform: translateX(4px);
  }

  @keyframes mega-claim-shine {
    from { background-position: 140% 0; }
    to   { background-position: -40% 0; }
  }

  @media (prefers-reduced-motion: reduce) {
    a.mega-banner-cta,
    a.mega-banner-cta svg { transition: none; }
    a.mega-banner-cta:hover,
    a.mega-banner-cta:focus-visible { animation: none; transform: none; }
    a.mega-banner-cta:hover svg,
    a.mega-banner-cta:focus-visible svg { transform: none; }
  }
}


/* ==========================================================
   WORK MENU: square picture pair in the preview card (Profile Pictures)
   Two smaller squares sit side by side like two photos laid on the table: slightly turned in
   opposite directions, staggered (one high, one low), with a tiny overlap in the middle and
   room around them. --mega-square-size is the side of each square. Desktop only.
   ========================================================== */
@media (min-width: 861px) {
  .mega-float-frame { --mega-square-size: 112px; }

  .mega-float-track[data-shape="square"] .mega-float-tile {
    border-radius: 12px;
    border-color: rgba(255, 255, 255, 0.28);
    box-shadow: 0 12px 24px -8px rgba(0, 0, 0, 0.9);
  }

  .mega-float-track[data-shape="square"] .mega-float-tile:nth-child(1) {
    top: 12px;
    left: 20px;
    right: auto;
    bottom: auto;
    rotate: -5deg;
  }

  .mega-float-track[data-shape="square"] .mega-float-tile:nth-child(2) {
    top: auto;
    bottom: 12px;
    right: 20px;
    left: auto;
    rotate: 4deg;
  }

  /* a square picture inside a wide pair (All Graphics) keeps its place, only the size follows */
  .mega-float-track:not([data-shape="square"]) .mega-float-tile[data-shape="square"] {
    border-radius: 10px;
  }

  /* a single square (the other picture is missing): centred and whole, no turn */
  .mega-float-track.is-single[data-shape="square"] .mega-float-tile { rotate: none; }
}


/* ==========================================================
   WORK MENU: opening animation of the pictures in the preview card
   It used to be a transition that script.js set off by adding .is-front to a layer in the same
   moment the pictures were created. When a picture came from the cache the browser never saw the
   "before" state, so the slide-in was skipped most of the time (and a card that opened again on the
   same link had nothing to play at all). Now it is a keyframe animation: it starts by itself every
   time the card becomes visible and every time another link's pictures come to the front.
   The back picture comes in from the top left, the front one from the bottom right, a moment later.
   ========================================================== */
@media (min-width: 861px) {
  /* the old offsets and transition are replaced by the animation below */
  .mega-float .mega-float-layer .mega-float-tile {
    transform: none;
    transition: none;
  }

  .mega-float.is-visible .mega-float-layer.is-front .mega-float-tile:nth-child(1) {
    animation: mega-tile-in-a 0.42s cubic-bezier(0.22, 0.9, 0.3, 1) both;
  }

  .mega-float.is-visible .mega-float-layer.is-front .mega-float-tile:nth-child(2) {
    animation: mega-tile-in-b 0.42s cubic-bezier(0.22, 0.9, 0.3, 1) 0.07s both;
  }

  @keyframes mega-tile-in-a {
    from { opacity: 0; transform: translate(-14px, -8px) scale(0.94); }
    to   { opacity: 1; transform: none; }
  }

  @keyframes mega-tile-in-b {
    from { opacity: 0; transform: translate(14px, 8px) scale(0.94); }
    to   { opacity: 1; transform: none; }
  }

  @media (prefers-reduced-motion: reduce) {
    .mega-float.is-visible .mega-float-layer.is-front .mega-float-tile:nth-child(1),
    .mega-float.is-visible .mega-float-layer.is-front .mega-float-tile:nth-child(2) {
      animation: none;
    }
  }
}


/* ==========================================================
   HERO: centred text block, calmer paragraph, clearer slideshow bars
   1) Desktop: everything in the text block is centred (headline, paragraph, buttons, rating pill,
      social icons), the same as on phones. The middle headline line loses its indent for that.
   2) The paragraph is a little narrower and wraps in balanced lines (no lonely word at the end of a
      line), and the dark scrim on the left reaches further in so the text stays clear of the busy
      part of the artwork.
   3) The slideshow bars at the bottom: thicker, in a small dark pill so they read against any
      artwork, the filling bar is orange, and each bar is a bigger tap target.
   ========================================================== */
.hero-text {
  text-wrap: balance;
}

@media (min-width: 960px) {
  .hero > .hero-inner .hero-content {
    text-align: center;
  }

  .hero-line-indent {
    padding-left: 0;
  }

  .hero-text {
    max-width: 27rem;
    margin-left: auto;
    margin-right: auto;
  }

  /* the scrim stays darker for longer, so the centred text keeps its calm background */
  .hero .hero-art-main::before {
    background:
      linear-gradient(180deg, rgba(6, 10, 20, 0.7), transparent 22%),
      radial-gradient(ellipse 55% 80% at 82% 45%, rgba(var(--rgb-blue), 0.14), transparent 70%),
      linear-gradient(90deg, rgba(6, 10, 20, 0.97) 0%, rgba(6, 10, 20, 0.9) 28%, rgba(6, 10, 20, 0.62) 46%, rgba(6, 10, 20, 0.22) 63%, transparent 84%);
  }
}

.hero-dots {
  bottom: 1.3rem;
  gap: 0;
  padding: 0 0.35rem;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 999px;
  background-color: rgba(6, 10, 20, 0.55);
}

.hero-dot {
  width: 2.6rem;
  height: 2rem;
}

.hero-dot::before,
.hero-dot::after {
  left: 0.25rem;
  right: 0.25rem;
  height: 5px;
  margin-top: -2.5px;
}

.hero-dot::before {
  background-color: rgba(255, 255, 255, 0.38);
}

.hero-dot:hover::before,
.hero-dot.is-current::before {
  background-color: rgba(255, 255, 255, 0.62);
}

.hero-dot::after {
  background-color: var(--color-orange);
  opacity: 1;
}

@media (max-width: 720px) {
  .hero-dots {
    bottom: 0.6rem;
  }

  .hero-dot {
    width: 2.1rem;
    height: 2.4rem;
  }
}

/* ==========================================================
   HERO -> FEATURED WORK: SCROLL-LINKED TRANSITION
   As you scroll down, the hero artwork drifts slower than the page and
   fades into the grid, the headline block lifts away a little faster, and
   the "Featured Work" heading and intro text rise in with slightly different
   timing. Pure CSS (no JavaScript): the animations are driven by scroll
   position instead of time.

   Only runs when the browser supports scroll-driven animations and the
   visitor has not asked for reduced motion. Everywhere else the page simply
   behaves as before.

   DIALS: the three numbers marked "dial" below.
   ========================================================== */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {

    /* The hero is the "stage": its scroll progress drives the pieces inside it */
    .hero {
      view-timeline: --hero block;
    }

    @keyframes hero-art-away {
      to {
        opacity: 0.12;               /* dial: how far the art fades (0 = fully gone) */
        transform: translateY(18%);  /* dial: how much slower it moves than the page */
      }
    }

    @keyframes hero-text-away {
      to {
        opacity: 0;
        transform: translateY(-48px); /* dial: extra lift of the headline block */
      }
    }

    .hero > .hero-visual {
      animation: hero-art-away linear both;
      animation-timeline: --hero;
      animation-range: exit 0% exit 100%;
    }

    .hero > .hero-inner {
      animation: hero-text-away linear both;
      animation-timeline: --hero;
      animation-range: exit 0% exit 55%;
    }

    /* "Featured Work" heading and intro: rise into place while entering.
       Applied to the children, so the existing .reveal fade on .work-head
       keeps working untouched. */
    @keyframes work-rise {
      from { opacity: 0; transform: translateY(var(--rise, 56px)); }
      to   { opacity: 1; transform: none; }
    }

    .work-head .section-title,
    .work-head .work-lead {
      animation: work-rise linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 80%;
    }

    .work-head .section-title { --rise: 64px; }
    .work-head .work-lead     { --rise: 32px; animation-range: entry 10% entry 90%; }

    /* The hairline at the bottom of the hero glows as you arrive at the next section */
    @keyframes hero-line-glow {
      from { opacity: 0.5; }
      to   { opacity: 1; }
    }

    .hero::after {
      animation: hero-line-glow linear both;
      animation-timeline: --hero;
      animation-range: exit 40% exit 100%;
    }
  }
}


/* ==========================================================
   HERO ARTWORK: SOFT FADE INTO THE PAGE (desktop)
   The bottom of the artwork dissolves, so the blueprint grid shows through
   and the hero has no hard edge. Phones (720px and below) already have
   their own fade further up in this file.

   DIAL: --hero-fade-start is where the fade begins, measured from the top
   of the hero. Lower = longer, softer fade (try 50%); higher = shorter
   (try 80%); 100% = no fade.
   ========================================================== */
@media (min-width: 721px) {
  .hero {
    --hero-fade-start: 62%;
  }

  .hero > .hero-visual {
    -webkit-mask-image: linear-gradient(to bottom, #000 var(--hero-fade-start), transparent 100%);
            mask-image: linear-gradient(to bottom, #000 var(--hero-fade-start), transparent 100%);
  }
}


/* ==========================================================
   FEATURED WORK OVERLAPS THE HERO
   The "Featured Work" section is pulled up over the bottom of the hero, so
   its heading sits on the fading artwork and the two sections read as one
   continuous scene. The hero gets the same amount of extra bottom padding,
   and the slideshow bars move up with it, so nothing inside the hero ends
   up underneath the heading.

   DIAL: --hero-overlap is how far the section reaches up into the hero.
   0 = no overlap (back to normal). Try 3rem for subtle, 7rem for dramatic.
   ========================================================== */
:root {
  --hero-overlap: 4.5rem;   /* on :root so the section after the hero can read it too */
}

.hero {
  padding-bottom: calc(var(--space-5) + var(--hero-overlap));
}

.hero + .work {
  margin-top: calc(var(--hero-overlap) * -1);
  z-index: 1;
}

/* The hairline would cut straight through the heading now; the fade does its job */
.hero::after {
  display: none;
}

/* Slideshow bars: low in the hero (just above the next section) and quiet.
   They come back to a clearer look when you point at them or tab to them. */
.hero-dots {
  bottom: 2.2rem;
  opacity: 0.45;
  transition: opacity 0.3s ease;
}

.hero-dots:hover,
.hero-dots:focus-within {
  opacity: 0.9;
}

@media (max-width: 720px) {
  :root {
    --hero-overlap: 2.5rem;
  }

  .hero-dots {
    bottom: 1.8rem;
  }
}


/* ==========================================================
   FEATURED WORK: SIDEWAYS GALLERY (desktop), STEP 1
   The section becomes a tall "scene". Inside it, the heading, the row of
   work and the View All button are pinned to the screen, and scrolling down
   slides the heading and the row to the left. When the last piece has arrived, the page
   carries on to the next section. The pieces are the same ones script.js
   already builds from WORK_ITEMS, so nothing about the images changes.

   Only for wide, tall-enough screens that support scroll-driven animations
   and have reduced motion off. Phones, tablets and everything else keep the
   normal grid.

   script.js measures how far the row has to travel and sets --work-travel
   on the section (in px). The scene is exactly that much taller than the
   screen, so one pixel of scrolling moves the row one pixel.

   DIAL: --work-card-h is the height of the artwork. It fills the screen
   height minus the heading and button, between 8rem and 20rem (raise the 31rem for smaller, lower it for bigger).
   ========================================================== */
@media (prefers-reduced-motion: no-preference) and (min-width: 960px) and (min-height: 600px) {
  @supports (animation-timeline: view()) {
    .work {
      --work-card-h: clamp(8rem, calc(100svh - 31rem), 20rem);
      height: calc(100svh + var(--work-travel, 150vh));
      padding: 0;
      view-timeline: --work block;
    }

    /* The pinned screen: full width, so the row can slide in from the right edge */
    /* Directly under the hero: script.js measures how much empty space the
       centred content leaves above itself (--work-lift) and the section is
       pulled up by exactly that much, so the heading starts right under the
       hero while the pinned screen is still centred. The empty top of the
       screen lets clicks through to the hero. */
    .hero + .work {
      margin-top: calc((var(--hero-overlap) + var(--work-lift, 0px)) * -1);
    }

    .work {
      margin-bottom: calc(var(--work-lift, 0px) * -1);
    }

    .work > .container {
      pointer-events: none;
      position: sticky;
      top: 0;
      display: flex;
      flex-direction: column;
      justify-content: center;
      height: 100svh;
      max-width: none;
      margin: 0;
      padding: calc(var(--header-height) + var(--space-2)) max(var(--container-padding), calc((100% - var(--container-width)) / 2 + var(--container-padding))) var(--space-3);
      overflow: clip;
      /* the soft blue glow that used to sit on the section itself */
      background: radial-gradient(ellipse 50% 45% at 85% 20%, rgba(45, 110, 230, 0.09), transparent 70%);
    }

    .work::before {
      display: none;
    }

    /* The track: the heading first, then the pieces, all in one line. This is
       what slides, so the heading travels off to the left with the rest. */
    .work-track,
    .work-footer {
      pointer-events: auto;
    }

    .work-track {
      display: flex;
      flex: none;
      align-items: flex-start;
      gap: var(--space-3);
      width: max-content;
      animation: work-slide linear both;
      animation-timeline: --work;
      animation-range: contain 0% contain 100%;
    }

    /* The grid steps aside: its pieces become part of the track */
    .work-grid.portfolio-grid {
      display: contents;
    }

    .work-head {
      flex: none;
      flex-direction: column;
      align-items: flex-start;
      justify-content: center;
      align-self: center;
      gap: var(--space-2);
      width: min(24rem, 34vw);
      margin: 0 var(--space-3) 0 0;
    }

    .work-head .section-title {
      font-size: clamp(2.8rem, 5.2vw, 4.8rem);
      animation: none;
    }

    .work-head .work-lead {
      margin-left: 0;
      animation: none;
    }

    .work-grid.portfolio-grid[data-layout] .portfolio-item {
      flex: none;
      width: calc(var(--work-card-h) * 16 / 9);
    }

    .work-grid.portfolio-grid[data-layout] .portfolio-item[data-shape="square"] {
      width: var(--work-card-h);
    }

    .work-grid.portfolio-grid[data-layout] .portfolio-item[data-shape="square"] .portfolio-art {
      flex: 0 0 auto;
    }

    .work-footer {
      margin-top: var(--space-3);
    }

    @keyframes work-slide {
      from { transform: translateX(0); }
      to   { transform: translateX(calc(var(--work-travel, 0px) * -1)); }
    }
  }
}


/* ==========================================================
   BEFORE / AFTER (homepage)
   The scroll-driven reveal is gone: the slider is a normal section again and
   is dragged by hand (script.js wires the handle). Only the registered
   property stays, because the slider itself uses --pos.
   ========================================================== */
@property --pos { syntax: "<percentage>"; inherits: true; initial-value: 50%; }


/* ==========================================================
   FEATURED WORK GALLERY: DEPTH AND PARALLAX (desktop)
   Builds on the sideways gallery above. script.js reads where every card is
   on the screen and hands each one two numbers:
     --focus  1 in the middle of the screen, 0 at the edges
     --px     how far the picture sits inside its frame (px)
   - Depth: the piece in the middle is full size and bright; pieces towards
     the edges are slightly smaller and dimmer.
   - Parallax: the picture is a little larger than its frame and drifts
     against the slide, so it moves slower than the frame (a window onto
     the artwork).

   Same conditions as the gallery. Everywhere else nothing here applies.

   DIALS (on .work below):
     --work-edge-scale   size of a card at the screen edge (1 = no change)
     --work-edge-dim     brightness at the screen edge (1 = no dimming)
     --work-zoom         how much larger the picture is than its frame
   ========================================================== */
@media (prefers-reduced-motion: no-preference) and (min-width: 960px) and (min-height: 600px) {
  @supports (animation-timeline: view()) {
    .work {
      --work-edge-scale: 0.88;   /* dial */
      --work-edge-dim: 0.5;      /* dial */
      --work-zoom: 1.12;         /* dial: keep it at 1.1 or more, the drift needs the spare picture */
    }

    /* Depth */
    .work-grid.portfolio-grid[data-layout] .portfolio-item {
      scale: calc(var(--work-edge-scale) + (1 - var(--work-edge-scale)) * var(--focus, 1));
      transform-origin: 50% 50%;
      will-change: scale;
    }

    .work-grid.portfolio-grid[data-layout] .portfolio-item .portfolio-art,
    .work-grid.portfolio-grid[data-layout] .portfolio-item .portfolio-caption {
      opacity: calc(var(--work-edge-dim) + (1 - var(--work-edge-dim)) * var(--focus, 1));
    }

    /* Parallax: translate = the drift, scale = the spare picture around it */
    .work-grid.portfolio-grid[data-layout] .portfolio-item:not([data-fit="contain"]) .work-image {
      transform: translate3d(calc(var(--px, 0) * 1px), 0, 0);
      scale: var(--work-zoom);
      transition: opacity 0.6s ease, scale 0.6s ease;
    }

    .work-grid.portfolio-grid[data-layout] .portfolio-item:not([data-fit="contain"]):hover .work-image {
      scale: calc(var(--work-zoom) + 0.04);
    }
  }
}


/* ==========================================================
   FEATURED REVIEWS: links stay clickable
   Anything in the reviews section other than the carousel (the "View all
   reviews" link included) is lifted above the carousel, so the carousel's
   wide, scrolling track can never sit on top of it and catch the click.
   ========================================================== */
.reviews > .container > :not(.review-carousel) {
  position: relative;
  z-index: 2;
}

.reviews > .container > :not(.review-carousel) a,
.reviews > .container > :not(.review-carousel) button {
  position: relative;
  z-index: 2;
  pointer-events: auto;
}


/* ==========================================================
   MEGA MENU: LESS WORK FOR THE BROWSER (no visual change)
   - The panels get their own layer, so opening them is a cheap fade.
   - The looping decorations (bat, ghost, status ring ...) stand still while
     their menu is closed, instead of running unseen all the time. They
     start moving again as soon as it opens.
   ========================================================== */
.mega {
  will-change: opacity, transform;
}

.mega:not(.is-open) :is(*, *::before, *::after) {
  animation-play-state: paused;
}