/* Services (Figma D03 647:350 · T03 672:1067 · M03 673:75076) */

/* ---------- shared page bits (same in about/brokerage css) ---------- */
.page-title { font-size: 40px; }
@media (min-width: 768px) { .page-title { font-size: 67px; } }
@media (max-width: 767px) { main .t-h2 { font-size: 28px; } }
.crumb { display: flex; flex-wrap: wrap; gap: 4px 12px; }
.btns { display: flex; flex-wrap: wrap; gap: 12px; }
.split-head { display: grid; gap: 10px; margin-bottom: 40px; }
@media (min-width: 768px) { .split-head { gap: 16px; margin-bottom: 40px; } }
@media (min-width: 1200px) { .split-head { grid-template-columns: 1fr 440px; align-items: baseline; gap: 24px; } }
.art { width: 100%; height: auto; overflow: visible; }
.art text { font-family: var(--mono); font-weight: 500; }
.art .m { font-size: 11px; letter-spacing: .05em; }
.art .mm { font-size: 12px; letter-spacing: .05em; }
.art .s { font-family: var(--serif); font-weight: 400; font-size: 13px; }
.art .h { font-family: var(--serif); font-weight: 400; font-size: 20px; }

/* ---------- intro ---------- */
.intro { border-bottom: 1px solid var(--line); padding: 40px 0 32px; }
.intro-row { display: grid; gap: 40px; }
.intro-text { display: grid; justify-items: start; }
.intro-text .crumb { margin-bottom: 36px; }
.intro-text .t-body { margin-top: 16px; }
.intro-text .btns { margin-top: 28px; }
.intro-art { justify-self: center; width: 100%; max-width: 350px; }
@media (max-width: 767px) { .intro-text .t-body { font-size: 15px; line-height: 1.5; } }
@media (min-width: 768px) {
  .intro { padding: 72px 0 96px; }
  .intro-text .crumb { margin-bottom: 52px; }
  .intro-text .t-body { margin-top: 20px; }
  .intro-text .btns { margin-top: 44px; }
  .intro-art { justify-self: start; max-width: 640px; }
  .intro-row { gap: 56px; }
}
@media (min-width: 1200px) {
  .intro { padding: 72px 0 96px; }
  .intro-row { grid-template-columns: max-content minmax(0, 640px); justify-content: space-between; align-items: center; gap: 40px; }
  .intro-text { padding-top: 24px; }
}

/* ---------- service blocks ---------- */
.svc-list .split-head { margin-bottom: 56px; }
.svc-b { display: grid; gap: 24px; scroll-margin-top: calc(var(--header-h) + 24px); }
.svc-media { height: 220px; }
.svc-txt { display: grid; justify-items: start; align-content: center; }
.svc-num { display: flex; align-items: baseline; gap: 16px; }
.svc-txt .t-h2 { margin-top: 16px; }
.svc-p { margin-top: 8px; }
.svc-facts { width: 100%; margin-top: 24px; border-top: 1px solid var(--k600); }
.svc-facts div { display: flex; justify-content: space-between; align-items: center; gap: 16px; min-height: 40px; padding-block: 8px; border-bottom: 1px solid var(--line); }
.svc-facts dt { color: var(--k600); }
.svc-facts dd { text-align: right; }
.svc-txt .btn--link { margin-top: 24px; }
.svc-media figcaption { left: 16px; bottom: 16px; }
.svc-box { position: relative; background-color: var(--k50); border: 1px solid var(--line); display: grid; place-items: center; overflow: hidden;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20'%3E%3Cpath d='M0 .5H20M.5 0V20' stroke='%23E6E6E6' stroke-dasharray='3 3' fill='none'/%3E%3C/svg%3E"); background-size: 20px 20px; }
.svc-box::before, .svc-box::after { content: ""; position: absolute; background: #B5D7C6; }
.svc-box::before { left: 0; right: 0; top: 50%; height: 1px; }
.svc-box::after { top: 0; bottom: 0; left: 50%; width: 1px; }
.svc-box .sq { position: relative; z-index: 1; width: 112px; height: 112px; display: grid; place-items: center; background: var(--white); border: 1px solid var(--g700); color: var(--g700); }
.svc-box .sq .icon--svc { width: 56px; height: 56px; }
@media (min-width: 768px) { .svc-box .sq .icon--svc { width: 64px; height: 64px; } }
.svc-box .k { position: absolute; left: 16px; top: 14px; }
.svc-box .cs { position: absolute; left: 16px; bottom: 12px; }
@media (max-width: 767px) {
  .svc-list .rule { display: none; }
  .svc-b + .rule + .svc-b, .svc-list .svc-b ~ .svc-b { margin-top: 56px; }
  .svc-txt .t-h2 { font-size: 20px; line-height: 1.3; }
  .svc-p { font-size: 15px; line-height: 1.5; }
  .svc-facts dt { font-size: 13px; }
}
@media (min-width: 768px) {
  .svc-list .split-head { margin-bottom: 48px; }
  .svc-list .rule { margin-block: 48px; }
  .svc-list .split-head + .rule { margin-top: 0; }
  .svc-b { gap: 32px; }
  .svc-media { height: 400px; }
  .svc-txt .t-h2 { margin-top: 24px; }
  .svc-facts { margin-top: 32px; border-top-color: var(--line); }
  .svc-facts div { min-height: 45.5px; }
  .svc-txt .btn--link { margin-top: 32px; }
  .svc-media figcaption { left: 24px; bottom: 24px; }
  .svc-box .sq { width: 200px; height: 200px; }
  .svc-box .k { left: 24px; top: 24px; }
  .svc-box .cs { left: 24px; bottom: 24px; }
  .svc-box { background-size: 40px 40px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40'%3E%3Cpath d='M0 .5H40M.5 0V40' stroke='%23E6E6E6' stroke-dasharray='3 3' fill='none'/%3E%3C/svg%3E"); }
}
@media (min-width: 1200px) {
  .svc-list .rule { margin-block: 56px; }
  .svc-b { grid-template-columns: 520px 1fr; gap: 80px; align-items: center; }
  .svc-b .svc-media { order: 2; height: 520px; }
  .svc-b.is-rev { grid-template-columns: 1fr 520px; }
  .svc-b.is-rev .svc-media { order: 0; }
}

/* ---------- clients ---------- */
.band-green .split-head .t-h2 { color: var(--white); }
.cl-grid.cells--dark, .cl-grid.cells--dark > * { border-color: #1C5E40; }
.cl { position: relative; display: grid; gap: 28px; padding: 20px 0 24px; }
.cl .icon { position: absolute; right: 0; top: 18px; color: var(--g300); }
.cl .t-h3 { color: var(--white); margin-bottom: 4px; }
@media (max-width: 767px) {
  .cl-grid { border: 0; border-top: 1px solid #1C5E40; }
  .cl-grid > .cl { border-right: 0; }
  .cl { gap: 6px; }
  .cl .t-monos { margin-bottom: 4px; }
  .cl .t-h3 { padding-right: 40px; }
  .cl .t-text { font-size: 13px; }
}
@media (min-width: 768px) {
  .cl { min-height: 219px; padding: 24px; align-content: space-between; }
  .cl .icon { right: 24px; top: 24px; }
}
@media (min-width: 1200px) { .band-green .split-head { margin-bottom: 48px; } }

/* ---------- process ---------- */
.flow { margin-top: 8px; }

.flow > div { width: 100%; }
.art-flow-m { max-width: 350px; display: block; margin-inline: auto; }

/* ---------- CTA ---------- */
.cta2-row { display: grid; gap: 40px; }
.cta2-text { display: grid; justify-items: start; }
.cta2-text .t-body { margin-top: 12px; }
.cta2-text .btns { margin-top: 32px; }
.contact-list li { display: flex; align-items: center; gap: 16px; min-height: 49px; padding-block: 12px; border-bottom: 1px solid var(--line); }
.contact-list li:first-child { border-top: 1px solid var(--line); }
.contact-list .icon { color: var(--g700); }
.contact-list a:hover { color: var(--g700); }
@media (max-width: 767px) { .cta2-text .t-body { font-size: 15px; line-height: 1.5; } }
@media (min-width: 768px) { .contact-list li { min-height: 57px; } }
@media (min-width: 1200px) {
  .cta2-row { grid-template-columns: 1fr 520px; align-items: center; gap: 80px; }
  .cta2-text .t-body { margin-top: 16px; }
}

/* ---------- phase 3: motion, states, responsive polish ---------- */
@media (max-width: 767px) { .page-title { font-size: min(40px, calc((100vw - 40px) / 8.9)); } .intro-row { grid-template-columns: minmax(0, 1fr); } }
.draw [data-fade] { opacity: 0; transition: opacity .8s ease; transition-delay: var(--d, .3s); }
.draw.is-in [data-fade] { opacity: 1; }

/* service boxes: the crosshair draws out from the centre, the icon square settles */
.svc-box.reveal::before { transform: scaleX(0); }
.svc-box.reveal::after { transform: scaleY(0); }
.svc-box.reveal::before, .svc-box.reveal::after { transition: transform 1.2s var(--ease) .2s; }
.svc-box.reveal.is-in::before, .svc-box.reveal.is-in::after { transform: none; }
.svc-box .sq { transition: transform .6s var(--ease), box-shadow .3s ease; }
.svc-b:hover .svc-box .sq { transform: translateY(-4px); box-shadow: 0 0 0 6px var(--g50); }
.svc-b:hover .photo img { transform: scale(1.035); }

/* fact rows and the "details" link */
.svc-facts dd { transition: color .2s; }
.svc-facts div:hover dd { color: var(--g700); }
.svc-txt .btn--link:hover .icon, .svc-txt .btn--link:focus-visible .icon { transform: translateX(4px); }
.svc-txt .btn--link:focus-visible { color: var(--g700); }
@media (max-width: 767px) { .svc-txt .btn--link { min-height: 44px; align-items: flex-end; margin-top: 0; } }

/* client cells on the green band */
.cl { transition: background .25s ease; }
.cl .icon { transition: transform .5s var(--ease), color .2s; }
.cl:hover .icon { transform: translateY(-3px); color: var(--white); }
@media (max-width: 767px) { .cl:hover { background: transparent; } }

/* contact rows */
.contact-list a { transition: color .2s; }
.contact-list a:focus-visible { color: var(--g700); }
.contact-list li { transition: padding-left .3s var(--ease); }
.contact-list li:has(a):hover { padding-left: 4px; }
@media (max-width: 767px) { .contact-list a { min-height: 44px; display: inline-flex; align-items: center; } }

@media (prefers-reduced-motion: reduce) {
  .draw [data-fade] { opacity: 1 !important; transition: none !important; }
  .svc-box.reveal::before, .svc-box.reveal::after { transform: none !important; transition: none !important; }
  .svc-box .sq, .contact-list li { transition: none; }
}