/* ============================================================
   GRAPE — "Our Solutions" overview (between film & consultation)
   Premium four-pillar category teaser. Palette-only, dark ground.
   ============================================================ */
.msol{
  --ink:#231F20; --white2:#F5F5F4; --warm:rgba(255,255,255,0.62); --night:#151314;
  position:relative; background:var(--night); color:var(--white);
  padding:clamp(40px,8vw,72px) clamp(18px,5vw,40px) clamp(40px,8vw,72px);
  overflow:hidden;
}
/* Pinned room + in-panel fade are mobile-only (see media query). */
.room-stage{ display:none; }
.msol__fade{ display:none; }
.msol__room{ display:none; }
.msol__glow{
  position:absolute; inset:0; z-index:0; pointer-events:none;
  background:radial-gradient(120% 70% at 50% -8%, rgba(255,255,255,.06), transparent 60%);
}
.msol__inner{ position:relative; z-index:1; max-width:1080px; margin:0 auto; }
.msol__eyebrow{ text-shadow:0 1px 8px rgba(0,0,0,.55); }
.msol__title{ text-shadow:0 2px 22px rgba(0,0,0,.5); }
.msol__lead{ text-shadow:0 1px 12px rgba(0,0,0,.5); }

.msol__head{ max-width:54ch; margin:0 0 clamp(16px,3.2vw,26px); }
.msol__eyebrow{
  font-family:var(--font-grotesk,'Archivo',sans-serif); font-size:10px; letter-spacing:.3em;
  text-transform:uppercase; color:var(--warm);
}
.msol__title{
  font-family:var(--font-grotesk,'Archivo',sans-serif); font-weight:500;
  font-size:clamp(2rem,7.5vw,3rem); line-height:1; letter-spacing:-.01em; margin:10px 0 0;
}
.msol__lead{
  font-family:var(--font-grotesk,'Archivo',sans-serif); font-weight:300;
  font-size:clamp(.98rem,2.6vw,1.08rem); line-height:1.6; color:rgba(255,255,255,.7);
  margin:16px 0 0; max-width:46ch;
}
.msol__lead b{ color:var(--white); font-weight:500; }

/* grid of four pillar cards */
.msol__grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(10px,1.8vw,14px); }

.scard{
  position:relative; display:flex; flex-direction:column; text-decoration:none; color:inherit;
  background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.12); border-radius:20px; overflow:hidden;
  transition:transform .45s cubic-bezier(.4,0,.2,1), border-color .35s, box-shadow .45s;
}
.scard:hover{
  transform:translateY(-6px); border-color:color-mix(in srgb, var(--acc) 55%, transparent);
  box-shadow:0 28px 56px -30px rgba(0,0,0,.85), 0 0 30px -14px color-mix(in srgb, var(--acc) 60%, transparent);
}
.scard:focus-visible{ outline:2px solid color-mix(in srgb, var(--acc) 70%, transparent); outline-offset:3px; }

.scard__media{ position:relative; aspect-ratio:16/8; overflow:hidden; background:var(--ink); }
.scard__slot{ width:100%; height:100%; display:block; filter:brightness(.86) saturate(.96); transition:filter .5s, transform .8s cubic-bezier(.4,0,.2,1); }
.scard:hover .scard__slot{ filter:brightness(1.02) saturate(1.02); transform:scale(1.05); }
.scard__media::after{ content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg, transparent 40%, rgba(17,16,16,.55)); }
.scard__badge{
  position:absolute; left:14px; top:14px; z-index:2; display:inline-flex; align-items:center; gap:7px;
  font-family:var(--font-grotesk,'Archivo',sans-serif); font-size:.56rem; letter-spacing:.18em; text-transform:uppercase;
  color:#fff; background:var(--grad-warm); background-repeat:no-repeat; background-size:100% 100%; -webkit-backdrop-filter:none; backdrop-filter:none;
  border:1px solid transparent; padding:5px 10px; border-radius:999px;
}
.scard__badge .dot{ width:6px; height:6px; border-radius:50%; background:#fff; }

.scard__body{ position:relative; display:flex; flex-direction:column; flex:1; padding:clamp(13px,2.4vw,17px) clamp(14px,2.6vw,18px) clamp(13px,2.4vw,17px); }
.scard__title{
  font-family:var(--font-grotesk,'Archivo',sans-serif); font-weight:500;
  font-size:clamp(1.3rem,4.2vw,1.7rem); line-height:1.05; letter-spacing:-.01em; margin:0;
}
.scard__sentence{
  font-family:var(--font-grotesk,'Archivo',sans-serif); font-weight:300; font-size:.9rem; line-height:1.45;
  color:rgba(255,255,255,.66); margin:8px 0 0;
}
.scard__caps{ list-style:none; margin:15px 0 0; padding:0; display:flex; flex-wrap:wrap; gap:6px; }
.scard__caps li{
  font-family:var(--font-grotesk,'Archivo',sans-serif); font-size:.58rem; letter-spacing:.06em; text-transform:uppercase;
  color:rgba(255,255,255,.74); background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.1);
  padding:5px 9px; border-radius:999px;
}
.scard__foot{ display:flex; align-items:center; justify-content:space-between; margin-top:auto; padding-top:13px; }
.scard__explore{
  font-family:var(--font-grotesk,'Archivo',sans-serif); font-size:.6rem; letter-spacing:.16em; text-transform:uppercase;
  color:rgba(255,255,255,.6); transition:color .3s;
}
.scard:hover .scard__explore{ color:var(--white); }
.scard__arrow{
  width:34px; height:34px; flex:0 0 auto; border-radius:50%; display:grid; place-items:center;
  border:1px solid color-mix(in srgb, var(--acc) 45%, transparent); color:var(--acc);
  transition:background-color .35s, transform .35s cubic-bezier(.4,0,.2,1), color .35s;
}
.scard__arrow svg{ width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.scard:hover .scard__arrow{ background:var(--acc); color:var(--ink); transform:translateX(3px); }

/* primary CTA */
.msol__cta{ display:flex; justify-content:center; margin-top:clamp(16px,3vw,26px); }
.msol__btn{
  font-family:var(--font-grotesk,'Archivo',sans-serif); font-size:.7rem; letter-spacing:.18em; text-transform:uppercase;
  display:inline-flex; align-items:center; gap:12px; text-decoration:none;
  color:#fff; background:var(--grad-warm); background-repeat:no-repeat; background-size:100% 100%; border:1px solid transparent;
  padding:16px 30px; border-radius:999px;
  transition:transform .2s cubic-bezier(.4,0,.2,1), background-color .3s, color .3s, border-color .3s;
}
.msol__btn:hover{ background:var(--black); color:#fff; border-color:var(--black); }
.msol__btn:active{ transform:scale(.97); }
.msol__btn .arr{ transition:transform .3s cubic-bezier(.4,0,.2,1); }
.msol__btn:hover .arr{ transform:translateX(4px); }


@media (max-width:560px){
  /* ── One continuous cinematic scene ───────────────────────────────────
     The film's final room is held FIXED behind the page; the Solutions panel
     is transparent and rises over the SAME image. A warm top→bottom fade
     darkens the lower portion so the Four Pillars emerge from the scene —
     one room, no hard page break, no duplicated background. */
  /* Reuse the film's OWN pinned video stage as the still backdrop — no separate
     or fixed room layer. The scrub finishes early (JS), the stage holds its last
     frame in place, and the Solutions panel rises up over that real frame. */
  .mfoot{ position:relative; z-index:1; }
  /* Consultation rides ABOVE the held scene so it rises up and covers it. */
  .mc{ position:relative; z-index:20; }
  /* Same room image as a VIEWPORT-FIXED background on both the film and the
     Solutions panel → the room stays perfectly still while the film reveals and
     while ALL the Solutions content scrolls up over it. One image, one position,
     no duplicate, no hard cut. (The video covers it during the reveal; once the
     film tail and Solutions arrive, the fixed room is the continuous backdrop.) */
  .mfilm{ position:relative; z-index:0; background:#15100f; }

  /* panel is fully transparent — the FROZEN video (pinned stage) shows through */
  .msol{ position:relative; z-index:1;
    background:linear-gradient(to bottom, transparent 40%, rgb(16,16,16) 66%);
    min-height:100svh; display:block; overflow:visible; margin-top:0;
    padding:calc(120px + env(safe-area-inset-top)) 15px calc(12px + env(safe-area-inset-bottom)); }
  .msol__glow{ display:none; }
  .msol__fade{ display:none; }

  /* no static room layer anymore — the pinned <video> stage is the backdrop */
  .msol__room{ display:none; }

  /* content sits over the frozen video; a frosted dark veil rides behind the
     text + cards (only) for legibility, blurring the video where they overlap */
  .msol__inner{ position:relative; z-index:1; display:block; margin:0; padding:0; }
  .msol__inner::before{ content:""; position:absolute; z-index:-1;
    left:-15px; right:-15px; top:-26px; bottom:-3vh;
    background:linear-gradient(to bottom, rgba(24,24,24,.35) 0%, rgba(22,22,22,.5) 45%, rgba(18,18,18,.85) 80%, rgb(16,16,16) 100%);
    -webkit-backdrop-filter:blur(7px) saturate(1.0); backdrop-filter:blur(7px) saturate(1.0);
    -webkit-mask-image:linear-gradient(180deg, transparent 0%, #000 15%);
    mask-image:linear-gradient(180deg, transparent 0%, #000 15%); }

  /* ===== Consultation rides over the SAME held film frame (no purple) ===== */
  /* Transparent panel → the pinned film stage (frozen final frame) shows through,
     continuous with the Solutions scene above. Rises up over it exactly like .msol. */
  .mc{ background:transparent !important; overflow:visible !important; }
  .mc__glow{ display:none !important; }
  .mc__inner{ position:relative; z-index:1; }
  /* Full-section frosted backdrop over the pinned film frame — same room as Solutions,
     blurred DEEPER (11px vs 3px) and DIMMER (.66 wash). Covers the whole section top to
     bottom; only a soft fade-IN at the very top (seamless from Solutions), no bottom fade. */
  .mc::before{ content:""; position:absolute; z-index:0; left:0; right:0; top:0; bottom:0; pointer-events:none;
    background:linear-gradient(to bottom, rgb(16,16,16) 0%, rgb(16,16,16) 24%, rgb(12,12,12) 55%, rgb(7,7,7) 100%); }
  /* legibility over the blurred room */
  .mc__eyebrow{ text-shadow:0 1px 8px rgba(0,0,0,.55); }
  .cj__intro .mc__title{ text-shadow:0 2px 22px rgba(0,0,0,.5); }
  .cj__beginq{ text-shadow:0 2px 18px rgba(0,0,0,.5); }
  .cj__reassure{ text-shadow:0 1px 10px rgba(0,0,0,.5); }

  .msol__head{ margin:0 0 16px; }
  .msol__eyebrow{ font-size:9px; letter-spacing:.26em; }
  .msol__title{ font-size:2.05rem; margin:5px 0 0; }
  .msol__lead{ font-size:.82rem; line-height:1.45; margin:9px 0 0; max-width:44ch;
    display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }

  .msol__grid{ grid-template-columns:1fr 1fr; gap:16px; }
  /* glassmorphism cards rising from the scene */
  .scard{ border-radius:16px;
    background:linear-gradient(180deg, rgba(36,33,34,.46), rgba(17,15,16,.52));
    -webkit-backdrop-filter:blur(11px) saturate(1.05); backdrop-filter:blur(11px) saturate(1.05);
    border:1px solid rgba(255,255,255,.18); box-shadow:0 20px 44px -24px rgba(0,0,0,.9); }
  .scard__media{ aspect-ratio:4/3; }
  .scard__body{ padding:13px 13px 15px; }
  .scard__title{ font-size:1rem; line-height:1.06; }
  .scard__sentence{ font-size:.74rem; line-height:1.34; margin:4px 0 0;
    display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
  .scard__foot{ display:none; }
  .scard__badge{ font-size:.46rem; letter-spacing:.1em; padding:3px 7px; top:9px; left:9px; }

  .msol__cta{ margin-top:22px; }
  .msol__btn{ padding:13px 24px; font-size:.64rem; }
  .msol__cue{ margin-top:22px; }
  .msol__cue .mhero__rule{ max-width:320px; }
}
@media (prefers-reduced-motion:reduce){
  .scard,.scard__slot,.scard__arrow,.msol__btn,.msol__btn .arr{ transition:none; }
}


/* ============================================================
   RESET — restore original transparent frosted transition
   Supersedes solid grey/dark background layers added this session.
   Both .msol and .mc are transparent frosted panels over the film.
   ============================================================ */
@media (max-width:560px){
  .msol{ background:transparent !important; }
  .msol__inner::before{
    background:linear-gradient(to bottom, rgba(24,24,24,.35) 0%, rgba(20,20,20,.55) 40%, rgb(14,14,14) 72%, rgb(10,10,10) 100%) !important;
    -webkit-backdrop-filter:blur(3px) saturate(1.02) !important;
    backdrop-filter:blur(3px) saturate(1.02) !important;
    -webkit-mask-image:linear-gradient(180deg, transparent 0%, #000 15%) !important;
    mask-image:linear-gradient(180deg, transparent 0%, #000 15%) !important;
  }
  .mc{ background:transparent !important; overflow:visible !important; }
  .mc__glow{ display:none !important; }
  .mc::before{
    content:"" !important; position:absolute !important; z-index:0 !important; inset:0 !important; pointer-events:none !important;
    background:linear-gradient(to bottom, rgb(10,10,10) 0%, rgb(6,6,6) 50%, rgb(2,2,2) 100%) !important;
    -webkit-backdrop-filter:none !important;
    backdrop-filter:none !important;
    -webkit-mask-image:none !important;
    mask-image:none !important;
  }
  .mc::after{ top:0 !important; bottom:0 !important; }
}