/* ═══════════════════════════════════════
   ECHO — strategy-sub.css (services/brand-strategy.html, demand-generation.html)
   Compact page: positioning-map hero, four signs, deliverables beside a
   strategy document that fills as you read, a four-week track.
   Start states live under html.js + no-preference; JS/brand-strategy.js
   adds .is-in. No-JS / reduced motion: final state.
   ═══════════════════════════════════════ */
.bsx-signs, .bsx-getsec, .bsx-weeksec { padding: clamp(3.5rem, 7vw, 6rem) 0; }
.bsx-signs .section-title, .bsx-getsec .section-title, .bsx-weeksec .section-title { margin-bottom: 2rem; }

/* ── Hero: competitors cluster at 'generic'; you travel out to 'distinct' ── */
.bsx-map {
  position: relative;
  height: 250px;
  border-left: 1px solid rgba(30,16,64,0.14);
  border-bottom: 1px solid rgba(30,16,64,0.14);
  border-radius: 0 0 0 12px;
  background:
    linear-gradient(90deg, rgba(30,16,64,0.05) 1px, transparent 1px),
    linear-gradient(0deg, rgba(30,16,64,0.05) 1px, transparent 1px);
  background-size: 25% 25%;
}
.bsx-map__ax { position: absolute; font-family: 'DM Mono', monospace; font-size: 0.58rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted); }
.bsx-map__ax--x { right: 0.6rem; bottom: 0.5rem; }
.bsx-map__ax--y { left: 0.6rem; top: 0.6rem; }
.bsx-dot { position: absolute; width: 10px; height: 10px; margin: -5px; border-radius: 50%; background: rgba(30,16,64,0.22); }
.bsx-dot.c1 { left: 22%; top: 66%; } .bsx-dot.c2 { left: 29%; top: 74%; } .bsx-dot.c3 { left: 18%; top: 76%; }
.bsx-dot.c4 { left: 31%; top: 64%; } .bsx-dot.c5 { left: 25%; top: 80%; }
.bsx-map__path { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.bsx-map__path path { fill: none; stroke: var(--page-accent); stroke-width: 1.4; stroke-dasharray: 0.02 0.02; vector-effect: non-scaling-stroke; opacity: 0.55; }
.bsx-you {
  position: absolute; left: 78%; top: 24%;
  width: 18px; height: 18px; margin: -9px;
  border-radius: 50%;
  background: var(--page-accent);
  box-shadow: 0 0 0 10px color-mix(in srgb, var(--page-accent) 14%, transparent);
}
.bsx-you b { position: absolute; left: 50%; bottom: calc(100% + 12px); transform: translateX(-50%); font-family: 'DM Mono', monospace; font-size: 0.6rem; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--page-accent); }
.bsx-you i { position: absolute; inset: 0; border-radius: 50%; border: 1px solid var(--page-accent); opacity: 0; }
@media (prefers-reduced-motion: no-preference) {
  .bsx-you { animation: bsxTravel 6s cubic-bezier(0.65, 0, 0.35, 1) infinite; }
  .bsx-you i { animation: bsxEcho 6s ease-out infinite; }
  .bsx-map__path path { animation: bsxPath 6s ease-in-out infinite; }
  .bsx-dot { animation: bsxNoise 3s ease-in-out infinite; }
  .bsx-dot.c2 { animation-delay: -1s; } .bsx-dot.c3 { animation-delay: -2s; } .bsx-dot.c4 { animation-delay: -0.5s; } .bsx-dot.c5 { animation-delay: -1.5s; }
}
@keyframes bsxTravel { 0%, 12% { left: 26%; top: 70%; } 55%, 92% { left: 78%; top: 24%; } 100% { left: 26%; top: 70%; } }
@keyframes bsxEcho { 0%, 55% { transform: scale(1); opacity: 0; } 57% { opacity: 0.7; } 80%, 100% { transform: scale(3.2); opacity: 0; } }
@keyframes bsxPath { 0%, 12% { opacity: 0; } 40%, 90% { opacity: 0.55; } 100% { opacity: 0; } }
@keyframes bsxNoise { 50% { transform: translate(2px, -2px); } }

/* ── Demand generation hero: people drift from 'unaware' to 'ready',
   warming from grey to violet, and land in sales ── */
.dgx-flow {
  position: relative;
  height: 230px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-radius: 12px;
  background: linear-gradient(90deg, rgba(30,16,64,0.03), color-mix(in srgb, var(--page-accent) 12%, transparent));
  overflow: hidden;
}
.dgx-col { position: relative; border-right: 1px dashed rgba(30,16,64,0.12); }
.dgx-col--end { border-right: 0; }
.dgx-col b { position: absolute; left: 0.7rem; top: 0.7rem; font-family: 'DM Mono', monospace; font-size: 0.56rem; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted); }
.dgx-col--end b { color: var(--page-accent); }
.dgx-p {
  position: absolute; left: 4%; top: var(--y);
  width: 9px; height: 9px; margin: -4.5px;
  border-radius: 50%;
  background: rgba(30,16,64,0.22);
}
.dgx-sales {
  position: absolute; right: 0.9rem; top: 50%;
  width: 30px; height: 30px; margin-top: -15px;
  border-radius: 50%;
  background: var(--page-accent);
  box-shadow: 0 0 0 8px color-mix(in srgb, var(--page-accent) 14%, transparent);
}
.dgx-sales em { position: absolute; right: 0; top: calc(100% + 12px); font-style: normal; font-family: 'DM Mono', monospace; font-size: 0.56rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--page-accent); }
.dgx-sales i { position: absolute; inset: 0; border-radius: 50%; border: 1px solid var(--page-accent); opacity: 0; }
@media (prefers-reduced-motion: no-preference) {
  .dgx-p { animation: dgxFlow 7.7s cubic-bezier(0.45, 0, 0.55, 1) infinite; animation-delay: var(--d); opacity: 0; }
  .dgx-sales i { animation: bsxEcho 1.1s ease-out infinite; }
}
@keyframes dgxFlow {
  0%   { left: 4%;  opacity: 0; background: rgba(30,16,64,0.22); transform: scale(0.8); }
  8%   { opacity: 1; }
  45%  { background: color-mix(in srgb, var(--page-accent) 45%, #fff); }
  80%  { left: 84%; top: var(--y); opacity: 1; background: var(--page-accent); transform: scale(1.15); }
  92%  { left: calc(100% - 1.85rem); top: 50%; opacity: 0; transform: scale(0.6); }
  100% { left: calc(100% - 1.85rem); top: 50%; opacity: 0; }
}

/* ── Signs: four short cards; each icon's lines snap into alignment ── */
.bsx-signs__grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.bsx-sign {
  display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 1rem; row-gap: 0.3rem;
  padding: 1.35rem 1.4rem;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 14px;
}
.bsx-sign h3 { font-family: var(--font-head); font-size: clamp(1.25rem, 1.05rem + 0.5vw, 1.5rem); font-weight: 500; line-height: 1.15; color: var(--text); grid-column: 2; }
.bsx-sign p { grid-column: 2; font-size: 1rem; line-height: 1.55; color: var(--text-muted); margin: 0; }
.bsx-sign__icon { grid-row: span 2; display: grid; align-content: start; gap: 4px; padding-top: 0.35rem; width: 26px; }
.bsx-sign__icon i { display: block; height: 3px; border-radius: 2px; background: var(--page-accent); transition: transform 0.7s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.7s ease; }
.bsx-sign__icon i:nth-child(1) { width: 100%; } .bsx-sign__icon i:nth-child(2) { width: 70%; } .bsx-sign__icon i:nth-child(3) { width: 85%; }
.bsx-signs__not { margin-top: 1.5rem; font-size: 1rem; color: var(--text-muted); max-width: 70ch; line-height: 1.6; }
.bsx-signs__not b { color: var(--text); font-weight: 500; }

/* ── What you get: a light document in the dark chamber; each row writes
   itself (draft bars give way to the real text) as you scroll to it ── */
.bsx-getsec {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(ellipse 60% 70% at 85% 110%, rgba(91,43,224,0.38) 0%, transparent 60%),
    radial-gradient(ellipse 50% 60% at 15% 10%, rgba(70,32,160,0.30) 0%, transparent 70%),
    #0b0716;
  color: #f5f1ff;
}
.bsx-getsec::before {                       /* faint echo rings behind the document */
  content: ''; position: absolute; right: -12vw; top: 50%;
  width: 60vw; aspect-ratio: 1; transform: translateY(-50%);
  border-radius: 50%;
  background: repeating-radial-gradient(circle, transparent 0 46px, rgba(190,160,255,0.08) 46px 47px);
  pointer-events: none;
}
.bsx-getsec .section-label { color: rgba(198,180,255,0.75); }
.bsx-getsec .section-title { color: #f5f1ff; }
.bsx-getsec .section-title em { font-style: italic; background: linear-gradient(110deg, #9b6dff, #cdb6ff 50%, #9b6dff); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.bsx-getsec__grid { position: relative; display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: clamp(2rem, 6vw, 5rem); align-items: center; }
.bsx-capsule { font-size: 0.98rem; line-height: 1.7; color: rgba(222,214,246,0.72); max-width: 42ch; }
.bsx-capsule b { color: #fff; font-weight: 500; }
.bsx-doc {
  background: #fbfaff;
  color: var(--text);
  border-radius: 14px;
  padding: clamp(1.25rem, 2.5vw, 2rem);
  box-shadow: 0 40px 90px -30px rgba(0,0,0,0.6), 0 0 0 1px rgba(155,109,255,0.25);
  transform: rotate(-0.6deg);
}
.bsx-doc__head { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding-bottom: 0.9rem; border-bottom: 1px solid var(--border); }
.bsx-doc__head span { font-family: var(--font-head); font-size: 1.35rem; }
.bsx-doc__head small { font-family: 'DM Mono', monospace; font-size: 0.6rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--page-accent); }
.bsx-doc__rows { list-style: none; margin: 0; padding: 0; }
.bsx-doc__row { display: grid; grid-template-columns: 2.2rem minmax(0, 1fr); gap: 0.6rem; padding: 1rem 0; border-bottom: 1px solid var(--border); }
.bsx-doc__row:last-child { border-bottom: 0; padding-bottom: 0; }
.bsx-doc__num { font-family: 'DM Mono', monospace; font-size: 0.72rem; letter-spacing: 0.08em; color: var(--page-accent); padding-top: 0.35rem; }
.bsx-doc__text { position: relative; }
.bsx-doc__text h3 { font-family: var(--font-head); font-size: clamp(1.25rem, 1.05rem + 0.5vw, 1.5rem); font-weight: 500; line-height: 1.15; margin-bottom: 0.25rem; }
.bsx-doc__text p { font-size: 1rem; line-height: 1.55; color: var(--text-muted); margin: 0; }
.bsx-doc__draft { display: none; }

/* ── Four weeks ── */
.bsx-weeks { list-style: none; margin: 0; padding: 0; position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.5rem; }
.bsx-weeks__track { position: absolute; left: 7px; right: 0; top: 7px; height: 2px; border-radius: 2px; background: var(--border); }
.bsx-weeks__track i { position: absolute; inset: 0; border-radius: 2px; background: linear-gradient(90deg, var(--page-accent), color-mix(in srgb, var(--page-accent) 40%, transparent)); transform-origin: left; }
.bsx-week { position: relative; padding-top: 2.1rem; }
.bsx-week__node { position: absolute; left: 0; top: 0; width: 16px; height: 16px; border-radius: 50%; background: var(--page-accent); box-shadow: 0 0 0 5px color-mix(in srgb, var(--page-accent) 14%, var(--bg)); }
.bsx-week__when { display: inline-block; font-family: 'DM Mono', monospace; font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--page-accent); background: color-mix(in srgb, var(--page-accent) 10%, transparent); border-radius: 999px; padding: 3px 10px; margin-bottom: 0.7rem; }
.bsx-week h3 { font-family: var(--font-head); font-size: 1.35rem; font-weight: 500; color: var(--text); margin-bottom: 0.35rem; }
.bsx-week p { font-size: 1rem; line-height: 1.6; color: var(--text-muted); margin: 0; }

/* ── Motion (start states) ── */
@media (prefers-reduced-motion: no-preference) {
  html.js .bsx-sign { opacity: 0; transform: translateY(18px); transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.16, 1, 0.3, 1); transition-delay: calc(var(--i, 0) * 0.1s); }
  html.js .bsx-sign .bsx-sign__icon i:nth-child(1) { transform: translateX(-6px) rotate(-8deg); }
  html.js .bsx-sign .bsx-sign__icon i:nth-child(2) { transform: translateX(7px) rotate(10deg); }
  html.js .bsx-sign .bsx-sign__icon i:nth-child(3) { transform: translateX(-3px) rotate(-5deg); }
  html.js .bsx-sign.is-in { opacity: 1; transform: none; }
  html.js .bsx-sign.is-in .bsx-sign__icon i { transform: none; transition-delay: calc(var(--i, 0) * 0.1s + 0.35s); }

  html.js .bsx-doc__draft { display: grid; gap: 6px; position: absolute; left: 0; right: 0; top: 2.1rem; transition: opacity 0.4s ease; }
  html.js .bsx-doc__draft i { display: block; height: 6px; border-radius: 3px; background: color-mix(in srgb, var(--page-accent) 16%, #fff); }
  html.js .bsx-doc__draft i:last-child { width: 62%; }
  html.js .bsx-doc__text h3 { opacity: 0.35; transition: opacity 0.5s ease; }
  html.js .bsx-doc__text p { opacity: 0; clip-path: inset(0 100% 0 0); transition: opacity 0.3s ease, clip-path 0.9s cubic-bezier(0.65, 0, 0.35, 1); transition-delay: 0.15s; }
  html.js .bsx-doc__num { opacity: 0.4; transition: opacity 0.5s ease; }
  html.js .bsx-doc__row.is-in h3, html.js .bsx-doc__row.is-in .bsx-doc__num { opacity: 1; }
  html.js .bsx-doc__row.is-in p { opacity: 1; clip-path: inset(0 0 0 0); }
  html.js .bsx-doc__row.is-in .bsx-doc__draft { opacity: 0; }

  html.js .bsx-weeks__track i { transform: scaleX(0); transition: transform 1.6s cubic-bezier(0.65, 0, 0.35, 1); }
  html.js .bsx-weeks.is-in .bsx-weeks__track i { transform: scaleX(1); }
  html.js .bsx-week { opacity: 0; transform: translateY(14px); transition: opacity 0.6s ease, transform 0.6s ease; transition-delay: calc(var(--i, 0) * 0.35s + 0.1s); }
  html.js .bsx-week__node { transform: scale(0); transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1); transition-delay: calc(var(--i, 0) * 0.35s); }
  html.js .bsx-weeks.is-in .bsx-week { opacity: 1; transform: none; }
  html.js .bsx-weeks.is-in .bsx-week__node { transform: none; }
}

/* ── Tablet / phone ── */
@media (max-width: 900px) {
  .bsx-getsec__grid { grid-template-columns: minmax(0, 1fr); }
  .bsx-doc { transform: none; }
  .bsx-weeks { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 2rem; }
  .bsx-weeks__track { display: none; }
}
@media (max-width: 600px) {
  .bsx-signs__grid { grid-template-columns: minmax(0, 1fr); gap: 0.75rem; }
  .bsx-sign { padding: 1.1rem 1.15rem; }
  .bsx-map { height: 210px; }
  .dgx-flow { height: 200px; }
  /* weeks become a vertical track */
  .bsx-weeks { grid-template-columns: minmax(0, 1fr); gap: 0; padding-left: 2rem; }
  .bsx-weeks__track { display: none; }
  .bsx-week { padding: 0 0 1.75rem; }
  .bsx-week:last-child { padding-bottom: 0; }
  .bsx-week__node { left: -2rem; top: 2px; }
  /* node-to-node segments, so the line ends at Week 4 */
  .bsx-week:not(:last-child)::before {
    content: ''; position: absolute; left: calc(-2rem + 7px); top: 18px; bottom: 2px; width: 2px;
    background: var(--page-accent); transform-origin: top;
  }
}
@media (max-width: 600px) and (prefers-reduced-motion: no-preference) {
  html.js .bsx-week:not(:last-child)::before { transform: scaleY(0); transition: transform 0.5s ease; transition-delay: calc(var(--i, 0) * 0.35s + 0.25s); }
  html.js .bsx-weeks.is-in .bsx-week::before { transform: none; }
}