/* what-we-do.html: Built by tools/page_mockups/build.py from tools/page_mockups/what-we-do-*.html. Edit that file, not this one. */

/* shared section styles from the hero mockups */
.pm-h2{ font-size: clamp(2.3rem,4.8vw,4.4rem); line-height:.95; letter-spacing:-.025em; }
.pm-lede{ margin-top: 1.1rem; max-width: 36em; font-size: clamp(1.02rem,1.2vw,1.15rem); color: var(--ink-soft); }
.pm-sec{ padding: clamp(4.5rem,9vw,7.5rem) 0; }

.w1{ background: var(--paper) !important; padding: clamp(7.5rem,13vh,9.5rem) 0 clamp(4rem,8vw,6rem); }
.w1 .grid2{ display:grid; grid-template-columns: minmax(0,.9fr) minmax(0,1.1fr); gap: clamp(2rem,5vw,5rem); align-items:center; }
.w1 h1{ font-size: clamp(2.8rem, 5.4vw, 5.2rem); line-height:.93; letter-spacing:-.03em; }
.w1 .sub{ margin-top: 1.2rem; max-width: 32em; color: var(--ink-soft); font-size: clamp(1.02rem,1.2vw,1.15rem); }
.w1 .detail{ margin-top: 2rem; background: var(--white); padding: 1.5rem 1.6rem; min-height: 15rem; }
.w1 .detail h2{ font-size: clamp(1.8rem,2.6vw,2.4rem); line-height:1; color: var(--ink); }
.w1 .detail .tag{ font-family: var(--font-display); font-style:italic; color: var(--accent-deep); font-size: 1.2rem; margin-top:.3rem; }
.w1 .detail ul{ margin-top: 1rem; display:grid; gap:.45rem; }
.w1 .detail li{ padding-left: 1.1rem; position:relative; color: var(--ink); }
.w1 .detail li::before{ content:''; position:absolute; left:0; top:.6em; width:6px; height:6px; background: var(--brand); }
.w1 .detail.swap{ animation: w1-in .55s var(--ease) both; }
@keyframes w1-in{ from{ opacity:0; transform: translateY(10px); } }
.ring{ position:relative; width: min(100%, 560px); margin-inline:auto; aspect-ratio:1; }
.ring svg{ width:100%; height:100%; overflow:visible; }
.ring .seg{ cursor:pointer; transition: transform .5s var(--ease), fill .4s var(--ease); outline:none; }
.ring .seg path{ transition: fill .4s var(--ease); }
.ring .seg:hover, .ring .seg:focus-visible{ transform: translate(var(--dx), var(--dy)); }
.ring .seg.on path{ fill: var(--accent) !important; }
.ring .seg text{ font-family: var(--font-body); font-weight:700; font-size: 13px; fill: var(--paper); pointer-events:none; }
.ring .seg.on text{ fill: var(--forest); }
.ring .seg:focus-visible path{ stroke: var(--forest); stroke-width:3; }
.ring .mid{ position:absolute; inset: 27%; display:grid; place-items:center; text-align:center; pointer-events:none; }
.ring .mid b{ display:block; font-family: var(--font-display); font-weight:500; font-size: clamp(1.6rem, 3vw, 2.4rem); line-height:1; color: var(--ink); }
.ring .mid span{ display:block; margin-top:.5rem; font-size:.85rem; color: var(--muted); }
.js-anim .ring .seg{ animation: w1-seg .9s var(--ease) both; animation-delay: calc(var(--i) * .09s + .2s); }
@keyframes w1-seg{ from{ opacity:0; transform: scale(.86) rotate(-12deg); } }
.w1-cpa{ background: var(--forest); color: var(--paper); }
.w1-cpa .row{ display:grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: clamp(2rem,5vw,5rem); align-items:center; }
.w1-cpa h2{ color: var(--paper); }
.w1-cpa p{ color: rgba(250,250,247,.82); }
.w1-cpa .fine{ margin-top: 1.4rem; font-size:.85rem; color: rgba(250,250,247,.55); }
.w1-cpa img{ width:100%; aspect-ratio: 16/10; object-fit:cover; }
@media (max-width: 900px){ .w1 .grid2, .w1-cpa .row{ grid-template-columns: 1fr; } .w1 .detail{ min-height:0; }
  /* phones: headline, then the ring to tap, then what it opens */
  .w1 .grid2{ gap: 0; } .w1 .grid2 > div:first-child{ display: contents; }
  .w1 h1{ order:0; } .w1 .sub{ order:1; } .w1 .ring{ order:2; margin-top: 2rem; width: min(100%, 340px); } .w1 .detail{ order:3; } }