/* ═══════════════════════════════════════════════════════════════════
   /portfolio/ — Client Stories. Editorial layout matching the About
   and Partners pages (navy section eyebrows, gold accents, dusty-rose
   primary, navy stats band). The featured testimonial grid is the
   page's heart — six varied stories across services and stages.

   Scoped to .portfolio-preview so styles don't leak to other pages.
   ═══════════════════════════════════════════════════════════════════ */

main:has(.portfolio-preview){
  background:var(--bg);
  max-width:none;
  padding:0;
  width:100%;
}
.portfolio-preview{
  --portfolio-max: 1400px;
  font-family:var(--sans);
  color:var(--ink);
  line-height:1.6;
  overflow-x:clip;
}
.portfolio-preview > section{
  padding:5rem max(2rem, calc((100vw - var(--portfolio-max)) / 2));
  position:relative;
  margin:0;
}
@media (max-width:720px){
  .portfolio-preview > section{padding:3rem 1rem}
}

/* Section heads (eyebrow + h2) — same scale as About */
.portfolio-preview .bmb-section-head{
  text-align:center;
  margin-bottom:3rem;
  max-width:60ch;
  margin-left:auto;
  margin-right:auto;
}
.portfolio-preview .bmb-section-head .bmb-eyebrow{
  display:flex;
  justify-content:center;
  width:fit-content;
  margin:0 auto 1.25rem;
  font-family:var(--sans);
  font-size:clamp(1.7rem, 2.8vw, 2.4rem);
  font-weight:700;
  letter-spacing:.22em;
  color:var(--navy);
  text-transform:uppercase;
}
.portfolio-preview .bmb-section-head h2{
  font-family:var(--font-display, var(--serif));
  font-size:clamp(1.8rem, 3vw, 2.6rem);
  font-weight:500;
  color:var(--ink);
  letter-spacing:-.015em;
  line-height:1.15;
  margin:0;
}

/* ═══ HERO ═══════════════════════════════════════════════════════ */
.portfolio-preview .portfolio-hero{
  padding-top:6rem;
  padding-bottom:4rem;
  text-align:center;
  position:relative;
  overflow:hidden;
}
.portfolio-preview .portfolio-hero::before{
  /* Soft rose ambient blob top-left */
  content:"";
  position:absolute;
  top:-25%;
  left:-10%;
  width:55%;
  height:120%;
  background:radial-gradient(circle, rgba(170, 127, 134, 0.30) 0%, rgba(170, 127, 134, 0) 65%);
  filter:blur(120px);
  pointer-events:none;
  z-index:0;
  animation:portfolioAmbientA 24s ease-in-out infinite;
}
.portfolio-preview .portfolio-hero::after{
  /* Soft gold blob bottom-right */
  content:"";
  position:absolute;
  bottom:-30%;
  right:-15%;
  width:55%;
  height:120%;
  background:radial-gradient(circle, rgba(179, 149, 85, 0.28) 0%, rgba(179, 149, 85, 0) 65%);
  filter:blur(120px);
  pointer-events:none;
  z-index:0;
  animation:portfolioAmbientB 28s ease-in-out infinite;
}
@keyframes portfolioAmbientA{
  0%, 100% {transform:translate(0,0) scale(1)}
  50%      {transform:translate(40px,20px) scale(1.05)}
}
@keyframes portfolioAmbientB{
  0%, 100% {transform:translate(0,0) scale(1)}
  50%      {transform:translate(-40px,-30px) scale(1.06)}
}
@media (prefers-reduced-motion:reduce){
  .portfolio-preview .portfolio-hero::before,
  .portfolio-preview .portfolio-hero::after{animation:none}
}
.portfolio-preview .portfolio-hero-inner{
  position:relative;
  z-index:1;
  max-width:760px;
  margin:0 auto;
}
.portfolio-preview .portfolio-hero-eyebrow{
  display:inline-flex;
  font-family:var(--sans);
  font-size:.95rem;
  font-weight:700;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--navy);
  gap:14px;
  align-items:center;
  margin:0 auto 1.5rem;
  justify-content:center;
}
.portfolio-preview .portfolio-hero-eyebrow::before,
.portfolio-preview .portfolio-hero-eyebrow::after{
  content:"";
  width:38px;
  height:1px;
  background:var(--gold);
}
.portfolio-preview .portfolio-hero-display{
  font-family:var(--font-display, var(--serif));
  font-size:clamp(2.2rem, 4.5vw, 3.6rem);
  font-weight:500;
  line-height:1.05;
  letter-spacing:-.02em;
  color:var(--ink);
  margin:0 auto 1.2rem;
  max-width:18ch;
}
.portfolio-preview .portfolio-hero-display em{
  font-style:italic;
  color:var(--brand);
  font-weight:500;
}
/* H1 is locked "Client Stories" — kept visually quiet as a small caps
   subtitle below the display. */
.portfolio-preview .portfolio-hero-h1{
  font-family:var(--sans);
  font-size:.85rem;
  font-weight:600;
  letter-spacing:.3em;
  color:var(--muted);
  text-transform:uppercase;
  margin:0 0 1.5rem;
}
.portfolio-preview .portfolio-hero-lead{
  font-size:1.08rem;
  line-height:1.7;
  color:var(--ink-2);
  max-width:60ch;
  margin:0 auto;
}

/* ═══ STATS BAND (mini trust band) ════════════════════════════════ */
.portfolio-preview .portfolio-stats{
  background:linear-gradient(180deg, rgba(13, 44, 84, 0.97), rgba(13, 44, 84, 0.93));
  position:relative;
  overflow:hidden;
}
.portfolio-preview .portfolio-stats::before{
  content:"";
  position:absolute;
  top:50%;
  left:50%;
  width:80%;
  height:120%;
  transform:translate(-50%,-50%);
  background:radial-gradient(ellipse, rgba(179, 149, 85, 0.10) 0%, transparent 65%);
  filter:blur(60px);
  pointer-events:none;
}
.portfolio-preview .portfolio-stats-grid{
  list-style:none;
  margin:0 auto;
  padding:0;
  max-width:var(--portfolio-max);
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:2rem;
  position:relative;
  z-index:1;
}
.portfolio-preview .portfolio-stats-grid li{
  text-align:center;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:.5rem;
  padding:1.2rem 1rem;
  position:relative;
}
.portfolio-preview .portfolio-stats-grid li:not(:last-child)::after{
  content:"";
  position:absolute;
  top:25%;
  right:-1rem;
  width:1px;
  height:50%;
  background:linear-gradient(180deg, transparent, rgba(179, 149, 85, 0.35), transparent);
}
.portfolio-preview .portfolio-stat-num{
  font-family:var(--serif);
  font-size:clamp(2.4rem, 4.5vw, 3.4rem);
  font-weight:500;
  line-height:1;
  background:linear-gradient(115deg, #b39555 0%, #f4e5b8 28%, #ffffff 42%, #f4e5b8 55%, #b39555 88%);
  background-size:220% 100%;
  background-position:0% 50%;
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  color:transparent;
  letter-spacing:-.01em;
}
.portfolio-preview .portfolio-stat-suffix{
  font-size:.65em;
  margin-left:.15em;
  vertical-align:.15em;
  color:#f4e5b8;
  -webkit-text-fill-color:#f4e5b8;
}
.portfolio-preview .portfolio-stat-label{
  font-family:var(--sans);
  font-size:.78rem;
  font-weight:600;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:rgba(244, 229, 184, 0.88);
}
@media (max-width:900px){
  .portfolio-preview .portfolio-stats-grid{grid-template-columns:repeat(2, 1fr);gap:1.4rem}
  .portfolio-preview .portfolio-stats-grid li:not(:last-child)::after{display:none}
}

/* ═══ FEATURED TESTIMONIALS ══════════════════════════════════════ */
.portfolio-preview .portfolio-stories-lead{
  font-family:var(--serif);
  font-style:italic;
  font-size:1.05rem;
  line-height:1.55;
  color:var(--muted);
  margin:.8rem auto 0;
  max-width:60ch;
}
.portfolio-preview .portfolio-stories-grid{
  list-style:none;
  margin:0 auto;
  padding:0;
  max-width:var(--portfolio-max);
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:1.6rem;
}
.portfolio-preview .portfolio-story{
  display:flex;
  flex-direction:column;
  padding:2rem 1.8rem;
  background:rgba(255, 250, 248, 0.55);
  border:1px solid rgba(179, 149, 85, 0.18);
  border-radius:20px;
  position:relative;
  transition:transform .35s cubic-bezier(.2,.7,.2,1),
             box-shadow .35s ease,
             border-color .35s ease,
             background .35s ease;
}
.portfolio-preview .portfolio-story::before{
  /* Decorative quote mark */
  content:"\201C";
  position:absolute;
  top:.6rem;
  right:1.4rem;
  font-family:var(--serif);
  font-size:5rem;
  line-height:1;
  color:var(--gold);
  opacity:.25;
  pointer-events:none;
}
.portfolio-preview .portfolio-story:hover{
  transform:translateY(-4px);
  border-color:rgba(179, 149, 85, 0.40);
  background:rgba(255, 252, 250, 0.92);
  box-shadow:0 16px 36px -16px rgba(179, 149, 85, 0.22);
}
.portfolio-preview .portfolio-story-meta{
  display:flex;
  align-items:center;
  gap:.9rem;
  margin-bottom:1.1rem;
  position:relative;
  z-index:1;
}
.portfolio-preview .portfolio-story-stars{
  font-size:.85rem;
  letter-spacing:.18em;
  color:var(--gold);
  line-height:1;
}
.portfolio-preview .portfolio-story-tag{
  font-family:var(--sans);
  font-size:.68rem;
  font-weight:700;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--navy);
  padding:.25rem .65rem;
  background:rgba(13, 44, 84, 0.06);
  border-radius:999px;
}
.portfolio-preview .portfolio-story blockquote{
  /* Sans-serif body for readability — italic serif at this size on
     a cream card was muddy. Single-quote framing keeps the editorial
     feel without compromising legibility. */
  font-family:var(--sans);
  font-size:1.02rem;
  line-height:1.65;
  color:#1f1f1f;
  font-weight:400;
  margin:0 0 1.5rem;
  padding:0;
  border:0;
  flex-grow:1;
  position:relative;
  z-index:1;
}
.portfolio-preview .portfolio-story blockquote::before{
  content:"\201C";
}
.portfolio-preview .portfolio-story blockquote::after{
  content:"\201D";
}
.portfolio-preview .portfolio-story footer{
  border-top:1px solid rgba(179, 149, 85, 0.18);
  padding-top:1rem;
  position:relative;
  z-index:1;
}
.portfolio-preview .portfolio-story-name{
  font-family:var(--sans);
  font-size:.98rem;
  font-weight:600;
  color:var(--ink);
  margin:0 0 .25rem;
  letter-spacing:.005em;
}
.portfolio-preview .portfolio-story-role{
  font-family:var(--sans);
  font-size:.78rem;
  font-weight:500;
  letter-spacing:.06em;
  color:var(--muted);
  margin:0;
  text-transform:uppercase;
}
@media (max-width:980px){
  .portfolio-preview .portfolio-stories-grid{grid-template-columns:repeat(2, 1fr)}
}
@media (max-width:680px){
  .portfolio-preview .portfolio-stories-grid{grid-template-columns:1fr}
}

/* ═══ REVIEW PLATFORMS ═══════════════════════════════════════════ */
.portfolio-preview .portfolio-platforms-lead{
  font-family:var(--serif);
  font-style:italic;
  font-size:1.05rem;
  line-height:1.55;
  color:var(--muted);
  margin:.8rem auto 0;
  max-width:56ch;
}
.portfolio-preview .portfolio-platforms-grid{
  list-style:none;
  margin:0 auto;
  padding:0;
  max-width:var(--portfolio-max);
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:1.4rem;
}
.portfolio-preview .portfolio-platform a{
  display:flex;
  flex-direction:column;
  gap:.4rem;
  padding:1.8rem 1.4rem;
  background:rgba(255, 250, 248, 0.55);
  border:1px solid rgba(179, 149, 85, 0.18);
  border-radius:18px;
  text-decoration:none;
  color:var(--ink);
  height:100%;
  transition:transform .3s ease, border-color .3s ease, box-shadow .3s ease, background .3s ease;
}
.portfolio-preview .portfolio-platform a:hover{
  transform:translateY(-3px);
  border-color:var(--gold);
  background:rgba(255, 252, 250, 0.92);
  box-shadow:0 14px 34px -16px rgba(179, 149, 85, 0.28);
}
.portfolio-preview .portfolio-platform-label{
  font-family:var(--font-display, var(--serif));
  font-size:1.4rem;
  font-weight:500;
  color:var(--ink);
  letter-spacing:-.01em;
  line-height:1.1;
}
.portfolio-preview .portfolio-platform-detail{
  font-family:var(--sans);
  font-size:.88rem;
  color:var(--ink-2);
  line-height:1.45;
  margin-bottom:.7rem;
}
.portfolio-preview .portfolio-platform-cta{
  font-family:var(--sans);
  font-size:.78rem;
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--brand-dk);
  margin-top:auto;
  transition:color .25s ease;
}
.portfolio-preview .portfolio-platform a:hover .portfolio-platform-cta{
  color:var(--brand);
}
@media (max-width:900px){
  .portfolio-preview .portfolio-platforms-grid{grid-template-columns:repeat(2, 1fr)}
}
@media (max-width:560px){
  .portfolio-preview .portfolio-platforms-grid{grid-template-columns:1fr}
}

/* ═══ PRESS / AS FEATURED IN ═════════════════════════════════════ */
.portfolio-preview .portfolio-press{
  background:linear-gradient(180deg, rgba(244, 232, 218, 0.30), rgba(247, 240, 240, 0.45));
}
.portfolio-preview .portfolio-press-grid{
  list-style:none;
  margin:0 auto 2.5rem;
  padding:0;
  max-width:980px;
  display:flex;
  justify-content:center;
  align-items:center;
  flex-wrap:wrap;
  gap:.5rem 2.5rem;
}
.portfolio-preview .portfolio-press-grid li{
  font-family:var(--font-display, var(--serif));
  font-size:clamp(1.05rem, 1.6vw, 1.3rem);
  font-style:italic;
  font-weight:500;
  color:var(--ink);
  letter-spacing:.02em;
  padding:.6rem 1rem;
  position:relative;
}
.portfolio-preview .portfolio-press-grid li:not(:last-child)::after{
  content:"\b7";
  position:absolute;
  right:-1.3rem;
  top:50%;
  transform:translateY(-50%);
  color:var(--gold);
  font-size:1.4rem;
  opacity:.6;
}
.portfolio-preview .portfolio-press-partners{
  text-align:center;
  font-size:1rem;
  line-height:1.6;
  color:var(--ink-2);
  max-width:60ch;
  margin:0 auto;
}
.portfolio-preview .portfolio-press-partners strong{
  color:var(--navy);
  font-weight:600;
}

/* ═══ FINAL CTA ══════════════════════════════════════════════════ */
.portfolio-preview .portfolio-cta{
  text-align:center;
  padding-top:6rem;
  padding-bottom:6rem;
  background:linear-gradient(180deg, rgba(244, 232, 218, 0.45), rgba(247, 240, 240, 0.85));
  position:relative;
  overflow:hidden;
}
.portfolio-preview .portfolio-cta::before{
  content:"";
  position:absolute;
  top:50%;
  left:50%;
  width:65vw;
  height:65vw;
  max-width:900px;
  max-height:900px;
  transform:translate(-50%,-50%);
  background:radial-gradient(circle, rgba(179, 149, 85, 0.20) 0%, rgba(179, 149, 85, 0) 60%);
  filter:blur(80px);
  pointer-events:none;
  z-index:0;
}
.portfolio-preview .portfolio-cta-inner{
  position:relative;
  z-index:1;
  max-width:60ch;
  margin:0 auto;
}
.portfolio-preview .portfolio-cta .bmb-eyebrow{
  display:inline-flex;
  font-family:var(--sans);
  font-size:.95rem;
  font-weight:700;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--navy);
  gap:14px;
  align-items:center;
  margin:0 auto 1.5rem;
  justify-content:center;
}
.portfolio-preview .portfolio-cta .bmb-eyebrow::before,
.portfolio-preview .portfolio-cta .bmb-eyebrow::after{
  content:"";
  width:36px;
  height:1px;
  background:var(--gold);
}
.portfolio-preview .portfolio-cta h2{
  font-family:var(--font-display, var(--serif));
  font-size:clamp(1.8rem, 3.4vw, 2.8rem);
  font-weight:500;
  color:var(--ink);
  letter-spacing:-.015em;
  line-height:1.1;
  margin:0 0 1.2rem;
}
.portfolio-preview .portfolio-cta p{
  font-size:1.05rem;
  line-height:1.65;
  color:var(--ink-2);
  margin:0 0 2rem;
}
.portfolio-preview .portfolio-cta-actions{
  display:flex;
  gap:1rem;
  justify-content:center;
  flex-wrap:wrap;
}
.portfolio-preview .portfolio-cta .bmb-cta{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:.95rem 2.2rem;
  border-radius:999px;
  font-family:var(--sans);
  font-size:1.02rem;
  font-weight:600;
  letter-spacing:.01em;
  text-decoration:none;
  transition:transform .25s ease, box-shadow .25s ease, background .25s ease, color .25s ease;
}
.portfolio-preview .portfolio-cta .bmb-cta--primary{
  background:linear-gradient(180deg, var(--brand) 0%, var(--brand-dk) 100%);
  color:#fff;
  box-shadow:0 8px 24px -6px rgba(170, 127, 134, 0.55),
             0 16px 44px -10px rgba(143, 110, 105, 0.35);
}
.portfolio-preview .portfolio-cta .bmb-cta--primary:hover{
  transform:translateY(-2px) scale(1.025);
  box-shadow:0 12px 32px -6px rgba(170, 127, 134, 0.75),
             0 20px 52px -10px rgba(143, 110, 105, 0.45);
}
.portfolio-preview .portfolio-cta .bmb-cta--ghost{
  background:transparent;
  color:var(--ink);
  border:1px solid rgba(170, 127, 134, 0.4);
}
.portfolio-preview .portfolio-cta .bmb-cta--ghost:hover{
  background:rgba(170, 127, 134, 0.08);
  color:var(--brand-dk);
  border-color:var(--brand);
}