/* =========================================================
   WORK WITH US — neon strand hero, solid bands below
   ========================================================= */
/* only the "Let's build the thing." hero sits on the neon strand field */
#p-work .hero{padding:clamp(60px,8vw,104px) 0 clamp(56px,7vw,90px);position:relative;
  background:#03040E url("../assets/images/strands-bg.svg") center center / cover no-repeat}
#p-work .hero::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:1;
  background:
    radial-gradient(120% 92% at 78% 0%,rgba(52,50,199,.3),transparent 62%),
    linear-gradient(180deg,rgba(3,4,14,.58) 0%,rgba(3,4,14,.8) 100%)}
#p-work .hero>*{position:relative;z-index:1}
#p-work .hero>.wrap{z-index:3}

/* a handful of live strands travelling over the static field */
#p-work .beams{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:2}
#p-work .beams svg{width:100%;height:100%;display:block}
#p-work .beams path{fill:none;stroke:currentColor;stroke-linecap:round;opacity:.95;
  stroke-dasharray:290 1000;stroke-dashoffset:1290;
  animation-name:beam;animation-timing-function:linear;animation-iteration-count:infinite;
  filter:drop-shadow(0 0 5px currentColor)}
@keyframes beam{from{stroke-dashoffset:1290}to{stroke-dashoffset:0}}
@media(prefers-reduced-motion:reduce){
  #p-work .beams path{stroke-dasharray:none;stroke-dashoffset:0;opacity:.5}
}
#p-work h1{font-size:clamp(2.5rem,9vw,6.4rem);font-weight:800}
#p-work h1 span{display:block}
#p-work .hero .lede{margin-top:26px;color:rgba(230,236,255,.88)}
#p-work .b-navy{background:#0A1F63;color:#fff}
#p-work .b-plum{background:var(--plum);color:#fff}
#p-work .b-forest{background:var(--forest);color:#fff}
#p-work .b-navy .eyebrow,#p-work .b-plum .eyebrow{color:var(--pink-lt)}
#p-work .b-forest .eyebrow{color:#BDEBD6}
#p-work .b-navy .lede,#p-work .b-plum .lede,#p-work .b-forest .lede{color:rgba(255,255,255,.72)}
#p-work h2{font-size:clamp(1.75rem,4.4vw,2.9rem);margin:0 0 10px}
/* The process band: all of the text on the left, photo on the right.
   Source order is eyebrow, headline, figure, intro, steps — so every item
   is placed explicitly rather than left to flow, which keeps the reading
   order correct for screen readers whatever the visual arrangement. */
#p-work .b-navy .wrap{display:grid;grid-template-columns:1fr 1fr;
  column-gap:clamp(30px,5vw,56px);row-gap:0;align-items:start}
#p-work .b-navy .sidepic{grid-column:2;grid-row:1 / span 3;margin:0;align-self:center}
#p-work .b-navy .wrap > .eyebrow{grid-column:1;grid-row:1;margin-bottom:10px}
#p-work .b-navy .wrap > h2{grid-column:1;grid-row:2}
#p-work .b-navy .procintro{grid-column:1;grid-row:3;margin-top:4px}
#p-work .b-navy .steps{grid-column:1 / -1;grid-row:4;margin-top:clamp(30px,4vw,48px)}
#p-work .sidepic img{display:block;width:100%;height:auto;aspect-ratio:4/3;
  object-fit:cover;border-radius:3px}
#p-work .procintro{max-width:66ch;margin-top:6px}
#p-work .pull{font-family:var(--display);font-weight:800;text-transform:uppercase;
  font-size:clamp(1.05rem,2.1vw,1.4rem);line-height:1.22;letter-spacing:-.015em;
  margin:0 0 18px;padding-left:18px;border-left:4px solid var(--pink-lt);color:#fff}
#p-work .procintro .lede{max-width:none;margin:0}
#p-work .steps{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:40px}
#p-work .step{padding:26px 22px}
#p-work .step b{font-family:var(--display);font-weight:800;font-size:2.2rem;
  color:#fff;display:block;line-height:1;margin-bottom:14px}
#p-work .step h4{margin:0 0 6px;font-size:1.12rem;font-weight:700;text-transform:uppercase;
  font-family:var(--display);letter-spacing:-.01em}
#p-work .step .tagline{margin:0 0 10px;font-size:.95rem;line-height:1.4;font-weight:600;color:var(--pink-lt)}
#p-work .step p{margin:0;font-size:.89rem;line-height:1.58;color:rgba(255,255,255,.66)}
#p-work .qgrid{display:grid;gap:16px;margin-top:36px}
#p-work blockquote{margin:0;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.22);
  padding:clamp(24px,3.6vw,38px);border-radius:3px}
#p-work blockquote p{font-family:var(--display);font-weight:600;
  font-size:clamp(1.08rem,2.4vw,1.6rem);line-height:1.28;letter-spacing:-.012em;margin:0 0 18px}
#p-work blockquote p em{font-style:normal;color:var(--pink-lt)}
#p-work cite{font-style:normal;font-family:var(--mono);font-size:.6rem;letter-spacing:.18em;
  text-transform:uppercase;color:rgba(255,255,255,.6);display:block}
#p-work .logo-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:1px;
  background:rgba(255,255,255,.2);border:1px solid rgba(255,255,255,.2);margin-top:32px}
#p-work .lg{background:var(--forest);padding:28px 22px;min-height:112px;display:flex;flex-direction:column;
  justify-content:center;gap:6px;transition:background .2s,color .2s}
#p-work .lg:hover{background:#062F21}
#p-work .lg b{font-family:var(--display);font-weight:700;font-size:1.08rem;
  text-transform:uppercase;letter-spacing:-.01em}
#p-work .lg span{font-family:var(--mono);font-size:.55rem;letter-spacing:.16em;text-transform:uppercase;
  color:rgba(255,255,255,.66)}
/* closing band — echoes the deep blue wash under the strand hero */
#p-work .tailpad{padding:clamp(64px,8vw,104px) 0 clamp(80px,10vw,120px);text-align:center;
  background:
    radial-gradient(120% 110% at 22% 100%,rgba(52,50,199,.42),transparent 62%),
    linear-gradient(180deg,#04143A 0%,#0A1030 100%)}
#p-work .tailpad .lede{margin:18px auto 0;max-width:56ch}
#p-work .tailpad .lede a{color:var(--pink-lt);text-decoration:none;border-bottom:1px solid transparent}
#p-work .tailpad .lede a:hover{border-color:var(--pink-lt)}
/* one column below 900px: everything falls back to source order, so the
   photo lands between the headline and the intro copy */
@media(max-width:900px){
  #p-work .b-navy .wrap{grid-template-columns:1fr}
  #p-work .b-navy .sidepic,
  #p-work .b-navy .wrap > .eyebrow,
  #p-work .b-navy .wrap > h2,
  #p-work .b-navy .procintro,
  #p-work .b-navy .steps{grid-column:1;grid-row:auto}
  #p-work .b-navy .sidepic{margin:clamp(20px,4vw,28px) 0}
}
@media(max-width:980px){#p-work .steps{grid-template-columns:1fr 1fr}}
@media(max-width:620px){#p-work .steps{grid-template-columns:1fr}}

/* --- touch ---------------------------------------------------------- */
@media (pointer: coarse){
  #p-work .tailpad .lede a{display:inline-block;padding:4px 0}
}