/* ============================================================================
   AI CONSULTING — full-bleed "text-behind-subject" hero + macOS-style
   liquid-glass notification cards that spring in on scroll.

   3-layer composite: room.png (back) → "AI consulting" headline → person.png
   (RGBA cutout, front). Both PNGs are the same framing at cover/center, so the
   person occludes himself and the headline reads as sitting BEHIND his head.

   Static <link> in layout.tsx so backdrop-filter / mask survive Lightning CSS.
   ========================================================================== */
/* z-index:20 — this section sits DIRECTLY after the iPhone showcase, so like
   PrivacySection before it, it must paint ABOVE the showcase's fixed phone
   (which otherwise bleeds over the section boundary during the exit wipe). */
/* padding-top: a white gap so the room photo sits ON white, not butted against
   the dark (#1a1a1a) iPhone-showcase backdrop above it. Desktop + mobile. */
.ai-consulting{ position:relative; z-index:20; background:#fff;
  padding-top:clamp(48px, 9vw, 112px); }

.ai-consulting__stage{ position:relative; width:100%; aspect-ratio:2688/1520; overflow:visible; }
.ai-consulting__room, .ai-consulting__person{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:center; }
.ai-consulting__room{ z-index:1; }
.ai-consulting__person{ z-index:3; }

/* bigger + lowered so the letter bottoms sit BEHIND the person's head/shoulders
   (person.png at z-3 occludes it). top pushes the baseline down into the head. */
.ai-consulting__title{ position:absolute; z-index:2; top:7%; left:0; right:0;
  margin:0; text-align:center; white-space:nowrap;
  font-family:var(--font-sf), -apple-system, system-ui, "Segoe UI", sans-serif;
  font-weight:600; letter-spacing:-0.03em; line-height:1; color:#ffffff;
  font-size:clamp(4rem, 15vw, 14rem); }

/* cards overlay — same box as the stage (sibling; the section's height IS the
   stage's), so % positions land on the photo. Mobile re-flows it below. */
.ai-consulting__cards{ position:absolute; inset:0; z-index:10; pointer-events:none; }

.ai-consulting__card{ position:absolute; width:clamp(240px, 23vw, 350px);
  padding:14px 16px; border-radius:16px; pointer-events:auto;
  background:rgba(255,255,255,0.01);
  background-blend-mode:luminosity;
  -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px);
  border:none;
  box-shadow:inset 0 1px 1px rgba(255,255,255,0.1), 0 8px 30px rgba(0,0,0,0.18); }
/* subtle bevel edge: a thin, soft hairline ring (masked, border box only).
   Kept light and even (no bright top/bottom blobs) so it reads as a refined
   glass edge instead of a harsh light-sweep. */
.ai-consulting__card::before{ content:""; position:absolute; inset:0;
  border-radius:inherit; padding:1px; pointer-events:none;
  background:linear-gradient(180deg, rgba(255,255,255,0.34), rgba(255,255,255,0.06) 42%,
    rgba(255,255,255,0.06) 58%, rgba(255,255,255,0.22));
  -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; }

.ai-consulting__card-title{ margin:0;
  font-family:var(--font-sf), -apple-system, system-ui, "Segoe UI", sans-serif;
  font-weight:600; font-size:15px; letter-spacing:-0.01em; line-height:1.3; color:#ffffff; }
.ai-consulting__card-sub{ margin:3px 0 0;
  font-family:var(--font-sf), -apple-system, system-ui, "Segoe UI", sans-serif;
  font-weight:400; font-size:13.5px; line-height:1.3; color:rgba(255,255,255,0.82); }

/* scatter: 3 left + 3 right of the person, clear of the face (centre 38–62%).
   Lowered so the top row clears the "AI consulting" headline above. */
.ai-consulting__card:nth-child(1){ top:40%; left:3%; }
.ai-consulting__card:nth-child(2){ top:57%; left:1%; }
.ai-consulting__card:nth-child(3){ top:74%; left:5%; }
.ai-consulting__card:nth-child(4){ top:40%; right:3%; }
.ai-consulting__card:nth-child(5){ top:57%; right:1%; }
.ai-consulting__card:nth-child(6){ top:74%; right:5%; }

/* ------------------------------------------------------------------ MOBILE:
   photo stays full-bleed on top; the 6 cards re-flow as a stacked list BELOW
   it (glass is unreadable over white, so they get a dark tinted bg). Desktop
   rules above are untouched. */
@media (max-width:640px){
  .ai-consulting__cards{ position:static; display:flex; flex-direction:column;
    gap:10px; padding:16px 16px 24px; pointer-events:auto; }
  .ai-consulting__card{ position:static; width:100%;
    background:rgba(20,22,28,0.92);
    -webkit-backdrop-filter:none; backdrop-filter:none;
    box-shadow:0 8px 24px rgba(0,0,0,0.14); }
}