/* ============================================================
   FINERIES — What We Do page (split hero + capability cards)
   loads after v3.css + home.css; reuses their tokens
   ============================================================ */

/* ---------- Split hero ---------- */
.wwdhero { background: var(--v3-blue); color: #fff; overflow: hidden; padding-top: clamp(96px, 12vh, 150px); }
.wwdhero__grid {
  display: grid; grid-template-columns: 1fr 1fr;
  align-items: stretch; min-height: min(70vh, 700px);
}
.wwdhero__media { position: relative; min-height: 320px; }
/* contain so the head is never cropped on desktop; sits at the bottom, blue fills above */
.wwdhero__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; object-position: center bottom; will-change: transform; }
.wwdhero__tags {
  position: absolute; left: clamp(20px,4vw,44px); bottom: clamp(24px,4vw,40px);
  z-index: 2; list-style: none; margin: 0; padding: 0; display: grid; gap: 6px;
}
.wwdhero__tags li {
  font-size: 11px; font-weight: 800; letter-spacing: .2em; text-transform: uppercase;
  color: rgba(255,255,255,.8);
}
.wwdhero__text {
  display: flex; flex-direction: column; justify-content: center;
  padding: clamp(56px,7vw,110px) clamp(28px,5vw,90px) clamp(56px,7vw,110px) clamp(28px,4vw,72px);
}
.wwdhero__title {
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(30px, 3.6vw, 53px); line-height: 1.06; letter-spacing: -.03em;
  margin: 16px 0 0; max-width: 15ch;
}
.wwdhero__body { margin-top: clamp(20px,2.6vw,30px); max-width: 54ch; }
.wwdhero__body p { font-size: 16px; line-height: 1.75; color: rgba(255,255,255,.82); }
.wwdhero__body p + p { margin-top: 14px; }
.wwdhero__cta { margin-top: clamp(28px,3.5vw,40px); align-self: flex-start; }
/* transparent hero CTA; teal fill and outline on hover */
.wwdhero__text .wwdhero__cta { background: transparent; border-color: #fff; color: #fff; }
.wwdhero__text .wwdhero__cta:hover { background: var(--v3-teal); border-color: var(--v3-teal); color: #fff; }

/* ---------- Strategy before services (blue band) ---------- */
.wwdstrat { background: var(--v3-blue-dd); color: #fff; }
.wwdstrat__grid {
  display: grid; grid-template-columns: minmax(0,5fr) minmax(0,7fr);
  gap: clamp(28px,5vw,80px); align-items: start;
  padding: clamp(48px,6vw,90px) clamp(20px,4vw,56px);
}
.wwdstrat__title { color: #fff; margin: 0; }
.wwdstrat__body p { font-size: 16px; line-height: 1.75; color: rgba(255,255,255,.92); }
.wwdstrat__body p + p { margin-top: 14px; }
.wwdstrat__kicker { color: #fff !important; font-family: var(--font-display); font-weight: 700; }

/* ---------- Our capabilities (cards) ---------- */
.wwdcaps__head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 24px;
  margin-bottom: clamp(30px,4vw,52px); flex-wrap: wrap;
}
.wwdcaps__heading { color: #000; margin: 0; }
.wwdcaps__tagline {
  font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
  color: var(--v3-teal);
}
.wwdcaps__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.capcard {
  display: flex; flex-direction: column; background: #fff;
  border: 1px solid var(--v3-line); border-radius: 14px;
  padding: 24px 20px 22px;
  transition: transform .3s var(--v3-ease), box-shadow .3s var(--v3-ease);
}
.capcard:hover { transform: translateY(-6px); box-shadow: 0 24px 50px rgba(27,29,69,.14); }
.capcard__icon {
  width: 46px; height: 46px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  background: var(--v3-mist); margin-bottom: 18px;
}
.capcard__icon svg { width: 22px; height: 22px; }
.capcard__num { font-family: var(--font-mono, monospace); font-size: 12px; font-weight: 700; color: var(--v3-text-2); }
.capcard__title {
  font-family: var(--font-display); font-weight: 800;
  font-size: 19px; line-height: 1.14; letter-spacing: -.01em; color: var(--v3-ink);
  margin: 6px 0 10px;
}
.capcard__overview { font-size: 14px; line-height: 1.55; color: var(--v3-text-2); margin: 0 0 16px; }
.capcard__skills {
  list-style: none; margin: 0 0 18px; padding: 16px 0 0; border-top: 1px solid var(--v3-line);
  display: grid; gap: 7px;
}
.capcard__skills li { font-size: 13.5px; line-height: 1.35; color: var(--v3-ink); font-weight: 500; }
.capcard__more { color: var(--v3-text-2) !important; font-weight: 600 !important; }
.capcard__arrow {
  margin-top: auto; width: 38px; height: 38px; border-radius: 50%;
  border: 1.5px solid var(--v3-line); color: var(--v3-ink);
  display: flex; align-items: center; justify-content: center;
  transition: background .25s, color .25s, border-color .25s;
}
.capcard__arrow svg { width: 15px; height: 15px; }

/* per-capability accent (icon + number + hover arrow) */
.capcard--blue    .capcard__icon { color: var(--v3-blue); }
.capcard--gold    .capcard__icon { color: #C79A00; }
.capcard--magenta .capcard__icon { color: var(--v3-magenta); }
.capcard--teal    .capcard__icon { color: var(--v3-teal); }
.capcard--blue    .capcard__num { color: var(--v3-blue); }
.capcard--gold    .capcard__num { color: #C79A00; }
.capcard--magenta .capcard__num { color: var(--v3-magenta); }
.capcard--teal    .capcard__num { color: var(--v3-teal); }
.capcard--blue:hover    .capcard__arrow { background: var(--v3-blue);    border-color: var(--v3-blue);    color: #fff; }
.capcard--gold:hover    .capcard__arrow { background: var(--v3-gold);    border-color: var(--v3-gold);    color: var(--v3-ink); }
.capcard--magenta:hover .capcard__arrow { background: var(--v3-magenta); border-color: var(--v3-magenta); color: #fff; }
.capcard--teal:hover    .capcard__arrow { background: var(--v3-teal);    border-color: var(--v3-teal);    color: #fff; }

/* ---------- Capability story (sticky animated SVG stage) ---------- */
.wwdcaps {
  --cap-wash: rgba(8,188,179,.12);
  position: relative; overflow: clip; background: #f5f5f5;
  padding: clamp(78px,9vw,132px) 0 clamp(64px,8vw,116px);
  transition: --cap-wash .7s ease;
}
.wwdcaps::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(circle at 18% 42%, var(--cap-wash), transparent 42%);
  transition: background .7s ease;
}
.wwdcaps[data-cap-active="01"] { --cap-wash: rgba(8,188,179,.16); }
.wwdcaps[data-cap-active="02"] { --cap-wash: rgba(224,8,133,.12); }
.wwdcaps[data-cap-active="03"] { --cap-wash: rgba(1,40,121,.12); }
.wwdcaps[data-cap-active="04"] { --cap-wash: rgba(253,208,21,.18); }
.wwdcaps[data-cap-active="05"] { --cap-wash: rgba(8,188,179,.14); }
.wwdcaps > .wrap { position: relative; z-index: 1; }
.wwdcaps__head { margin-bottom: clamp(52px,7vw,92px); }
.wwdcaps__list { display: flex; flex-direction: column; gap: 100px; }
.caprow2 {
  display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr);
  gap: 0; align-items: stretch; border-radius: 20px; overflow: hidden;
}
.caprow2--rev .caprow2__art { order: 2; }
.caprow2__art {
  display: block; text-decoration: none; cursor: pointer;
  position: relative; height: 100%; min-height: 420px; border-radius: 0; overflow: hidden;
  box-shadow: none;
}
.caprow2__art .svc-art { width: 100%; height: 100%; border-radius: inherit; }
.caprow2__art .svc-art__svg { transform: scale(.5); position: relative; z-index: 1; }

/* Ripple layer: the artwork's own full-bleed background rect is made transparent here,
   so the frame's colour shows behind, a ripple sits above it, and the shapes stay on top. */
.caprow2__art .brand-fil0,
.caprow2__art .content-fil0,
.caprow2__art .digital-fil0,
.caprow2__art .executive-fil0,
.caprow2__art .art-bg { fill: transparent; }
.caprow2__art .svc-art__ripple {
  display: block; position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden;
}
.caprow2__art .svc-art__ripple i {
  position: absolute; top: 50%; left: 50%;
  width: 38%; aspect-ratio: 1; border-radius: 50%;
  border: 2px solid rgba(255,255,255,.5);
  transform: translate(-50%,-50%) scale(.1); opacity: 0;
  animation: svcRipple 4s linear infinite;
}
.caprow2__art .svc-art__ripple i:nth-child(2) { animation-delay: .8s; }
.caprow2__art .svc-art__ripple i:nth-child(3) { animation-delay: 1.6s; }
.caprow2__art .svc-art__ripple i:nth-child(4) { animation-delay: 2.4s; }
.caprow2__art .svc-art__ripple i:nth-child(5) { animation-delay: 3.2s; }
@keyframes svcRipple {
  0%   { transform: translate(-50%,-50%) scale(.1); opacity: .85; }
  55%  { opacity: .45; }
  100% { transform: translate(-50%,-50%) scale(3); opacity: 0; }
}
.caprow2__copy {
  min-width: 0; background: #fff; border-radius: 0;
  padding: clamp(28px, 3vw, 52px);
  box-shadow: none;
}
.caprow2__num { font: 700 12px/1 var(--font-mono,monospace); letter-spacing: .1em; color: var(--v3-teal); }
.caprow2__title {
  max-width: 18ch; margin: 12px 0 14px; color: var(--v3-ink);
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(26px,2.6vw,40px); line-height: 1.05; letter-spacing: -.02em;
}
.caprow2__tagline { max-width: 32ch; margin: 0 0 14px; color: var(--v3-ink); font-size: clamp(17px,1.4vw,20px); line-height: 1.35; font-weight: 700; }
.caprow2__overview { max-width: 48ch; margin: 0; color: #2c2e3d; font-size: 15px; line-height: 1.65; }
.caprow2__skills { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 22px 0 26px; padding: 0; }
.caprow2__skills li { padding: 7px 12px; border: 1px solid rgba(27,29,69,.15); border-radius: 999px; color: var(--v3-ink); font-size: 12px; line-height: 1; font-weight: 700; }
.caprow2__skill--extra[hidden] { display: none; }
.caprow2__more { padding: 0 !important; border: 0 !important; }
.caprow2__more button {
  appearance: none; padding: 7px 12px; border: 1px solid rgba(27,29,69,.15); border-radius: 999px;
  background: transparent; color: var(--v3-text-2); font: inherit; line-height: 1; cursor: pointer;
  transition: border-color .25s ease, background .25s ease, color .25s ease;
}
.caprow2__more button:hover, .caprow2__more button:focus-visible {
  border-color: var(--v3-teal); background: rgba(8,188,179,.1); color: var(--v3-ink);
}
.caprow2__link { display: inline-flex; align-items: center; gap: 14px; color: var(--v3-ink); font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.caprow2__arrow { display: grid; width: 42px; height: 42px; place-items: center; border: 1.5px solid rgba(27,29,69,.25); border-radius: 50%; transition: transform .35s ease, background .3s ease, color .3s ease; }
.caprow2__arrow svg { width: 16px; height: 16px; }
.caprow2__link:hover .caprow2__arrow { transform: translateX(6px); background: var(--v3-ink); color: #fff; }
.caprow2:nth-child(1) .caprow2__link:hover .caprow2__arrow,
.caprow2:nth-child(1) .caprow2__link:focus-visible .caprow2__arrow,
.caprow2:nth-child(5) .caprow2__link:hover .caprow2__arrow,
.caprow2:nth-child(5) .caprow2__link:focus-visible .caprow2__arrow { background: #08bcb3; border-color: #08bcb3; color: #fff; }
.caprow2:nth-child(2) .caprow2__link:hover .caprow2__arrow,
.caprow2:nth-child(2) .caprow2__link:focus-visible .caprow2__arrow { background: #e00083; border-color: #e00083; color: #fff; }
.caprow2:nth-child(3) .caprow2__link:hover .caprow2__arrow,
.caprow2:nth-child(3) .caprow2__link:focus-visible .caprow2__arrow { background: #3c4099; border-color: #3c4099; color: #fff; }
.caprow2:nth-child(4) .caprow2__link:hover .caprow2__arrow,
.caprow2:nth-child(4) .caprow2__link:focus-visible .caprow2__arrow { background: #ffca09; border-color: #ffca09; color: var(--v3-ink); }

/* Hover the artwork → replay its motion (homepage triggers are scoped to .svc3:hover). */
.caprow2__art:hover .svc-art__svg, .caprow2__art:focus-visible .svc-art__svg { transform: scale(.54); }
.caprow2__art:hover .svc-art--01 .brand-fil1 { transform: translate(-12%,8%) rotate(-12deg) scale(.88); }
.caprow2__art:hover .svc-art--01 .brand-fil2,
.caprow2__art:hover .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)); }
.caprow2__art:hover .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)); }
.caprow2__art:hover .svc-art--02 .art-sound { transform: translate(64px,-6px) scale(1.45,1.1); }
.caprow2__art:hover .svc-art--02 .art-sound path:nth-child(odd) { transform: scaleY(.55); }
.caprow2__art:hover .svc-art--02 .art-sound path:nth-child(even) { transform: scaleY(1.35); }
.caprow2__art:hover .svc-art--03 .content-fil1 { transform: translateX(86px) rotate(18deg) scale(1.18); filter: drop-shadow(0 12px 10px rgba(1,38,118,.2)); }
.caprow2__art:hover .svc-art--03 .content-fil2 { transform: translateX(-86px) rotate(-18deg) scale(1.18); }
/* Digital: match the homepage — both arrow halves launch along their shared axis. */
.caprow2__art:hover .svc-art--04 polygon.digital-fil1,
.caprow2__art: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)); }
.caprow2__art:hover .svc-art--04 path.digital-fil1,
.caprow2__art:focus-visible .svc-art--04 path.digital-fil1 { transform: translate(82px,-82px) rotate(12deg) scale(1.18); }
.caprow2__art:hover .svc-art--05 .executive-fil1,
.caprow2__art:hover .svc-art--05 .executive-fil2 { transform: rotate(40deg) scale(1.4); filter: drop-shadow(0 14px 14px rgba(1,40,122,.2)); }

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
  .wwdcaps__grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 900px) {
  /* hero merges into one: image is the full background, copy overlaid on top */
  .wwdhero { position: relative; padding-top: 0; }
  .wwdhero__grid { display: block; min-height: 0; }
  .wwdhero__media { position: absolute; inset: 0; min-height: 0; }
  .wwdhero__media img { object-fit: cover; object-position: center; }
  .wwdhero__tags { display: none; }
  .wwdhero__text {
    position: relative; z-index: 2;
    padding: clamp(120px, 24vh, 168px) clamp(22px, 6vw, 40px) clamp(48px, 9vw, 64px);
  }
  .wwdstrat__grid { grid-template-columns: 1fr; }
  /* capability rows stack: artwork on top, copy below (always, regardless of --rev) */
  .caprow2 { grid-template-columns: 1fr; gap: 0; }
  .caprow2--rev .caprow2__art { order: 0; }
  .caprow2__art { height: auto; min-height: 0; aspect-ratio: 4/3; }
}
@media (max-width: 760px) {
  .wwdcaps__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  .wwdcaps__grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  /* match the homepage's mobile body size */
  .wwdhero__body p, .wwdstrat__body p { font-size: 17px; }
  .wwdcaps { padding-top: 66px; }
  .wwdcaps__head { margin-bottom: 38px; }
  .caprow2__tagline { font-size: 19px; }
  .caprow2__overview { font-size: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .caprow2__art .svc-art__svg, .caprow2__art :where([class*="-fil"], .art-megaphone, .art-sound) { transition-duration: .01ms !important; }
  .caprow2__art .svc-art__ripple i { animation: none; opacity: 0; }
}