.nav-links a.active {
  color: var(--text);
}
.nav-links a.active::after {
  width: 100%;
}

    /* ── Reset & Base ─────────────────────────────── */
    *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

    :root {
      /* Brand Palette — see claude.md */
      --color-off-white:  #EFEEED;
      --color-soft-blush: #EFE2DE;
      --color-warm-taupe: #BBABA2;
      --color-deep-stone: #7A766F;
      --color-sage-grey:  #B9BCB1;

      /* Aliases mapped to brand palette */
      --lavender:    #EFE2DE;
      --mint:        #B9BCB1;
      --blush:       #EFE2DE;
      --peach:       #EFE2DE;
      --cream:       #EFEEED;
      --cream-dark:  #EFE2DE;
      --text:        #7A766F;
      --text-light:  #BBABA2;
      --white:       #FFFFFF;
      --shadow:      0 4px 20px rgba(122, 118, 111, .12);
      --radius:      16px;
    }

    html { scroll-behavior: smooth; }

    body {
      font-family: 'Geist', system-ui, -apple-system, sans-serif;
      color: var(--text);
      background: var(--cream);
      line-height: 1.6;
      -webkit-font-smoothing: antialiased;
      letter-spacing: -0.005em;
    }

    h1, h2, h3, h4 {
      font-family: 'Outfit', 'Geist', system-ui, sans-serif;
      letter-spacing: -0.02em;
    }

    img { max-width: 100%; display: block; }

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

    .container {
      width: 90%;
      max-width: 1140px;
      margin: 0 auto;
    }

    section { padding: 80px 0; position: relative; z-index: 4; }

    .section-title {
      text-align: center;
      font-size: 2rem;
      margin-bottom: .5rem;
      color: var(--text);
    }

    .section-subtitle {
      text-align: center;
      color: var(--text-light);
      font-size: 1.05rem;
      margin-bottom: 48px;
    }

    /* ── Navigation ───────────────────────────────── */
    nav {
      position: sticky;
      top: 0;
      z-index: 100;
      background: rgba(239, 238, 237, .72);
      backdrop-filter: blur(16px) saturate(140%);
      -webkit-backdrop-filter: blur(16px) saturate(140%);
      border-bottom: 1px solid rgba(187, 171, 162, .25);
      box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .35),
        0 1px 0 rgba(122, 118, 111, .04);
      padding: 0 16px;
    }

    nav .container {
      display: flex;
      align-items: center;
      justify-content: space-between;
      height: 64px;
    }

    .nav-logo {
      display: inline-flex;
      align-items: center;
      height: 100%;
    }

    .nav-logo-img {
      display: block;
      height: 36px;
      width: auto;
      /* The PNG ships near-white; this filter lands it on deep-stone for the light nav */
      filter: brightness(0) saturate(100%) invert(48%) sepia(8%) saturate(380%) hue-rotate(345deg) brightness(95%) contrast(85%);
      transition: opacity .25s ease, transform .35s cubic-bezier(.16, 1, .3, 1);
    }

    .nav-logo:hover .nav-logo-img {
      opacity: .75;
      transform: translateY(-1px);
    }

    @media (max-width: 480px) {
      .nav-logo-img { height: 30px; }
    }

    .nav-links { display: flex; gap: 28px; list-style: none; }

    .nav-links a {
      font-size: .9rem;
      font-weight: 500;
      color: var(--text-light);
      transition: color .2s;
    }

    .nav-links a:hover { color: var(--text); }

    .nav-toggle {
      display: none;
      flex-direction: column;
      gap: 5px;
      background: none;
      border: none;
      cursor: pointer;
      padding: 4px;
    }

    .nav-toggle span {
      display: block;
      width: 24px;
      height: 2px;
      background: var(--text);
      border-radius: 2px;
      transition: .3s;
    }

    /* ── Hero ─────────────────────────────────────── */
    .hero {
      background: linear-gradient(135deg, rgba(239,226,222,.3) 0%, rgba(187,171,162,.18) 50%, rgba(185,188,177,.25) 100%);
      text-align: center;
      padding: 80px 0 100px;
      min-height: calc(100vh - 64px);
      min-height: calc(100dvh - 64px);
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
      z-index: 1;
      overflow: hidden;
      background-size: 200% 200%;
      animation: gradientShift 10s ease infinite;
    }

    /* Parallax background image (JS-driven, works on all devices) */
    .hero::before {
      content: '';
      position: absolute;
      top: -10%;
      left: 0;
      width: 100%;
      height: 130%;
      background: url('backgrounds/hands-color-light.jpg') center 40%/cover no-repeat;
      z-index: 0;
      pointer-events: none;
      will-change: transform;
      transform: translate3d(0, var(--bg-offset, 0px), 0);
    }

    .hero h1 {
      font-size: 4.2rem;
      font-weight: 700;
      letter-spacing: -1px;
      margin-bottom: 16px;
      color: var(--text);
      animation: heroEnter .8s cubic-bezier(.22, 1, .36, 1) both;
    }

    .hero-logo {
      display: block;
      width: min(560px, 78vw);
      height: auto;
      margin: 0 auto 20px;
      filter: drop-shadow(0 4px 18px rgba(122, 118, 111, .55)) drop-shadow(0 1px 2px rgba(122, 118, 111, .35));
      animation: heroEnter .9s cubic-bezier(.22, 1, .36, 1) both;
      will-change: transform, opacity;
    }

    @media (max-width: 600px) {
      .hero-logo { width: min(440px, 86vw); }
    }

    .hero p {
      font-size: 1.2rem;
      color: var(--color-off-white);
      max-width: 520px;
      margin: 0 auto 36px;
      animation: heroEnter .8s cubic-bezier(.22, 1, .36, 1) .15s both;
      font-weight: 500;
      text-shadow: 0 2px 14px rgba(122, 118, 111, .55);
    }

    .hero .btn-primary {
      background: linear-gradient(140deg, var(--color-off-white) 0%, var(--color-soft-blush) 100%);
      color: var(--color-deep-stone);
      padding: 16px 30px;
      border-radius: 999px;
      box-shadow:
        0 14px 32px rgba(122, 118, 111, .35),
        inset 0 1px 0 rgba(255, 255, 255, .55);
      position: relative;
      overflow: hidden;
    }

    .hero-cta {
      display: inline-flex;
      align-items: center;
      gap: 12px;
      letter-spacing: .03em;
    }

    .hero-cta-text {
      transition: transform .35s cubic-bezier(.16, 1, .3, 1);
    }

    .hero-cta-arrow {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 30px;
      height: 30px;
      border-radius: 50%;
      background: rgba(122, 118, 111, .14);
      color: var(--color-deep-stone);
      transition: transform .35s cubic-bezier(.16, 1, .3, 1), background .25s ease;
    }

    .hero-cta::before {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(120deg, transparent 0%, rgba(255, 255, 255, .55) 50%, transparent 100%);
      transform: translateX(-120%);
      transition: transform .9s cubic-bezier(.16, 1, .3, 1);
      pointer-events: none;
    }

    .hero .btn-primary:hover {
      background: linear-gradient(140deg, var(--color-soft-blush) 0%, var(--color-off-white) 100%);
      color: var(--color-deep-stone);
      box-shadow:
        0 18px 40px rgba(122, 118, 111, .42),
        inset 0 1px 0 rgba(255, 255, 255, .65);
    }

    .hero-cta:hover .hero-cta-arrow {
      transform: translateX(4px);
      background: rgba(122, 118, 111, .22);
    }

    .hero-cta:hover::before {
      transform: translateX(120%);
    }

    .hero .btn-primary:active {
      transform: translateY(0) scale(.97);
    }

    .btn {
      display: inline-block;
      padding: 14px 36px;
      border-radius: 50px;
      font-family: 'Outfit', 'Geist', system-ui, sans-serif;
      font-weight: 600;
      font-size: .95rem;
      letter-spacing: .01em;
      transition: transform .35s cubic-bezier(.16, 1, .3, 1), box-shadow .35s cubic-bezier(.16, 1, .3, 1), background .25s ease;
      cursor: pointer;
      border: none;
      will-change: transform;
    }

    .btn:hover {
      transform: translateY(-2px);
      box-shadow: 0 6px 24px rgba(122, 118, 111, .15);
    }

    .btn:active {
      transform: translateY(0) scale(.97);
      transition-duration: .12s;
    }

    .btn-primary {
      background: var(--text);
      color: var(--cream);
    }

    .btn-primary:hover {
      background: #7A766F;
    }

    .btn-secondary {
      background: var(--white);
      color: var(--text);
      border: 2px solid var(--lavender);
    }

    .hero .btn {
      animation: heroEnter .8s cubic-bezier(.22, 1, .36, 1) .3s both;
    }

    /* ── Sparkle Canvas ──────────────────────────── */
    #sparkleCanvas {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      pointer-events: none;
      z-index: 1;
    }

    /* ── About ────────────────────────────────────── */
    .about {
      background: var(--white);
      position: relative;
      z-index: 5;
      border-radius: 24px 24px 0 0;
      margin-top: -24px;
      box-shadow: 0 -8px 30px rgba(122,118,111,.06);
    }

    .about-showcase {
      margin-top: 48px;
    }

    .about-showcase-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 16px;
      max-width: 900px;
      margin: 0 auto;
    }

    .about-showcase-item {
      border-radius: var(--radius);
      overflow: hidden;
      aspect-ratio: 1;
      position: relative;
      transition: transform .35s ease, box-shadow .35s ease;
    }

    .about-showcase-item:hover {
      transform: translateY(-6px) scale(1.03);
      box-shadow: 0 12px 32px rgba(122, 118, 111, .12);
      z-index: 2;
    }

    .about-showcase-item img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: transform .4s ease;
    }

    .about-showcase-item:hover img {
      transform: scale(1.08);
    }

    /* Crossfade slideshow layers (added by JS) */
    .about-showcase-item--shuffled .about-img-layer {
      position: absolute;
      inset: 0;
      opacity: 0;
      transition: opacity 1.4s cubic-bezier(.4, 0, .2, 1), transform .4s ease;
      will-change: opacity;
    }

    .about-showcase-item--shuffled .about-img-layer.is-visible {
      opacity: 1;
    }

    .about-showcase-item--shuffled:hover .about-img-layer.is-visible {
      transform: scale(1.08);
    }

    @media (max-width: 768px) {
      .about-showcase-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
      }
    }

    @media (max-width: 480px) {
      .about-showcase-grid {
        grid-template-columns: repeat(2, 1fr);
      }
    }

    .about-content {
      max-width: 700px;
      margin: 0 auto;
      text-align: center;
    }

    .about-content p {
      font-size: 1.05rem;
      color: var(--text-light);
      line-height: 1.8;
    }

    /* ── Services ─────────────────────────────────── */
    .services { background: var(--white); }

    .services-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 24px;
      max-width: 880px;
      margin: 0 auto;
    }

    @media (max-width: 720px) {
      .services-grid { grid-template-columns: 1fr; }
    }

    .service-card {
      background: #EFE2DE;
      border-radius: var(--radius);
      padding: 32px 28px;
      box-shadow: var(--shadow);
      position: relative;
      overflow: hidden;
      transition: transform .3s ease, box-shadow .3s ease;
      text-align: left;
    }

    .service-card:hover {
      transform: translateY(-6px);
      box-shadow: 0 12px 32px rgba(122, 118, 111, .1);
    }

    .service-card h3 {
      font-size: 1.15rem;
      margin-bottom: 16px;
      padding-bottom: 12px;
      border-bottom: 2px solid var(--lavender);
      color: #7A766F;
    }

    .price-row {
      display: flex;
      justify-content: space-between;
      align-items: baseline;
      padding: 6px 0;
      font-size: .9rem;
      color: #7A766F;
    }

    .price-row + .price-row {
      border-top: 1px solid rgba(239, 226, 222, .2);
    }

    .price-row span:last-child {
      font-family: 'Outfit', 'Geist', system-ui, sans-serif;
      font-weight: 700;
      color: #FFFFFF;
      white-space: nowrap;
      margin-left: 12px;
      text-shadow: 0 1px 2px rgba(122, 118, 111, .25);
    }

    .service-card .sub-heading {
      font-size: .8rem;
      font-weight: 600;
      color: var(--text);
      text-transform: uppercase;
      letter-spacing: .5px;
      margin-top: 12px;
      margin-bottom: 4px;
    }

    /* ── Nail-Paint Brush Stroke Reveal ─────────── */

    /* The brush — tilted like someone is actually painting */
    .paint-brush {
      position: absolute;
      right: -15px;
      top: 0;
      width: 50px;
      z-index: 12;
      pointer-events: none;
      opacity: 0;
      filter: drop-shadow(0 4px 10px rgba(122, 118, 111, .2));
      transform-origin: bottom center;
    }

    .service-card.painting .paint-brush {
      animation: brushStroke 1.8s cubic-bezier(.25, .1, .25, 1) forwards;
    }

    @keyframes brushStroke {
      0%   { top: -18%; right: -15px; opacity: 0; transform: rotate(-35deg) scale(.9); }
      6%   { opacity: 1; }
      /* Brush touches down — slight pressure wobble */
      12%  { top: -5%; right: 5px; transform: rotate(-28deg) scale(1); }
      /* Long sweeping stroke across and down — hand wobble */
      25%  { top: 10%; right: 20%; transform: rotate(-22deg) scale(1.02); }
      35%  { top: 25%; right: 35%; transform: rotate(-18deg) scale(1); }
      42%  { top: 38%; right: 42%; transform: rotate(-20deg) scale(1.01); }
      55%  { top: 52%; right: 50%; transform: rotate(-16deg) scale(1); }
      65%  { top: 65%; right: 55%; transform: rotate(-19deg) scale(.99); }
      75%  { top: 78%; right: 60%; transform: rotate(-14deg) scale(1); }
      85%  { top: 90%; right: 65%; transform: rotate(-12deg) scale(.98); opacity: .9; }
      /* Brush lifts off */
      92%  { top: 98%; right: 70%; transform: rotate(-8deg) scale(.9); opacity: .5; }
      100% { top: 108%; right: 80%; transform: rotate(-5deg) scale(.8); opacity: 0; }
    }

    /* Brush stroke smear — thick diagonal paint trail */
    .brush-stroke {
      position: absolute;
      inset: 0;
      z-index: 0;
      pointer-events: none;
      border-radius: var(--radius);
      overflow: hidden;
    }

    .brush-stroke::before {
      content: '';
      position: absolute;
      top: -10%;
      left: -20%;
      width: 160%;
      height: 0;
      background: linear-gradient(
        135deg,
        rgba(187, 171, 162, .06) 0%,
        rgba(187, 171, 162, .12) 30%,
        rgba(239, 226, 222, .14) 50%,
        rgba(239, 226, 222, .10) 70%,
        rgba(239, 226, 222, .06) 100%
      );
      transform: skewX(-12deg);
      opacity: 0;
    }

    .service-card.painting .brush-stroke::before {
      animation: strokeFill 1.6s cubic-bezier(.25, .1, .25, 1) forwards;
    }

    @keyframes strokeFill {
      0%   { height: 0; opacity: 0; }
      8%   { opacity: 1; }
      100% { height: 130%; opacity: 1; }
    }

    /* Wet-paint shimmer across the stroke */
    .brush-stroke::after {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(
        110deg,
        transparent 0%,
        transparent 35%,
        rgba(255, 255, 255, .45) 48%,
        rgba(255, 255, 255, .65) 50%,
        rgba(255, 255, 255, .45) 52%,
        transparent 65%,
        transparent 100%
      );
      background-size: 300% 100%;
      opacity: 0;
    }

    .service-card.painting .brush-stroke::after {
      animation: strokeShimmer .9s ease-in-out 1.5s forwards;
    }

    @keyframes strokeShimmer {
      0%   { opacity: 0; background-position: 100% 0; }
      25%  { opacity: .7; }
      100% { opacity: 0; background-position: -100% 0; }
    }

    /* Small splatter dots left behind by the stroke */
    .paint-splatter {
      position: absolute;
      border-radius: 50%;
      pointer-events: none;
      z-index: 11;
      opacity: 0;
    }

    .service-card.painting .paint-splatter:nth-child(1) {
      width: 5px; height: 5px; top: 18%; left: 25%; background: rgba(187, 171, 162, .35);
      animation: splatterIn .3s ease-out .35s forwards;
    }
    .service-card.painting .paint-splatter:nth-child(2) {
      width: 4px; height: 4px; top: 40%; left: 48%; background: rgba(239, 226, 222, .4);
      animation: splatterIn .3s ease-out .6s forwards;
    }
    .service-card.painting .paint-splatter:nth-child(3) {
      width: 6px; height: 6px; top: 62%; left: 58%; background: rgba(239, 226, 222, .35);
      animation: splatterIn .3s ease-out .85s forwards;
    }
    .service-card.painting .paint-splatter:nth-child(4) {
      width: 3px; height: 3px; top: 30%; left: 65%; background: rgba(187, 171, 162, .3);
      animation: splatterIn .3s ease-out .5s forwards;
    }
    .service-card.painting .paint-splatter:nth-child(5) {
      width: 4px; height: 4px; top: 75%; left: 40%; background: rgba(239, 226, 222, .35);
      animation: splatterIn .3s ease-out 1s forwards;
    }

    @keyframes splatterIn {
      0%   { opacity: 0; transform: scale(0); }
      50%  { opacity: 1; transform: scale(1.5); }
      100% { opacity: .5; transform: scale(1); }
    }

    /* All text content stays above everything — always visible */
    .service-card h3,
    .service-card .price-row,
    .service-card .sub-heading {
      position: relative;
      z-index: 10;
    }

    /* When painting, text must not block the canvas from receiving mouse events */
    .service-card.paint-mode h3,
    .service-card.paint-mode .price-row,
    .service-card.paint-mode .sub-heading {
      pointer-events: none;
    }

    .service-card.paint-ready .price-row {
      opacity: 0;
      transform: translateX(-6px) skewX(-2deg);
    }

    .service-card.paint-ready .price-row span:last-child {
      opacity: 0;
      transform: scale(0.6) rotate(-4deg);
    }

    /* Price rows sweep in following the brush path */
    .service-card.painting .price-row {
      animation: priceStroke .5s cubic-bezier(.22, 1, .36, 1) forwards;
    }

    .service-card.painting .price-row:nth-child(2)  { animation-delay: .18s; }
    .service-card.painting .price-row:nth-child(3)  { animation-delay: .32s; }
    .service-card.painting .price-row:nth-child(4)  { animation-delay: .46s; }
    .service-card.painting .price-row:nth-child(5)  { animation-delay: .60s; }
    .service-card.painting .price-row:nth-child(6)  { animation-delay: .74s; }
    .service-card.painting .price-row:nth-child(7)  { animation-delay: .88s; }
    .service-card.painting .price-row:nth-child(8)  { animation-delay: 1.02s; }

    @keyframes priceStroke {
      0%   { opacity: 0; transform: translateX(-6px) skewX(-2deg); }
      60%  { transform: translateX(2px) skewX(0.5deg); }
      100% { opacity: 1; transform: translateX(0) skewX(0); }
    }

    /* Price amounts — painted on with a wet pop */
    .service-card.painting .price-row span:last-child {
      animation: pricePaint .45s cubic-bezier(.34, 1.56, .64, 1) forwards;
    }

    .service-card.painting .price-row:nth-child(2) span:last-child  { animation-delay: .28s; }
    .service-card.painting .price-row:nth-child(3) span:last-child  { animation-delay: .42s; }
    .service-card.painting .price-row:nth-child(4) span:last-child  { animation-delay: .56s; }
    .service-card.painting .price-row:nth-child(5) span:last-child  { animation-delay: .70s; }
    .service-card.painting .price-row:nth-child(6) span:last-child  { animation-delay: .84s; }
    .service-card.painting .price-row:nth-child(7) span:last-child  { animation-delay: .98s; }
    .service-card.painting .price-row:nth-child(8) span:last-child  { animation-delay: 1.12s; }

    @keyframes pricePaint {
      0%   { opacity: 0; transform: scale(0.6) rotate(-4deg); }
      50%  { transform: scale(1.18) rotate(1deg); }
      75%  { transform: scale(0.95) rotate(-0.5deg); }
      100% { opacity: 1; transform: scale(1) rotate(0); }
    }

    /* ── Mouse-Paint Hover ─────────────────────── */

    /* Canvas sits BEHIND the text content — paints the background */
    .paint-canvas {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      z-index: 0;
      pointer-events: none;
      border-radius: var(--radius);
    }

    /* When paint mode is active, the canvas captures mouse events */
    .service-card.paint-mode .paint-canvas,
    .service-card.touch-painting .paint-canvas {
      pointer-events: auto;
      z-index: 5;
    }

    /* Hide the default cursor over paint-mode cards */
    .service-card.paint-mode {
      cursor: none;
    }

    /* Brush cursor follows the mouse */
    .brush-cursor {
      position: fixed;
      width: 36px;
      height: 100px;
      pointer-events: none;
      z-index: 300;
      /* Tip of the brush (bottom-center) aligns with cursor */
      transform: translate(-18px, -100px) rotate(-30deg);
      transform-origin: bottom center;
      display: none;
      filter: drop-shadow(0 2px 6px rgba(122,118,111,.25));
    }

    .brush-cursor.visible {
      display: block;
    }

    /* Clear paint button */
    .clear-paint-btn {
      position: absolute;
      top: 8px;
      right: 8px;
      z-index: 15;
      background: rgba(239,238,237,.75);
      border: 1px solid var(--lavender);
      border-radius: 6px;
      padding: 3px 10px;
      font-size: .7rem;
      font-family: 'Geist', system-ui, sans-serif;
      color: var(--text-light);
      cursor: pointer;
      opacity: 0;
      pointer-events: none;
      transition: opacity .3s ease, background .2s ease;
      backdrop-filter: blur(4px);
    }

    .service-card.paint-mode .clear-paint-btn,
    .service-card.touch-painting .clear-paint-btn {
      opacity: 1;
      pointer-events: auto;
    }

    .clear-paint-btn:hover {
      background: rgba(239,238,237,.95);
      color: var(--text);
    }

    /* Paint mode toggle button (touch devices) */
    .paint-toggle-btn {
      position: absolute;
      top: 8px;
      left: 8px;
      z-index: 15;
      background: rgba(239,238,237,.75);
      border: 1px solid var(--lavender);
      border-radius: 6px;
      padding: 3px 10px;
      font-size: .7rem;
      font-family: 'Geist', system-ui, sans-serif;
      color: var(--text-light);
      cursor: pointer;
      opacity: 0;
      pointer-events: none;
      transition: opacity .3s ease, background .2s ease;
      backdrop-filter: blur(4px);
      display: none;
    }

    .service-card.paint-mode .paint-toggle-btn {
      opacity: 1;
      pointer-events: auto;
    }

    .paint-toggle-btn.active {
      background: var(--lavender);
      color: var(--text);
      border-color: var(--text-light);
    }

    /* Show paint toggle only on touch devices */
    @media (pointer: coarse) {
      .paint-toggle-btn { display: block; }
      /* Hide brush cursor on touch */
      .brush-cursor { display: none !important; }
    }

    /* When touch-painting is active, card gets a subtle border glow */
    .service-card.touch-painting {
      box-shadow: 0 0 0 2px var(--lavender), var(--shadow);
    }

    /* ── Gallery ──────────────────────────────────── */
    .gallery { background: var(--cream); overflow: hidden; }

    .gallery-track-wrapper {
      overflow: hidden;
      width: 100vw;
      margin-left: calc(-50vw + 50%);
      padding: 20px 0;
    }

    .gallery-track {
      display: flex;
      gap: 20px;
      width: max-content;
      animation: marquee 55s linear infinite;
    }

    .gallery-track:hover {
      animation-play-state: paused;
    }

    @keyframes marquee {
      0%   { transform: translateX(0); }
      100% { transform: translateX(-50%); }
    }

    @keyframes marqueeReverse {
      0%   { transform: translateX(-50%); }
      100% { transform: translateX(0); }
    }

    .gallery-track-reverse {
      display: flex;
      gap: 20px;
      width: max-content;
      animation: marqueeReverse 60s linear infinite;
    }

    .gallery-track-reverse:hover {
      animation-play-state: paused;
    }

    /* Second row — hidden by default */
    .gallery-row2-wrapper {
      max-height: 0;
      overflow: hidden;
      transition: max-height .6s cubic-bezier(.4,0,.2,1), opacity .4s ease;
      opacity: 0;
    }

    .gallery-row2-wrapper.expanded {
      max-height: 400px;
      opacity: 1;
    }

    .gallery-expand-btn {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      margin: 12px auto 4px;
      background: none;
      border: none;
      font-family: 'Geist', system-ui, sans-serif;
      font-size: .8rem;
      color: var(--text-light);
      cursor: pointer;
      padding: 6px 16px;
      transition: color .2s ease;
    }

    .gallery-expand-btn:hover {
      color: var(--text);
    }

    .gallery-expand-btn svg {
      width: 16px;
      height: 16px;
      stroke: currentColor;
      stroke-width: 2;
      fill: none;
      transition: transform .3s ease;
    }

    .gallery-expand-btn.open svg {
      transform: rotate(180deg);
    }

    .gallery-shuffle-btn {
      background: rgba(239,238,237,.75);
      border: 1px solid var(--lavender);
      border-radius: 20px;
      padding: 8px 24px;
      font-size: .8rem;
      font-family: 'Geist', system-ui, sans-serif;
      color: var(--text-light);
      cursor: pointer;
      transition: background .3s ease, color .3s ease, transform .3s ease;
      backdrop-filter: blur(4px);
    }

    .gallery-shuffle-btn:hover {
      background: var(--lavender);
      color: var(--text);
      transform: scale(1.05);
    }

    .gallery-shuffle-btn:active {
      transform: scale(0.95);
    }

    /* Shuffle animation states */
    .gallery-item.shuffle-out {
      transition: transform .5s cubic-bezier(.4,0,.2,1), opacity .4s ease;
      transform: scale(0.6) rotate(var(--rot)) translateY(var(--ty));
      opacity: 0;
    }

    .gallery-item.shuffle-in {
      transition: transform .6s cubic-bezier(.2,1,.3,1), opacity .5s ease;
      transform: scale(1) rotate(0deg) translateY(0);
      opacity: 1;
    }

    /* Smooth direction swap — never truly pause */
    .gallery-track,
    .gallery-track-reverse {
      transition: animation-duration .3s ease;
    }

    .gallery-item {
      flex-shrink: 0;
      width: 220px;
      height: 260px;
      border-radius: var(--radius);
      overflow: hidden;
      position: relative;
      cursor: pointer;
      transition: transform .35s ease, box-shadow .35s ease;
    }

    .gallery-item:hover {
      transform: scale(1.05) translateY(-6px);
      box-shadow: 0 16px 40px rgba(122, 118, 111, .15);
      z-index: 2;
    }

    .gallery-item img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: transform .4s ease, filter .4s ease;
    }

    .gallery-item:hover img {
      transform: scale(1.08);
    }

    .gallery-track:hover .gallery-item:not(:hover) {
      filter: brightness(.85);
      transition: filter .3s ease, transform .35s ease;
    }

    /* ── Lightbox ─────────────────────────────────── */
    .lightbox {
      position: fixed;
      inset: 0;
      z-index: 200;
      display: flex;
      align-items: center;
      justify-content: center;
      opacity: 0;
      visibility: hidden;
      transition: opacity .3s ease, visibility .3s ease;
    }

    .lightbox.active {
      opacity: 1;
      visibility: visible;
    }

    .lightbox-backdrop {
      position: absolute;
      inset: 0;
      background: rgba(122, 118, 111, .88);
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
    }

    .lightbox-content {
      position: relative;
      z-index: 1;
      max-width: 90vw;
      max-height: 85vh;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .lightbox-content img {
      max-width: 90vw;
      max-height: 85vh;
      border-radius: 12px;
      object-fit: contain;
      box-shadow: 0 20px 60px rgba(122, 118, 111, .5);
      transform: scale(.92);
      opacity: 0;
      transition: transform .35s cubic-bezier(.22, 1, .36, 1), opacity .35s ease;
    }

    .lightbox.active .lightbox-content img {
      transform: scale(1);
      opacity: 1;
    }

    .lightbox-btn {
      position: absolute;
      z-index: 2;
      top: 50%;
      transform: translateY(-50%);
      width: 48px;
      height: 48px;
      border-radius: 50%;
      border: none;
      background: rgba(255, 255, 255, .12);
      color: #fff;
      font-size: 1.3rem;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: background .2s, transform .2s;
      backdrop-filter: blur(4px);
    }

    .lightbox-btn:hover {
      background: rgba(255, 255, 255, .25);
      transform: translateY(-50%) scale(1.08);
    }

    .lightbox-prev { left: clamp(12px, 3vw, 32px); }
    .lightbox-next { right: clamp(12px, 3vw, 32px); }

    .lightbox-close {
      position: absolute;
      z-index: 2;
      top: clamp(12px, 2vw, 24px);
      right: clamp(12px, 2vw, 24px);
      width: 44px;
      height: 44px;
      border-radius: 50%;
      border: none;
      background: rgba(255, 255, 255, .12);
      color: #fff;
      font-size: 1.4rem;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: background .2s, transform .2s;
      backdrop-filter: blur(4px);
    }

    .lightbox-close:hover {
      background: rgba(255, 255, 255, .25);
      transform: scale(1.08);
    }

    .lightbox-counter {
      position: absolute;
      z-index: 2;
      bottom: clamp(12px, 2vw, 24px);
      left: 50%;
      transform: translateX(-50%);
      font-family: 'Outfit', 'Geist', system-ui, sans-serif;
      font-size: .85rem;
      font-weight: 500;
      color: rgba(255, 255, 255, .6);
      background: rgba(255, 255, 255, .08);
      padding: 6px 16px;
      border-radius: 20px;
      backdrop-filter: blur(4px);
    }

    @media (max-width: 768px) {
      .lightbox-btn { width: 40px; height: 40px; font-size: 1.1rem; }
    }

    /* ── Nail Try-On ─────────────────────────────── */
    .nail-tryon { background: var(--white); }

    .tryon-layout {
      display: grid;
      grid-template-columns: 1.2fr 1fr;
      gap: 48px;
      align-items: center;
      max-width: 960px;
      margin: 0 auto;
    }

    .tryon-hand {
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .tryon-hand-wrapper {
      position: relative;
      width: 100%;
      max-width: 420px;
      border-radius: var(--radius);
      overflow: hidden;
    }

    .tryon-hand-wrapper svg.hand-svg {
      width: 100%;
      height: auto;
      display: block;
    }

    /* Clickable nail groups in SVG */
    .nail-group {
      cursor: pointer;
      transition: transform .2s ease;
    }

    .nail-group:hover {
      transform: translateY(-3px);
    }

    .nail-group.selected .nail-base {
      stroke-width: 3;
    }

    .nail-color {
      transition: fill .3s ease, opacity .3s ease;
    }

    .nail-zone .nail-fill.painted ~ .nail-shine {
      opacity: 1;
    }

    .tryon-controls {
      display: flex;
      flex-direction: column;
      gap: 24px;
    }

    .tryon-controls h3 {
      font-size: 1.2rem;
      margin-bottom: 4px;
    }

    .tryon-controls p {
      font-size: .9rem;
      color: var(--text-light);
      margin-bottom: 12px;
    }

    .color-palette {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
    }

    .color-swatch {
      width: 36px;
      height: 36px;
      border-radius: 50%;
      border: 3px solid transparent;
      cursor: pointer;
      transition: transform .2s, border-color .2s, box-shadow .2s;
      position: relative;
    }

    .color-swatch:hover {
      transform: scale(1.15);
    }

    .color-swatch.active {
      border-color: var(--text);
      box-shadow: 0 0 0 2px var(--cream), 0 0 0 4px var(--text);
      transform: scale(1.1);
    }

    .finish-options {
      display: flex;
      gap: 10px;
      flex-wrap: wrap;
    }

    .finish-btn {
      padding: 8px 18px;
      border-radius: 20px;
      border: 1.5px solid #EFE2DE;
      background: var(--cream);
      font-family: 'Geist', system-ui, sans-serif;
      font-size: .85rem;
      color: var(--text-light);
      cursor: pointer;
      transition: all .2s;
    }

    .finish-btn:hover {
      border-color: var(--lavender);
    }

    .finish-btn.active {
      background: #BBABA2;
      color: white;
      border-color: #BBABA2;
    }

    .tryon-actions {
      display: flex;
      gap: 12px;
    }

    .tryon-actions .btn {
      padding: 10px 24px;
      font-size: .85rem;
    }

    /* ── Colour Collection ────────────────────────── */
    .colour-collection { background: var(--white); }

    .colour-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
      gap: 20px;
      max-width: 900px;
      margin: 0 auto;
    }

    .colour-card {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 8px;
      cursor: default;
    }

    .colour-swatch-lg {
      width: 70px;
      height: 70px;
      border-radius: 50%;
      box-shadow: 0 3px 12px rgba(122,118,111,.1);
      transition: transform .3s ease, box-shadow .3s ease;
    }

    .colour-card:hover .colour-swatch-lg {
      transform: scale(1.12);
      box-shadow: 0 6px 20px rgba(122,118,111,.15);
    }

    .colour-card span {
      font-size: .75rem;
      color: var(--text-light);
      text-align: center;
    }

    /* Physics playground mode */
    .colour-play-btn {
      display: block;
      margin: 0 auto 24px;
      background: rgba(239,238,237,.75);
      border: 1px solid var(--lavender);
      border-radius: 20px;
      padding: 8px 24px;
      font-size: .8rem;
      font-family: 'Geist', system-ui, sans-serif;
      color: var(--text-light);
      cursor: pointer;
      transition: background .3s ease, color .3s ease, transform .3s ease;
      backdrop-filter: blur(4px);
    }

    .colour-play-btn:hover {
      background: var(--lavender);
      color: var(--text);
      transform: scale(1.05);
    }

    .colour-arena {
      position: relative;
      width: 100%;
      max-width: 900px;
      height: 500px;
      margin: 0 auto;
      border-radius: var(--radius);
      background: var(--cream);
      overflow: hidden;
      display: none;
      box-shadow: inset 0 2px 12px rgba(122,118,111,.06);
    }

    .colour-arena.active {
      display: block;
      animation: arenaFadeIn .4s ease both;
    }

    @keyframes arenaFadeIn {
      from { opacity: 0; }
      to { opacity: 1; }
    }

    .colour-ball {
      position: absolute;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 3px 10px rgba(122,118,111,.12);
      cursor: grab;
      user-select: none;
      -webkit-user-select: none;
      will-change: transform;
      transition: box-shadow .15s ease;
    }

    .colour-ball:active {
      cursor: grabbing;
      box-shadow: 0 6px 20px rgba(122,118,111,.2);
    }

    .colour-ball span {
      font-size: .55rem;
      color: rgba(0,0,0,.5);
      pointer-events: none;
      text-align: center;
      line-height: 1.1;
      text-shadow: 0 0 3px rgba(255,255,255,.8);
    }

    /* ── Nail Shape Guide ────────────────────────── */
    .nail-shapes { background: var(--cream); }

    .shapes-grid {
      display: flex;
      justify-content: center;
      gap: 20px;
      flex-wrap: wrap;
      margin-bottom: 32px;
    }

    .shape-card {
      background: var(--white);
      border-radius: var(--radius);
      padding: 24px 20px;
      text-align: center;
      width: 150px;
      cursor: pointer;
      border: 2px solid transparent;
      transition: transform .35s cubic-bezier(.16, 1, .3, 1), box-shadow .35s cubic-bezier(.16, 1, .3, 1), background .25s ease, border-color .25s ease;
      box-shadow: var(--shadow);
    }

    .shape-card:hover {
      transform: translateY(-4px);
      box-shadow: 0 8px 28px rgba(122, 118, 111, .12);
    }

    .shape-card:active {
      transform: translateY(0) scale(.97);
      transition-duration: .12s;
    }

    .shape-card.active {
      border-color: #BBABA2;
      background: rgba(187, 171, 162, .06);
    }

    .shape-card svg {
      width: 60px;
      height: 80px;
      margin: 0 auto 12px;
    }

    .shape-card h4 {
      font-size: .9rem;
      color: var(--text);
    }

    .shape-info {
      background: var(--white);
      border-radius: var(--radius);
      padding: 32px;
      max-width: 600px;
      margin: 0 auto;
      box-shadow: var(--shadow);
      text-align: center;
      min-height: 160px;
      transition: opacity .3s ease;
    }

    .shape-info h3 {
      font-size: 1.3rem;
      margin-bottom: 12px;
      color: #BBABA2;
    }

    .shape-info p {
      font-size: .95rem;
      color: var(--text-light);
      line-height: 1.7;
    }

    .shape-info .shape-tags {
      display: flex;
      justify-content: center;
      gap: 8px;
      margin-top: 16px;
      flex-wrap: wrap;
    }

    .shape-tag {
      display: inline-block;
      padding: 4px 14px;
      background: rgba(239, 226, 222, .2);
      border-radius: 20px;
      font-size: .8rem;
      color: var(--text-light);
    }

    /* ── Quiz ─────────────────────────────────────── */
    .nail-quiz { background: var(--white); }

    .quiz-card {
      background: var(--cream);
      border-radius: var(--radius);
      padding: 40px 36px;
      max-width: 650px;
      margin: 0 auto;
      box-shadow: var(--shadow);
      text-align: center;
    }

    .quiz-progress {
      display: flex;
      gap: 6px;
      justify-content: center;
      margin-bottom: 28px;
    }

    .quiz-dot {
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background: #EFE2DE;
      transition: background .3s, transform .3s;
    }

    .quiz-dot.active {
      background: #BBABA2;
      transform: scale(1.2);
    }

    .quiz-dot.done {
      background: var(--mint);
    }

    .quiz-question {
      font-family: 'Outfit', 'Geist', system-ui, sans-serif;
      font-size: 1.3rem;
      font-weight: 600;
      margin-bottom: 24px;
      color: var(--text);
      min-height: 40px;
    }

    .quiz-options {
      display: flex;
      flex-direction: column;
      gap: 12px;
    }

    .quiz-option {
      padding: 14px 20px;
      border-radius: 12px;
      border: 2px solid #EFE2DE;
      background: var(--white);
      font-family: 'Geist', system-ui, sans-serif;
      font-size: .95rem;
      color: var(--text);
      cursor: pointer;
      transition: all .25s ease;
      text-align: left;
    }

    .quiz-option:hover {
      border-color: var(--lavender);
      background: rgba(239, 226, 222, .1);
      transform: translateX(4px);
    }

    .quiz-option.selected {
      border-color: #BBABA2;
      background: rgba(187, 171, 162, .1);
    }

    .quiz-result {
      display: none;
      text-align: center;
      animation: fadeUp .5s ease both;
    }

    .quiz-result.show {
      display: block;
    }

    .quiz-result-icon {
      font-size: 3rem;
      margin-bottom: 16px;
    }

    .quiz-result h3 {
      font-size: 1.5rem;
      color: #BBABA2;
      margin-bottom: 12px;
    }

    .quiz-result p {
      font-size: 1rem;
      color: var(--text-light);
      line-height: 1.7;
      max-width: 450px;
      margin: 0 auto 24px;
    }

    .quiz-result .recommended {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      justify-content: center;
      margin-bottom: 24px;
    }

    .quiz-result .recommended span {
      padding: 6px 16px;
      background: rgba(187, 171, 162, .12);
      border-radius: 20px;
      font-size: .85rem;
      color: var(--text);
      font-weight: 500;
    }

    @keyframes fadeUp {
      0%   { opacity: 0; transform: translateY(16px); }
      100% { opacity: 1; transform: translateY(0); }
    }

    /* ── Calculator ───────────────────────────────── */
    .calculator { background: var(--cream); }

    .calc-card {
      background: var(--white);
      border-radius: var(--radius);
      box-shadow: var(--shadow);
      max-width: 600px;
      margin: 0 auto;
      padding: 36px 32px;
    }

    .calc-group {
      margin-bottom: 20px;
    }

    .calc-group label {
      display: block;
      font-size: .85rem;
      font-weight: 600;
      color: var(--text);
      margin-bottom: 8px;
    }

    .calc-card select {
      width: 100%;
      padding: 12px 16px;
      border: 1.5px solid #EFE2DE;
      border-radius: 12px;
      font-family: 'Geist', system-ui, sans-serif;
      font-size: .95rem;
      background: var(--cream);
      color: var(--text);
      outline: none;
      cursor: pointer;
      appearance: none;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%236b5e74' stroke-width='1.5' fill='none'/%3E%3C/svg%3E");
      background-repeat: no-repeat;
      background-position: right 16px center;
      transition: border-color .2s;
    }

    .calc-card select:focus,
    .calc-group select:focus {
      border-color: var(--lavender);
      box-shadow: 0 0 0 3px rgba(239, 226, 222, .25);
    }

    .calc-addons {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
    }

    .calc-addon {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 8px 14px;
      border: 1.5px solid #EFE2DE;
      border-radius: 10px;
      font-size: .85rem;
      color: var(--text-light);
      cursor: pointer;
      transition: border-color .25s ease, background .25s ease, color .25s ease, transform .35s cubic-bezier(.16, 1, .3, 1);
      user-select: none;
    }

    .calc-addon:hover {
      border-color: var(--lavender);
      transform: translateY(-1px);
    }

    .calc-addon:active {
      transform: scale(.97);
      transition-duration: .12s;
    }

    .calc-addon.active {
      border-color: #BBABA2;
      background: rgba(187, 171, 162, .08);
      color: var(--text);
    }

    .calc-addon input { display: none; }

    .calc-addon .addon-check {
      width: 18px;
      height: 18px;
      border-radius: 5px;
      border: 1.5px solid #BBABA2;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: .7rem;
      color: transparent;
      transition: .2s;
      flex-shrink: 0;
    }

    .calc-addon.active .addon-check {
      border-color: #BBABA2;
      background: #BBABA2;
      color: #fff;
    }

    .calc-divider {
      border: none;
      border-top: 1px solid #EFE2DE;
      margin: 24px 0;
    }

    .calc-total {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    .calc-total-label {
      font-size: 1rem;
      font-weight: 500;
      color: var(--text-light);
    }

    .calc-total-price {
      font-family: 'Outfit', 'Geist', system-ui, sans-serif;
      font-weight: 700;
      font-size: 1.8rem;
      color: #BBABA2;
      transition: transform .2s ease;
    }

    .calc-total-price.bump {
      transform: scale(1.12);
    }

    .calc-items {
      margin-top: 8px;
      font-size: .8rem;
      color: var(--text-light);
      min-height: 20px;
    }

    .calc-items span {
      display: inline-block;
      background: rgba(239, 226, 222, .2);
      padding: 2px 10px;
      border-radius: 8px;
      margin: 2px 4px 2px 0;
    }

    /* ── WhatsApp Calculator Button ──────────────── */
    .calc-whatsapp {
      background: #7A766F;
      color: #fff;
    }

    .calc-whatsapp:hover {
      background: #BBABA2;
    }

    /* ── Contact ──────────────────────────────────── */
    .contact { background: var(--white); }

    .contact-wrapper {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 48px;
      align-items: start;
    }

    .contact-info h3 {
      font-size: 1.25rem;
      margin-bottom: 20px;
    }

    .contact-info ul {
      list-style: none;
      display: flex;
      flex-direction: column;
      gap: 16px;
    }

    .contact-info li {
      display: flex;
      align-items: center;
      gap: 12px;
      color: var(--text);
      font-size: .95rem;
    }

    .contact-info .icon-circle {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      overflow: hidden;
    }

    .contact-info .icon-circle img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .socials a img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .contact-form {
      background: var(--cream);
      padding: 32px;
      border-radius: var(--radius);
      box-shadow: var(--shadow);
    }

    .contact-form h3 {
      font-size: 1.25rem;
      margin-bottom: 20px;
    }

    .form-group { margin-bottom: 16px; }

    .form-group label {
      display: block;
      font-size: .85rem;
      font-weight: 500;
      margin-bottom: 6px;
      color: var(--text-light);
    }

    .form-group input,
    .form-group textarea {
      width: 100%;
      padding: 12px 16px;
      border: 1.5px solid #EFE2DE;
      border-radius: 12px;
      font-family: 'Geist', system-ui, sans-serif;
      font-size: .95rem;
      background: var(--white);
      color: var(--text);
      outline: none;
      transition: border-color .2s;
    }

    .form-group input:focus,
    .form-group textarea:focus {
      border-color: var(--lavender);
      box-shadow: 0 0 0 3px rgba(239, 226, 222, .25);
    }

    .form-group textarea { resize: vertical; min-height: 100px; }

    .contact-form .btn {
      width: 100%;
      text-align: center;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
    }

    .form-error {
      display: none;
      margin-top: 6px;
      font-size: .78rem;
      color: var(--color-deep-stone);
      letter-spacing: .01em;
    }

    .form-error::before {
      content: "";
      display: inline-block;
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: var(--color-deep-stone);
      margin-right: 8px;
      vertical-align: middle;
      transform: translateY(-1px);
    }

    .form-group.has-error input,
    .form-group.has-error textarea {
      border-color: var(--color-deep-stone);
      background: rgba(187, 171, 162, .08);
    }

    .form-group.has-error .form-error {
      display: block;
      animation: errorIn .25s cubic-bezier(.16, 1, .3, 1) both;
    }

    @keyframes errorIn {
      from { opacity: 0; transform: translateY(-4px); }
      to   { opacity: 1; transform: translateY(0); }
    }

    .form-success {
      display: none;
      margin-top: 14px;
      padding: 12px 16px;
      background: rgba(185, 188, 177, .25);
      border: 1px solid rgba(185, 188, 177, .55);
      border-radius: 12px;
      color: var(--color-deep-stone);
      font-size: .88rem;
      text-align: center;
    }

    .contact-form.is-success .form-success {
      display: block;
      animation: errorIn .35s cubic-bezier(.16, 1, .3, 1) both;
    }

    .btn-spinner {
      width: 16px;
      height: 16px;
      border-radius: 50%;
      border: 2px solid rgba(239, 238, 237, .35);
      border-top-color: var(--color-off-white);
      animation: spin .8s linear infinite;
      display: none;
    }

    .contact-form.is-loading .btn-spinner { display: inline-block; }
    .contact-form.is-loading .btn-label   { opacity: .7; }
    .contact-form.is-loading button       { pointer-events: none; }

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

    /* ── Social Links ─────────────────────────────── */
    .socials {
      display: flex;
      gap: 12px;
      margin-top: 28px;
    }

    .socials a {
      width: 42px;
      height: 42px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
      transition: transform .25s ease, opacity .25s ease;
    }

    .socials a:hover {
      opacity: .8;
      transform: scale(1.1);
    }

    /* ── Footer ───────────────────────────────────── */
    footer {
      background: var(--text);
      color: rgba(255, 255, 255, .65);
      text-align: center;
      padding: 32px 0;
      font-size: .85rem;
    }

    footer span { color: #EFE2DE; }

    .footer-logo-img {
      display: block;
      height: 44px;
      width: auto;
      margin: 0 auto 20px;
      opacity: .85;
    }

    .footer-socials {
      display: flex;
      justify-content: center;
      gap: 16px;
      margin-bottom: 16px;
    }

    .footer-socials a {
      width: 42px;
      height: 42px;
      border-radius: 50%;
      overflow: hidden;
      display: block;
      transition: transform .25s ease, opacity .25s ease;
    }

    .footer-socials a:hover {
      transform: scale(1.1);
      opacity: .85;
    }

    .footer-socials a img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    /* ── Animations ───────────────────────────────── */
    @keyframes gradientShift {
      0%   { background-position: 0% 50%; }
      50%  { background-position: 100% 50%; }
      100% { background-position: 0% 50%; }
    }

    @keyframes heroEnter {
      0%   { opacity: 0; transform: translateY(24px); }
      100% { opacity: 1; transform: translateY(0); }
    }

    @keyframes subtleShimmer {
      0%, 100% { background-position: 0% center; }
      50%      { background-position: 250% center; }
    }

    /* Nail polish drip */
    .nail-drip {
      position: absolute;
      top: -2px;
      pointer-events: none;
    }

    .nail-drip .drip-path {
      fill: none;
      stroke-dasharray: 300;
      stroke-dashoffset: 300;
      animation: dripDown 2.5s ease-out .5s forwards;
    }

    @keyframes dripDown {
      0%   { stroke-dashoffset: 300; }
      100% { stroke-dashoffset: 0; }
    }

    .nail-drip .drip-fill {
      opacity: 0;
      animation: dripFillIn 1.2s ease-out 2.5s forwards;
    }

    @keyframes dripFillIn {
      0%   { opacity: 0; }
      100% { opacity: .3; }
    }

    /* Nav link underline slide */
    .nav-links a {
      position: relative;
    }

    .nav-links a::after {
      content: '';
      position: absolute;
      bottom: -4px;
      left: 0;
      width: 0;
      height: 2px;
      background: var(--text);
      border-radius: 1px;
      transition: width .3s ease;
    }

    .nav-links a:hover::after {
      width: 100%;
    }

    /* Scroll reveal */
    .reveal {
      opacity: 0;
      transform: translateY(28px);
      transition: opacity .6s ease, transform .6s cubic-bezier(.22, 1, .36, 1);
    }

    .reveal.visible {
      opacity: 1;
      transform: translateY(0);
    }

    .reveal.visible .service-card {
      opacity: 0;
      animation: cardEnter .5s cubic-bezier(.22, 1, .36, 1) forwards;
    }

    .reveal.visible .service-card:nth-child(1) { animation-delay: .05s; }
    .reveal.visible .service-card:nth-child(2) { animation-delay: .1s; }
    .reveal.visible .service-card:nth-child(3) { animation-delay: .15s; }
    .reveal.visible .service-card:nth-child(4) { animation-delay: .2s; }

    @keyframes cardEnter {
      0%   { opacity: 0; transform: translateY(20px) scale(.97); }
      100% { opacity: 1; transform: translateY(0) scale(1); }
    }

    /* Reduce animations */
    @media (prefers-reduced-motion: reduce) {
      *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
      }
      .reveal { opacity: 1; transform: none; }
      .reveal.visible .service-card { opacity: 1; animation: none; }
      .gallery-track { animation: none; }
    }

    /* ── Mobile ───────────────────────────────────── */
    @media (max-width: 768px) {
      .nav-toggle { display: flex; }

      .nav-links {
        position: absolute;
        top: 64px;
        left: 0;
        right: 0;
        background: rgba(239, 238, 237, .97);
        backdrop-filter: blur(12px);
        flex-direction: column;
        gap: 0;
        max-height: 0;
        overflow: hidden;
        transition: max-height .35s ease;
      }

      .nav-links.open { max-height: 500px; }

      .nav-links a {
        display: block;
        padding: 14px 24px;
        border-bottom: 1px solid rgba(239, 226, 222, .2);
      }

      .hero h1 { font-size: 2.4rem; }
      .hero p { font-size: 1rem; }
      section { padding: 56px 0; }
      .section-title { font-size: 1.6rem; }

      .tryon-layout {
        grid-template-columns: 1fr;
        gap: 32px;
      }

      .contact-wrapper {
        grid-template-columns: 1fr;
        gap: 32px;
      }

      .shapes-grid {
        gap: 12px;
      }

      .shape-card {
        width: 120px;
        padding: 16px 12px;
      }
    }

    @media (max-width: 480px) {
      .hero h1 { font-size: 2rem; }
      .services-grid { grid-template-columns: 1fr; }
      .gallery-item { width: 180px; height: 220px; }
      .shape-card { width: 100px; }
    }

    /* ── Floating Book Now ────────────────────────── */
    .floating-book {
      position: fixed;
      right: 32px;
      bottom: 32px;
      z-index: 200;
      display: flex;
      align-items: center;
      gap: 4px;
      color: var(--color-deep-stone);
      animation: floatBook 3.6s ease-in-out infinite;
    }

    .floating-book-label {
      position: relative;
      background: var(--color-off-white);
      color: var(--color-deep-stone);
      padding: 10px 18px 10px 18px;
      border-radius: 14px;
      font-family: 'Outfit', 'Geist', system-ui, sans-serif;
      box-shadow: 0 10px 28px rgba(122, 118, 111, .22);
      white-space: nowrap;
      display: inline-flex;
      align-items: center;
      gap: 4px;
      border: 1px solid rgba(187, 171, 162, .35);
    }

    .floating-book-label::after {
      content: "";
      position: absolute;
      right: -6px;
      top: 50%;
      width: 12px;
      height: 12px;
      background: var(--color-off-white);
      border-right: 1px solid rgba(187, 171, 162, .35);
      border-top: 1px solid rgba(187, 171, 162, .35);
      transform: translateY(-50%) rotate(45deg);
    }

    .floating-book-text {
      display: inline-flex;
      flex-direction: column;
      line-height: 1.05;
      align-items: flex-start;
    }

    .floating-book-text small {
      font-size: 0.62rem;
      font-weight: 500;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: var(--color-warm-taupe);
    }

    .floating-book-text strong {
      font-size: 1rem;
      font-weight: 700;
      letter-spacing: 0.02em;
      color: var(--color-deep-stone);
    }

    .floating-book-arrow {
      color: var(--color-warm-taupe);
      margin-left: 6px;
      animation: arrowNudge 1.6s ease-in-out infinite;
    }

    .floating-book-btn {
      position: relative;
      width: 64px;
      height: 64px;
      border-radius: 50%;
      background: linear-gradient(140deg, var(--color-deep-stone) 0%, #8d8980 100%);
      color: var(--color-off-white);
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow:
        0 12px 28px rgba(122, 118, 111, .42),
        inset 0 1px 0 rgba(239, 238, 237, .25);
      transition: transform .25s ease, box-shadow .25s ease;
      margin-left: 14px;
    }

    .floating-book-btn svg {
      position: relative;
      z-index: 2;
    }

    .floating-book-pulse {
      position: absolute;
      inset: 0;
      border-radius: 50%;
      border: 2px solid var(--color-warm-taupe);
      opacity: 0;
      animation: bookPulse 2.4s ease-out infinite;
      pointer-events: none;
    }

    .floating-book-pulse--delay {
      animation-delay: 1.2s;
    }

    .floating-book:hover .floating-book-btn {
      transform: scale(1.08) rotate(-4deg);
      box-shadow:
        0 16px 36px rgba(122, 118, 111, .5),
        inset 0 1px 0 rgba(239, 238, 237, .3);
    }

    .floating-book:hover .floating-book-label {
      transform: translateX(-3px);
      box-shadow: 0 12px 32px rgba(122, 118, 111, .28);
    }

    .floating-book:active .floating-book-btn {
      transform: scale(0.96);
    }

    @keyframes floatBook {
      0%, 100% { transform: translateY(0); }
      50%      { transform: translateY(-10px); }
    }

    @keyframes arrowNudge {
      0%, 100% { transform: translateX(0); opacity: .85; }
      50%      { transform: translateX(5px); opacity: 1; }
    }

    @keyframes bookPulse {
      0%   { transform: scale(1);    opacity: .55; }
      80%  { transform: scale(1.7);  opacity: 0; }
      100% { transform: scale(1.7);  opacity: 0; }
    }

    @media (max-width: 600px) {
      .floating-book {
        right: 14px;
        bottom: 14px;
      }
      .floating-book-text small { font-size: 0.55rem; }
      .floating-book-text strong { font-size: 0.9rem; }
      .floating-book-label {
        padding: 8px 14px;
        border-radius: 12px;
      }
      .floating-book-arrow { display: none; }
      .floating-book-btn {
        width: 56px;
        height: 56px;
        margin-left: 8px;
      }
    }

    @media (prefers-reduced-motion: reduce) {
      .floating-book,
      .floating-book-arrow,
      .floating-book-pulse {
        animation: none;
      }
    }