/* ============================================================
   FINERIES — home page V3.1 sections
   (loads after v3.css; reuses its tokens)
   ============================================================ */

.preview-badge {
  position: fixed; bottom: 16px; left: 50%; transform: translateX(-50%);
  z-index: 600; background: var(--v3-ink); color: #fff;
  font: 600 13px/1 var(--font-text); padding: 12px 20px; border-radius: 999px;
  box-shadow: 0 10px 30px rgba(0,0,0,.3);
}

/* ---------- What We Do head ---------- */
.wwd2__head {
  display: grid; grid-template-columns: minmax(0,7fr) minmax(0,5fr);
  gap: clamp(28px,4vw,72px); align-items: start;
  margin-bottom: clamp(36px,4.5vw,60px);
}
.wwd2__title { font-size: clamp(21px,3.1vw,39px); line-height: 1.08; }
.wwd2__title, .wwd2__title .teal { color: #000; }
.wwd2__aside .body { margin-bottom: 22px; }

/* ---------- Coloured service cards ---------- */
.svc3__grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; }
.svc3 {
  display: flex; flex-direction: column; border-radius: 12px; overflow: hidden;
  background: var(--v3-blue); min-height: 100%;
  transition: transform .3s var(--v3-ease), box-shadow .3s var(--v3-ease);
}
.svc3:hover { transform: translateY(-6px); box-shadow: 0 24px 50px rgba(27,29,69,.22); }
.svc3__img { aspect-ratio: 4/3; background: var(--v3-mist); }
.svc3__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.svc-art { --art-x: 0deg; --art-y: 0deg; position: relative; width: 100%; height: 100%; overflow: hidden; background: var(--v3-mist); perspective: 900px; }
.svc-art__fallback { position: absolute; inset: 0; z-index: 0; }
.svc-art__fallback--hidden { opacity: 0; }
.svc-art__svg { position: absolute; inset: 0; z-index: 1; display: block; width: 100%; height: 100%; transform: rotateX(var(--art-y)) rotateY(var(--art-x)) scale(1.015); transition: transform .5s cubic-bezier(.2,.8,.2,1); }
.svc-art--01,.svc-art--05{background:#08bcb3}.svc-art--02{background:#e00083}.svc-art--03{background:#3c4099}.svc-art--04{background:#ffca09}
.svc3:hover .svc-art__svg, .svc3:focus-visible .svc-art__svg { transform: rotateX(var(--art-y)) rotateY(var(--art-x)) scale(1.055); }
.svc-art .art-bg { transition: filter .55s ease; }
.svc3:hover .svc-art .art-bg, .svc3:focus-visible .svc-art .art-bg { filter: saturate(1.08) brightness(1.03); }

/* 01 — strategic play: the two chess pieces make large, opposing moves. */
.svc-art--01 .brand-fil1,.svc-art--01 .brand-fil2,.svc-art--01 .brand-fil3{transform-box:view-box;transform-origin:center;transition:transform 1s cubic-bezier(.18,.9,.2,1.1),filter .4s ease;will-change:transform}.svc-art--01 .brand-fil2,.svc-art--01 .brand-fil3{transition-delay:.1s}.svc3:hover .svc-art--01 .brand-fil1,.svc3:focus-visible .svc-art--01 .brand-fil1{transform:translate(-12%,8%) rotate(-12deg) scale(.88)}.svc3:hover .svc-art--01 .brand-fil2,.svc3:hover .svc-art--01 .brand-fil3,.svc3:focus-visible .svc-art--01 .brand-fil2,.svc3:focus-visible .svc-art--01 .brand-fil3{transform:translate(12%,-8%) rotate(12deg) scale(1.18);filter:drop-shadow(0 14px 12px rgba(1,38,118,.2))}

/* 02 — broadcast energy: the megaphone recoils while its signal expands outward. */
.svc-art--02 .art-megaphone,.svc-art--02 .art-sound{transform-box:fill-box;transform-origin:center;transition:transform .95s cubic-bezier(.18,.9,.2,1.12),filter .4s ease;will-change:transform}.svc-art--02 .art-sound{transition-delay:.1s}.svc-art--02 .art-sound path{transform-box:fill-box;transform-origin:center;transition:transform .72s cubic-bezier(.18,.9,.2,1.12)}.svc3:hover .svc-art--02 .art-megaphone,.svc3:focus-visible .svc-art--02 .art-megaphone{transform:translate(-42px,18px) rotate(-18deg) scale(1.18);filter:drop-shadow(0 12px 10px rgba(1,38,118,.2))}.svc3:hover .svc-art--02 .art-sound,.svc3:focus-visible .svc-art--02 .art-sound{transform:translate(64px,-6px) scale(1.45,1.1)}.svc3:hover .svc-art--02 .art-sound path:nth-child(odd),.svc3:focus-visible .svc-art--02 .art-sound path:nth-child(odd){transform:scaleY(.55)}.svc3:hover .svc-art--02 .art-sound path:nth-child(even),.svc3:focus-visible .svc-art--02 .art-sound path:nth-child(even){transform:scaleY(1.35)}

/* 03 — production in motion: both playheads sweep together into a bold central beat. */
.svc-art--03 .content-fil1,.svc-art--03 .content-fil2{transform-box:fill-box;transform-origin:center;transition:transform .95s cubic-bezier(.18,.9,.2,1.12),filter .4s ease;will-change:transform}.svc-art--03 .content-fil2{transition-delay:.1s}.svc3:hover .svc-art--03 .content-fil1,.svc3:focus-visible .svc-art--03 .content-fil1{transform:translateX(86px) rotate(18deg) scale(1.18);filter:drop-shadow(0 12px 10px rgba(1,38,118,.2))}.svc3:hover .svc-art--03 .content-fil2,.svc3:focus-visible .svc-art--03 .content-fil2{transform:translateX(-86px) rotate(-18deg) scale(1.18)}

/* 04 — digital acceleration: both arrow halves launch along their shared axis. */
.svc-art--04 polygon.digital-fil1,.svc-art--04 path.digital-fil1{transform-box:view-box;transform-origin:center;transition:transform 1s cubic-bezier(.18,.9,.2,1.1),filter .4s ease;will-change:transform}.svc-art--04 path.digital-fil1{transition-delay:.1s}.svc3:hover .svc-art--04 polygon.digital-fil1,.svc3:focus-visible .svc-art--04 polygon.digital-fil1{transform:translate(-82px,82px) rotate(-12deg) scale(1.18);filter:drop-shadow(0 14px 12px rgba(1,38,118,.2))}.svc3:hover .svc-art--04 path.digital-fil1,.svc3:focus-visible .svc-art--04 path.digital-fil1{transform:translate(82px,-82px) rotate(12deg) scale(1.18)}

/* 05 — supplied SVG: the complete foreground mark grows and rotates as one unit. */
.svc-art--05 .executive-fil1,.svc-art--05 .executive-fil2{transform-box:view-box;transform-origin:center;transition:transform 1s cubic-bezier(.18,.9,.2,1.08),filter .45s ease;will-change:transform}.svc3:hover .svc-art--05 .executive-fil1,.svc3:hover .svc-art--05 .executive-fil2,.svc3:focus-visible .svc-art--05 .executive-fil1,.svc3:focus-visible .svc-art--05 .executive-fil2{transform:rotate(40deg) scale(1.4);filter:drop-shadow(0 14px 14px rgba(1,40,122,.2))}

/* What We Do stage — scrolling a chapter into focus triggers the same motion language. */
.wwdcaps__art.is-active .svc-art--01 .brand-fil1{transform:translate(-12%,8%) rotate(-12deg) scale(.88)}
.wwdcaps__art.is-active .svc-art--01 .brand-fil2,.wwdcaps__art.is-active .svc-art--01 .brand-fil3{transform:translate(12%,-8%) rotate(12deg) scale(1.18);filter:drop-shadow(0 14px 12px rgba(1,38,118,.2))}
.wwdcaps__art.is-active .svc-art--02 .art-megaphone{transform:translate(-42px,18px) rotate(-18deg) scale(1.18);filter:drop-shadow(0 12px 10px rgba(1,38,118,.2))}
.wwdcaps__art.is-active .svc-art--02 .art-sound{transform:translate(64px,-6px) scale(1.45,1.1)}
.wwdcaps__art.is-active .svc-art--02 .art-sound path:nth-child(odd){transform:scaleY(.55)}
.wwdcaps__art.is-active .svc-art--02 .art-sound path:nth-child(even){transform:scaleY(1.35)}
.wwdcaps__art.is-active .svc-art--03 .content-fil1{transform:translateX(86px) rotate(18deg) scale(1.18);filter:drop-shadow(0 12px 10px rgba(1,38,118,.2))}
.wwdcaps__art.is-active .svc-art--03 .content-fil2{transform:translateX(-86px) rotate(-18deg) scale(1.18)}
.wwdcaps__art.is-active .svc-art--04 polygon.digital-fil1{transform:translate(-82px,82px) rotate(-12deg) scale(1.18);filter:drop-shadow(0 14px 12px rgba(1,38,118,.2))}
.wwdcaps__art.is-active .svc-art--04 path.digital-fil1{transform:translate(82px,-82px) rotate(12deg) scale(1.18)}
.wwdcaps__art.is-active .svc-art--05 .executive-fil1,.wwdcaps__art.is-active .svc-art--05 .executive-fil2{transform:rotate(40deg) scale(1.4);filter:drop-shadow(0 14px 14px rgba(1,40,122,.2))}

@media (hover:none) {
  .svc-art.is-seen .svc-art__svg { animation: svc-art-arrive .9s cubic-bezier(.2,.8,.2,1) both; }
  @keyframes svc-art-arrive { from { opacity:.35; transform:scale(.9) rotate(-2deg) } to { opacity:1; transform:scale(1.015) rotate(0) } }
}
@media (prefers-reduced-motion:reduce) {
  .svc-art__svg,.svc-art * { animation:none!important;transition-duration:.01ms!important; }
  .svc3:hover .svc-art__svg,.svc3:focus-visible .svc-art__svg { transform:none; }
}
.svc3__panel { padding: 22px 20px 20px; display: flex; flex-direction: column; flex: 1; color: #fff; }
.svc3__num { font-family: var(--font-mono, monospace); font-size: 12px; opacity: .8; margin-bottom: 12px; }
.svc3__title { font-family: var(--font-display); font-weight: 800; font-size: 19px; line-height: 1.12; letter-spacing: -.01em; margin-bottom: 10px; }
.svc3__desc { font-size: 13.5px; line-height: 1.5; opacity: .9; margin-bottom: 20px; }
.svc3__arrow {
  margin-top: auto; width: 40px; height: 40px; border-radius: 50%;
  border: 1.5px solid currentColor; display: flex; align-items: center; justify-content: center;
  transition: background .25s, color .25s;
}
.svc3__arrow svg { width: 16px; height: 16px; }
.svc3:hover .svc3__arrow { background: #fff; color: var(--v3-ink); border-color: #fff; }
.svc3--blue    { background: var(--v3-blue); }
.svc3--magenta { background: var(--v3-magenta); }
.svc3--teal    { background: var(--v3-teal); }
.svc3--gold    { background: var(--v3-gold); }
.svc3--gold .svc3__panel { color: var(--v3-ink); }
.svc3--gold .svc3__num { opacity: .7; }
.svc3--gold:hover .svc3__arrow { background: var(--v3-ink); color: var(--v3-gold); border-color: var(--v3-ink); }

/* White service cards (block colour → white) */
.svc3, .svc3--blue, .svc3--gold, .svc3--magenta, .svc3--teal { background: #fff; border: 1px solid var(--v3-line); }
.svc3__panel, .svc3--gold .svc3__panel { color: var(--v3-ink); }
.svc3__num { color: var(--v3-text-2); opacity: 1; }
.svc3__desc { color: var(--v3-text-2); opacity: 1; }
.svc3__arrow { border-color: var(--v3-line); color: var(--v3-ink); }
.svc3:hover .svc3__arrow, .svc3--gold:hover .svc3__arrow { background: var(--v3-ink); color: #fff; border-color: var(--v3-ink); }
/* subtle brand accent retained on the number */
.svc3--blue .svc3__num    { color: var(--v3-blue); }
.svc3--gold .svc3__num    { color: #C79A00; }
.svc3--magenta .svc3__num { color: var(--v3-magenta); }
.svc3--teal .svc3__num    { color: var(--v3-teal); }
/* arrow hover → the card's own brand colour (placed after the neutral hover rule so it wins) */
.svc3--blue:hover .svc3__arrow    { background: var(--v3-blue);    border-color: var(--v3-blue);    color: #fff; }
.svc3--gold:hover .svc3__arrow    { background: var(--v3-gold);    border-color: var(--v3-gold);    color: var(--v3-ink); }
.svc3--magenta:hover .svc3__arrow { background: var(--v3-magenta); border-color: var(--v3-magenta); color: #fff; }
.svc3--teal:hover .svc3__arrow    { background: var(--v3-teal);    border-color: var(--v3-teal);    color: #fff; }
/* Match each arrow button to the background of its artwork, independent of CMS panel colour. */
#service-01, #service-05 { --svc-arrow-hover: #08bcb3; --svc-arrow-ink: #fff; }
#service-02 { --svc-arrow-hover: #e00083; --svc-arrow-ink: #fff; }
#service-03 { --svc-arrow-hover: #3c4099; --svc-arrow-ink: #fff; }
#service-04 { --svc-arrow-hover: #ffca09; --svc-arrow-ink: var(--v3-ink); }
.svc3:is(:hover, :focus-visible) .svc3__arrow {
  background: var(--svc-arrow-hover); border-color: var(--svc-arrow-hover); color: var(--svc-arrow-ink);
}

/* ---------- The Truth ---------- */
.truth { display: grid; grid-template-columns: 1fr 1fr; align-items: stretch; }
.truth__media { display: grid; grid-template-columns: 1fr; gap: 0; min-height: 520px; }
.truth__media .media { border-radius: 0; }
.truth__media .media { position: relative; }
.truth__media img { width: 100%; height: 100%; object-fit: cover; }
.truth__text { padding: clamp(40px,6vw,110px) clamp(28px,5vw,90px); display: flex; flex-direction: column; justify-content: center; }
.truth__text .h-lg { font-size: clamp(21px,2.8vw,36px); margin: 16px 0 22px; }
.truth__body p + p { margin-top: 14px; }

/* ---------- Our Process ---------- */
.process { background: var(--v3-blue); padding: clamp(82px,10vw,150px) 0; }
.process__grid { display: grid; grid-template-columns: minmax(0,5fr) minmax(420px,6fr); gap: clamp(52px,8vw,126px); align-items: start; }
.process__intro { position: sticky; top: 120px; max-width: 34rem; }
.process__intro .h-lg { max-width: 15ch; font-size: clamp(24px,3.5vw,42px); }
.process__intro .body { max-width: 47ch; }
.process__timeline { position: relative; display: flex; flex-direction: column; }
.process__rail { position: absolute; z-index: 0; top: 38px; bottom: 38px; left: 37px; width: 2px; overflow: hidden; background: rgba(255,255,255,.16); transform: translateX(-50%); }
.process__rail span { display: block; width: 100%; height: 100%; background: var(--v3-teal); transform: scaleY(0); transform-origin: top; box-shadow: 0 0 16px rgba(8,188,179,.55); }
.pstep { position: relative; z-index: 1; display: grid; grid-template-columns: 74px 1fr; gap: clamp(24px,3vw,42px); align-items: start; min-height: clamp(210px,29vh,300px); text-align: left; opacity: .42; transition: opacity .35s var(--v3-ease); }
.pstep:last-child { min-height: 76px; }
.pstep__node { --step-fill: 0; position: relative; display: grid; width: 74px; height: 74px; overflow: hidden; place-items: center; border-radius: 50%; color: rgba(255,255,255,.62); }
.pstep__node::before { content: ""; position: absolute; z-index: 0; inset: 0; border: 2px solid rgba(255,255,255,.18); border-radius: inherit; background: var(--v3-blue); transition: border-color .35s var(--v3-ease), transform .35s var(--v3-ease); }
.pstep__node::after { content: ""; position: absolute; z-index: 1; inset: 0; border-radius: inherit; background: var(--v3-teal); transform: scaleY(var(--step-fill)); transform-origin: top; }
.pstep__core { position: absolute; z-index: 2; inset: 3px; border-radius: 50%; background: var(--v3-blue); }
.pstep__icon { position: absolute; z-index: 4; display: grid; place-items: center; opacity: 0; transform: scale(.7); color: var(--v3-teal); transition: opacity .3s var(--v3-ease), transform .35s var(--v3-ease); }
.pstep__icon svg { width: 25px; height: 25px; }
.pstep__num { position: relative; z-index: 3; font-family: var(--font-mono, monospace); font-size: 13px; color: inherit; transition: opacity .25s var(--v3-ease); }
.pstep__copy { padding-top: 5px; }
.pstep__title { margin: 0 0 10px; font-family: var(--font-display); font-weight: 700; font-size: clamp(17px,1.6vw,22px); color: #fff; }
.pstep__desc { max-width: 38ch; margin: 0; font-size: clamp(15px,1.35vw,18px); line-height: 1.55; color: rgba(255,255,255,.62); transition: color .35s var(--v3-ease); }
.pstep.is-active { opacity: 1; }
.pstep.is-active .pstep__node::before { border-color: var(--v3-teal); transform: scale(1.05); }
.pstep.is-active .pstep__num { opacity: 0; }
.pstep.is-active .pstep__icon { opacity: 1; transform: scale(1); }
.pstep.is-active .pstep__desc { color: rgba(255,255,255,.84); }
.reduced-motion .process__rail span { transform: scaleY(1); }
.reduced-motion .pstep { opacity: 1; }
.reduced-motion .pstep__node::before { border-color: var(--v3-teal); }
.reduced-motion .pstep__node { --step-fill: 1; }
.reduced-motion .pstep__num { display: none; }
.reduced-motion .pstep__icon { opacity: 1; transform: scale(1); }

/* ---------- Method / Venn ---------- */
.method__grid { display: grid; grid-template-columns: minmax(0,5fr) minmax(0,7fr); gap: clamp(32px,5vw,80px); align-items: center; }
.method__title { font-family: var(--font-display); font-weight: 800; font-size: clamp(34px,5vw,66px); line-height: 1.02; letter-spacing: -.03em; margin-top: 16px; }
.method__title .m-blue { color: var(--v3-blue); }
.method__title .m-magenta { color: var(--v3-magenta); }
.method__title .m-teal { color: var(--v3-teal); }
.method__viz { display: flex; flex-direction: column; align-items: center; gap: 28px; }
.venn { display: flex; justify-content: center; align-items: center; }
.venn__c {
  width: clamp(150px, 15vw, 210px); aspect-ratio: 1; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; text-align: center;
  padding: 14px; mix-blend-mode: multiply;
}
.venn__c + .venn__c { margin-left: clamp(-46px, -4vw, -30px); }
.venn__c--blue    { background: rgba(60,64,153,.18); }
.venn__c--magenta { background: rgba(192,24,145,.16); }
.venn__c--teal    { background: rgba(8,188,179,.18); }
.venn__inner { max-width: 62%; }
.venn__inner h4 { font-family: var(--font-display); font-weight: 800; font-size: 13px; letter-spacing: .06em; text-transform: uppercase; color: var(--v3-ink); margin-bottom: 6px; }
.venn__inner p { font-size: 11.5px; line-height: 1.35; color: var(--v3-text); }
.method__tagline { font-family: var(--font-display); font-weight: 700; font-size: clamp(16px,1.8vw,21px); color: var(--v3-ink); text-align: center; }

/* ---------- Value band (two-tone) ---------- */
.valueband { display: grid; grid-template-columns: minmax(0,5fr) minmax(0,7fr); }
.valueband__left { background: var(--v3-gold); color: var(--v3-ink); padding: clamp(44px,6vw,90px) clamp(28px,4vw,70px); position: relative; }
.valueband__left .eyebrow { color: var(--v3-ink); }
.valueband__left .eyebrow::after { background: var(--v3-ink); }
.valueband__left .h-lg { color: var(--v3-ink); }
.valueband__left .body { color: rgba(27,29,69,.8); }
.valueband__arrow { margin-top: 30px; border-color: var(--v3-ink); color: var(--v3-ink); }
.valueband__arrow:hover { background: var(--v3-ink); color: var(--v3-gold); }
.valueband__right {
  background: var(--v3-ink); color: #fff; padding: clamp(44px,6vw,90px) clamp(28px,4vw,70px);
  display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px,3vw,44px);
}
.vitem { display: flex; gap: 16px; align-items: flex-start; }
.vitem__icon { color: var(--v3-teal); flex-shrink: 0; }
.vitem__icon svg { width: 26px; height: 26px; stroke-width: 1.6; }
.vitem__title { font-family: var(--font-display); font-weight: 700; font-size: 16px; margin-bottom: 6px; }
.vitem__desc { font-size: 13px; line-height: 1.5; color: rgba(255,255,255,.65); }

/* ---------- CTA with couple ---------- */
.ctahome { overflow: hidden; background: var(--v3-blue); }
/* explicit horizontal padding so copy never touches the screen edges on mobile */
.ctahome .cta3__inner { padding: clamp(64px,8vw,120px) clamp(20px,4vw,56px); }
/* heading matches the hero */
.ctahome .cta3__title { font-size: clamp(24px, 3.6vw, 53px); line-height: 1.08; letter-spacing: -.03em; font-weight: 800; }
.ctahome__grid { display: grid; grid-template-columns: minmax(0,7fr) minmax(0,5fr); gap: clamp(32px,5vw,60px); align-items: end; }
/* couple sits flush on the bottom edge of the section */
.ctahome__figure { position: relative; align-self: end; margin-bottom: calc(-1 * clamp(64px,8vw,120px)); }
.ctahome__figure img { width: 100%; height: auto; display: block; }

/* ---------- Client logo marquee ---------- */
.logos { overflow: hidden; }
.logos__head { text-align: center; margin-bottom: clamp(28px, 4vw, 48px); }
.logos__head .eyebrow { justify-content: center; }
.logos__viewport {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.logos__track { display: flex; width: max-content; animation: logos-scroll 40s linear infinite; }
.logos__viewport:hover .logos__track { animation-play-state: paused; }
.logos__item { flex: 0 0 auto; display: flex; align-items: center; justify-content: center; height: 56px; padding: 0 clamp(26px, 5vw, 60px); }
.logos__item img { max-height: 100%; width: auto; object-fit: contain; filter: grayscale(1); opacity: .6; transition: filter .3s, opacity .3s; }
.logos__item img:hover { filter: none; opacity: 1; }
.logos__word { font-family: var(--font-display); font-weight: 800; font-size: clamp(20px, 2.4vw, 30px); letter-spacing: -.01em; color: var(--v3-text-2); white-space: nowrap; }
@keyframes logos-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .logos__track { animation: none; } }

/* ---------- Footer (wide) ---------- */
.foot3__main--wide { grid-template-columns: minmax(0,4fr) minmax(0,2.4fr) minmax(0,2.4fr) minmax(0,3fr); }
.foot3__addr { font-size: 14px; color: rgba(255,255,255,.55); margin: 8px 0; max-width: 26ch; line-height: 1.5; }
.foot3__lockup { display: inline-block; }
.foot3__lockup img { width: clamp(210px, 22vw, 290px); height: auto; display: block; margin-bottom: 24px; }

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
  .svc3__grid { grid-template-columns: repeat(2, 1fr); }
  .truth { grid-template-columns: 1fr; }
  .truth__media { min-height: 380px; }
  .method__grid, .valueband, .ctahome__grid { grid-template-columns: 1fr; }
  .foot3__main--wide { grid-template-columns: 1fr 1fr; }
  /* CTA image stacks below the copy and stays flush with the section bottom */
  .ctahome__figure { display: block; margin-top: clamp(24px, 5vw, 40px); }
  .ctahome__figure img { max-width: 460px; margin: 0 auto; }
}
@media (max-width: 800px) {
  .process { padding: 72px 0 82px; }
  .process__grid { grid-template-columns: 1fr; gap: 58px; }
  .process__intro { position: static; }
  .process__rail { left: 29px; top: 30px; bottom: 30px; }
  .process__rail span { transform: scaleY(1); }
  .pstep { grid-template-columns: 58px 1fr; gap: 20px; min-height: 174px; opacity: 1; }
  .pstep:last-child { min-height: 60px; }
  .pstep__node { width: 58px; height: 58px; }
  .pstep__node::before { border-color: var(--v3-teal); }
  .pstep__num { display: none; }
  .pstep__icon { opacity: 1; transform: scale(1); }
  .process__intro .h-lg { font-size: 29px; }
  .pstep__title { font-size: 18px; }
  .pstep__desc { font-size: 16px; }
}
@media (max-width: 720px) {
  .wwd2__head { grid-template-columns: 1fr; }
  .svc3__grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .valueband__right { grid-template-columns: 1fr; }
  .venn { flex-direction: column; }
  .venn__c + .venn__c { margin-left: 0; margin-top: clamp(-40px,-8vw,-28px); }
  .foot3__main--wide { grid-template-columns: 1fr; }
}

/* ---------- Mobile readability: bump headings + body copy (hero unaffected) ---------- */
@media (max-width: 640px) {
  /* section headlines */
  .wwd2__title            { font-size: 28px; }
  .h-lg, .truth__text .h-lg { font-size: 26px; }
  .method__tagline        { font-size: 18px; }

  /* body / lead copy */
  .body                   { font-size: 17px; line-height: 1.7; }
  .lead                   { font-size: 17px; }
  .statement__rows p,
  .cta3__list p           { font-size: 18px; }
  /* CTA heading matches the hero on mobile too */
  .ctahome .cta3__title   { font-size: clamp(34px, 9.2vw, 46px); line-height: 1.06; }

  /* service cards — 2-up, larger type for readability */
  .svc3__panel            { padding: 18px 15px 18px; }
  .svc3__num              { font-size: 13px; margin-bottom: 9px; }
  .svc3__title            { font-size: 19px; margin-bottom: 9px; }
  .svc3__desc             { font-size: 15px; margin-bottom: 16px; }
  .svc3__arrow            { width: 36px; height: 36px; }
  .svc3__arrow svg        { width: 15px; height: 15px; }

  /* process steps */
  .pstep__title           { font-size: 18px; }
  .pstep__desc            { font-size: 15px; }

  /* value band */
  .bv-item__title, .vitem__title { font-size: 18px; }
  .bv-item__desc, .vitem__desc   { font-size: 15px; }

  /* featured work cards */
  .wc3__name              { font-size: 22px; }
  .wc3__desc              { font-size: 15px; }

  /* footer */
  .foot3__addr, .foot3__col a, .foot3__col span { font-size: 15.5px; }

  /* client logo marquee */
  .logos__item { height: 40px; padding: 0 24px; }
  .logos__word { font-size: 21px; }
  .logos__track { animation-duration: 26s; }

  /* What We Do — teal band for the INTRO only; the cards keep the light bg */
  .wwd-sec { padding-top: 0; }
  .wwd-sec .wwd2__head {
    background: var(--v3-teal);
    margin-inline: calc(-1 * clamp(20px, 4vw, 56px));   /* full-bleed to screen edges */
    padding: 60px clamp(20px, 4vw, 56px) 56px;
    margin-bottom: clamp(32px, 7vw, 48px);
  }
  .wwd-sec .wwd2__head .eyebrow { color: #fff; }
  .wwd-sec .wwd2__title,
  .wwd-sec .wwd2__title .teal { color: #fff; }
  .wwd-sec .wwd2__aside .body { color: rgba(255,255,255,.9); }
  .wwd-sec .wwd2__head .btn3--teal { border-color: rgba(255,255,255,.7); color: #fff; }
  .wwd-sec .wwd2__head .btn3--teal:hover { background: #fff; color: var(--v3-teal); border-color: #fff; }
  .wwd-sec .wwd2__head .btn3--teal svg { color: #fff; }
  .wwd-sec .wwd2__head .btn3--teal:hover svg { color: var(--v3-teal); }
}