/* ==========================================================================
   MEENA DIGI SOLUTIONS — Pillar pages (shared)
   Loaded after style.css + about.css + services.css. Adds only the
   pillar-specific components: visible breadcrumbs, big-claim band,
   audience grid, deliverable chips and the outcome strip.
   ========================================================================== */

/* ---------- Visible breadcrumb (matches BreadcrumbList schema) ----------
   Lives INSIDE the hero, floating over its background just under the
   fixed nav — so the hero gradient/canvas runs to the very top edge. */
.crumbs{
  position:absolute; top:104px; left:50%; transform:translateX(-50%);
  width:var(--container);
  font-size:0.8rem; letter-spacing:0.06em; color:var(--text-faint);
  z-index:3; pointer-events:auto;
}
.crumbs a{ color:var(--text-dim); transition:color .3s var(--ease); }
.crumbs a:hover{ color:var(--accent); }
.crumbs span[aria-current]{ color:var(--accent); }
.crumbs .crumb-sep{ margin:0 8px; opacity:0.5; }

/* pillar hero — full-bleed like the homepage hero */
.pl-hero{ min-height:92vh; }

/* ---------- Big-claim band — one oversized statement ---------- */
.pl-claim{
  width:var(--container); margin-inline:auto;
  padding:clamp(64px, 11vw, 120px) 0;
  border-top:1px solid var(--border);
}
.pl-claim .storyfill{ max-width:40ch; }

/* ---------- Audience grid ---------- */
.pl-aud-grid{
  margin-top:48px; display:grid; grid-template-columns:repeat(3, 1fr); gap:18px;
}
.pl-aud{
  padding:28px 26px; border-radius:var(--radius);
  background:var(--surface); border:1px solid var(--border);
}
.pl-aud h3{
  font-family:var(--font-display); font-weight:700; text-transform:uppercase;
  font-size:1.02rem;
}
.pl-aud p{ margin-top:10px; color:var(--text-dim); font-size:0.95rem; }
.pl-aud .pl-aud-tag{
  display:inline-block; margin-bottom:14px;
  font-size:0.7rem; font-weight:600; letter-spacing:0.16em; text-transform:uppercase;
  color:var(--accent);
}

/* ---------- Deliverable chips ---------- */
.pl-chips{ margin-top:18px; display:flex; flex-wrap:wrap; gap:8px; }
.pl-chip{
  padding:7px 14px; border-radius:100px; border:1px solid var(--border);
  font-size:0.78rem; font-weight:600; letter-spacing:0.05em;
  color:var(--text-dim); background:var(--glass);
}

/* ---------- Outcome strip ---------- */
.pl-outcomes{
  width:var(--container); margin-inline:auto;
  padding:clamp(56px, 9vw, 100px) 0;
  display:grid; grid-template-columns:repeat(3, 1fr); gap:18px;
  border-top:1px solid var(--border);
}
.pl-outcome h3{
  font-family:var(--font-display); font-weight:700; font-size:clamp(1.6rem, 3vw, 2.4rem);
  color:var(--accent); text-transform:uppercase;
}
.pl-outcome p{ margin-top:10px; color:var(--text-dim); font-size:0.95rem; max-width:30ch; }

/* ---------- Cross-pillar links ---------- */
.pl-next{
  width:var(--container); margin-inline:auto;
  padding:clamp(48px, 8vw, 80px) 0;
  display:grid; grid-template-columns:1fr 1fr; gap:18px;
  border-top:1px solid var(--border);
}
.pl-next a{
  padding:30px 32px; border-radius:var(--radius);
  background:var(--surface); border:1px solid var(--border);
  transition:border-color .35s var(--ease), transform .35s var(--ease);
}
.pl-next a:hover{ border-color:var(--accent); transform:translateY(-3px); }
.pl-next .pl-next-label{
  font-size:0.72rem; font-weight:600; letter-spacing:0.16em; text-transform:uppercase;
  color:var(--text-faint);
}
.pl-next h3{
  margin-top:10px; font-family:var(--font-display); font-weight:700;
  text-transform:uppercase; font-size:1.2rem;
}
.pl-next h3 span{ color:var(--accent); }

@media (max-width:900px){
  .pl-aud-grid, .pl-outcomes{ grid-template-columns:1fr; }
  .pl-next{ grid-template-columns:1fr; }
  .crumbs{ top:92px; }
}

/* ==========================================================================
   Digital Marketing — bespoke interactive scenes (see js/dm-visuals.js)
   ========================================================================== */

/* SEO — the climb to #1 (search bar, result rows, cursor lens) */
.seo-box{
  fill:none; stroke:var(--accent); stroke-width:1.1px; opacity:0.45;
  vector-effect:non-scaling-stroke;
}
.seo-searchbar{ opacity:0.75; stroke-width:1.4px; }
.seo-mag-icon{
  fill:none; stroke:var(--accent); stroke-width:1.4px; opacity:0.75;
  stroke-linecap:round; vector-effect:non-scaling-stroke;
}
.seo-query{
  stroke:var(--accent); stroke-width:1.2px; opacity:0.4; stroke-linecap:round;
  vector-effect:non-scaling-stroke;
}
.seo-line{
  stroke:var(--accent); stroke-width:1px; opacity:0.32; stroke-linecap:round;
  vector-effect:non-scaling-stroke;
}
.seo-line-sub{ opacity:0.16; }
.seo-you .seo-box{ opacity:0.95; stroke-width:1.5px; }
.seo-you .seo-line{ opacity:0.6; }
.seo-lens{ opacity:0; }
.seo-lens circle, .seo-lens line{
  fill:none; stroke:var(--accent); stroke-width:1.4px;
  stroke-linecap:round; vector-effect:non-scaling-stroke;
}

/* AEO/GEO — question → AI spark → the one answer, citing you */
.aeo-box{
  fill:none; stroke:var(--accent); stroke-width:1.2px; opacity:0.55;
  vector-effect:non-scaling-stroke;
}
.aeo-star{
  fill:var(--accent); fill-opacity:0.14;
  stroke:var(--accent); stroke-width:1.1px;
  vector-effect:non-scaling-stroke;
}
.aeo-star-mini{ fill-opacity:0.1; }
.aeo-chip{
  fill:var(--accent); fill-opacity:0.08;
  stroke:var(--accent); stroke-width:1.2px;
  vector-effect:non-scaling-stroke;
}
.dm-spark{ fill:var(--accent); opacity:0; }

/* Social — feed frame, posts, reactions */
.sm-frame, .sm-post{
  fill:none; stroke:var(--accent); stroke-width:1.1px; opacity:0.5;
  vector-effect:non-scaling-stroke;
}
.sm-frame{ opacity:0.75; stroke-width:1.4px; }
.sm-avatar{ fill:var(--accent); opacity:0.4; }
.sm-post-line{
  stroke:var(--accent); stroke-width:1px; opacity:0.28; stroke-linecap:round;
  vector-effect:non-scaling-stroke;
}
.dm-heart{ fill:var(--warm); opacity:0; }
.dm-heart-mini{ opacity:0; }
.dm-thumb{
  fill:none; stroke:var(--accent); stroke-width:1.4px;
  stroke-linecap:round; stroke-linejoin:round; vector-effect:non-scaling-stroke;
}
.dm-thumb-g{ opacity:0; }

/* Performance — coin and growth bars */
.pm-coin{ fill:var(--action); }
.pm-coin-mark path{
  fill:none; stroke:#0A0A0B; stroke-width:1.7px;
  stroke-linecap:round; stroke-linejoin:round;
}
.dm-bar{
  fill:var(--accent); fill-opacity:0.12;
  stroke:var(--accent); stroke-width:1px;
  vector-effect:non-scaling-stroke;
}

/* ==========================================================================
   Design pillar — bespoke interactive scenes (see js/design-visuals.js)
   ========================================================================== */
.ds-box{
  fill:none; stroke:var(--accent); stroke-width:1.1px; opacity:0.45;
  vector-effect:non-scaling-stroke;
}
.ds-frame{ opacity:0.75; stroke-width:1.4px; }
.ds-block{
  fill:var(--accent); fill-opacity:0.06;
  stroke:var(--accent); stroke-width:1.1px; opacity:0.7;
  vector-effect:non-scaling-stroke;
}
.ds-line{
  stroke:var(--accent); stroke-width:1px; opacity:0.32; stroke-linecap:round;
  vector-effect:non-scaling-stroke;
}
.ds-line-sub{ opacity:0.16; }
.ds-avatar{ fill:var(--accent); opacity:0.4; }
.ds-guide{
  stroke:var(--accent); stroke-width:0.7px; opacity:0.14; fill:none;
  vector-effect:non-scaling-stroke;
}
.ds-guide-dash{ stroke-dasharray:2 7; }
.ds-cta{
  fill:var(--action); fill-opacity:0.85; stroke:none;
}
.ds-cta-label{
  stroke:#0A0A0B; stroke-width:1.6px; stroke-linecap:round; opacity:0.8;
  vector-effect:non-scaling-stroke;
}
.ds-click{
  fill:none; stroke:var(--action); stroke-width:1.4px; opacity:0;
  vector-effect:non-scaling-stroke;
}
.ds-handles{ opacity:0; }
.ds-handles path{
  fill:none; stroke:var(--accent); stroke-width:1.6px;
  stroke-linecap:round; vector-effect:non-scaling-stroke;
}
.ds-prim{
  fill:var(--accent); fill-opacity:0.1;
  stroke:var(--accent); stroke-width:1.2px;
  vector-effect:non-scaling-stroke;
}
.ds-ad{
  fill:var(--accent); fill-opacity:0.08;
  stroke:var(--accent); stroke-width:1.5px; opacity:0.95;
  vector-effect:non-scaling-stroke;
}
.ds-tick{
  stroke:var(--accent); stroke-width:1.3px; opacity:0.5; stroke-linecap:round;
  vector-effect:non-scaling-stroke;
}

/* ==========================================================================
   Web Development pillar — bespoke scenes (see js/wd-visuals.js)
   ========================================================================== */
.wd-code{
  stroke:var(--accent); stroke-width:1.6px; opacity:0.35; stroke-linecap:round;
  vector-effect:non-scaling-stroke;
}
.wd-code-lit{ opacity:0.6; }
.wd-code-faint{ opacity:0.14; }
.wd-beam{
  stroke:var(--action); stroke-width:1.6px; opacity:0;
  vector-effect:non-scaling-stroke;
}
.wd-gauge-track{
  fill:none; stroke:var(--accent); stroke-width:1px; opacity:0.2;
  vector-effect:non-scaling-stroke;
}
.wd-gauge-fill{
  fill:none; stroke:var(--accent); stroke-width:1.8px; opacity:0.9;
  stroke-linecap:round; vector-effect:non-scaling-stroke;
}
.wd-cart{
  fill:none; stroke:var(--accent); stroke-width:1.5px; opacity:0.8;
  stroke-linecap:round; stroke-linejoin:round; vector-effect:non-scaling-stroke;
}
.wd-flight{ fill:none; stroke:none; }
.wd-item{ fill:var(--action); opacity:0; }
.wd-check{
  fill:none; stroke:var(--action); stroke-width:2px;
  stroke-linecap:round; stroke-linejoin:round; vector-effect:non-scaling-stroke;
}
.wd-checkring{
  fill:none; stroke:var(--accent); stroke-width:1.1px; opacity:0.5;
  vector-effect:non-scaling-stroke;
}
.wd-stream{
  fill:none; stroke:var(--accent); stroke-width:0.8px; opacity:0.22;
  stroke-dasharray:2 6; vector-effect:non-scaling-stroke;
}
.wd-visitor{ fill:var(--accent); opacity:0.7; }
.wd-ring{
  fill:none; stroke:var(--action); stroke-width:1.4px; opacity:0;
  vector-effect:non-scaling-stroke;
}
.wd-metric-track{
  fill:none; stroke:var(--accent); stroke-width:1px; opacity:0.25;
  vector-effect:non-scaling-stroke;
}
.wd-metric-fill{ fill:var(--action); fill-opacity:0.7; stroke:none; }
.ec-prod{ cursor:default; }

@media (prefers-reduced-motion: reduce){
  .dm-thumb-g{ opacity:0.55; }
  .dm-heart{ opacity:1; }
  .wd-item{ opacity:0; }
}