/* Services page — 1c figurine lineup. Ported from the Claude Design file services-refine.css; loads after home-refine.css and pro-refine.css. */
.bp-refined:has(.bp-services){background:radial-gradient(1100px 700px at 50% 0%,#fff8e0a6,#fff8e000 70%),linear-gradient(180deg,#b1d8ec 0%,#d5ebf5 26%,#eef5f6 52%,#f0f6f5 72%,#d9edf6 90%,#b1d8ec 100%)}
.bp-refined .bp-services{padding:clamp(120px,10vw,156px) clamp(16px,3vw,40px) clamp(80px,9vw,140px)}
.bp-refined .bp-services *{box-sizing:border-box}
.bp-refined .sv-head{max-width:760px;margin:0 auto;display:flex;flex-direction:column;align-items:center;text-align:center}
.bp-refined .bp-home .sv-head .eyebrow{justify-content:center;margin:0 0 18px;max-width:none;width:auto;text-align:center}
.bp-refined .sv-head h1{margin:0;font-size:clamp(44px,4.4vw + 16px,88px);font-weight:500;letter-spacing:-.05em;line-height:1;color:var(--ink);text-wrap:balance}
.bp-refined .sv-head h1 span{color:var(--blue)}
.bp-refined .sv-head p.sv-lead{margin:24px 0 0;max-width:440px;font-size:clamp(16px,.4vw + 13px,18px);line-height:1.6;color:var(--copy);text-wrap:pretty}

.bp-refined .sv-shelf{max-width:1240px;margin:clamp(40px,4vw,64px) auto 0;display:grid;grid-template-columns:repeat(8,minmax(0,1fr));row-gap:clamp(16px,2vw,28px)}
.bp-refined .sv-fig{grid-column:span 2;min-width:0;display:flex;flex-direction:column;align-items:center;color:var(--ink);text-decoration:none}
@media(hover:hover){.bp-refined .sv-fig:hover{color:var(--ink)}}
.bp-refined .sv-fig:nth-child(5){grid-column:2 / span 2}
.bp-refined .sv-art{position:relative;z-index:1;width:min(250px,100%);aspect-ratio:1;transition:transform var(--t4) var(--e)}
.bp-refined .sv-art img{display:block;width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 18px 14px #263e4c33)}
.bp-refined .sv-ped{position:relative;width:min(230px,92%);aspect-ratio:230 / 52;margin-top:-13.5%;border-radius:50%;background:radial-gradient(60% 70% at 50% 35%,#fff,#ffffffb3 70%);border:1px solid #fff;box-shadow:inset 0 -6px 12px #263e4c14,0 18px 30px -16px #263e4c66;transition:box-shadow var(--t3) var(--e)}
/* The lit (blue) pedestal is a layer that fades in: a gradient background cannot cross-fade by itself */
.bp-refined .sv-ped::after{content:"";position:absolute;inset:-1px;border-radius:inherit;background:radial-gradient(60% 70% at 50% 35%,#dbe7ff,#ffffffcc 70%);box-shadow:inset 0 -6px 12px #263e4c14;opacity:0;transition:opacity var(--t3) var(--e-io)}
.bp-refined .sv-tag{display:inline-flex;align-items:center;gap:10px;margin-top:16px;min-height:44px;padding:0 8px 0 18px;border-radius:999px;background:#ffffffc7;border:1px solid #fff;font-size:15px;font-weight:500;letter-spacing:-.01em;white-space:nowrap;color:var(--ink);box-shadow:0 1px 2px #263e4c0d,0 10px 24px -14px #263e4c59;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);transition:background-color var(--t2) var(--e-io),color var(--t2) var(--e-io),transform var(--t3) var(--e)}
.bp-refined .sv-tag i{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:#2563eb14;color:var(--blue);transition:background-color var(--t2) var(--e-io),color var(--t2) var(--e-io),transform var(--t3) var(--e)}
.bp-refined .sv-tag svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
/* Hover (pointer devices only) and keyboard focus lift the figure and light its pedestal; a tap gets a press on the tag */
@media(hover:hover){
  .bp-refined .sv-fig:hover .sv-art{transform:translateY(-12px)}
  .bp-refined .sv-fig:hover .sv-ped{box-shadow:inset 0 -6px 12px #263e4c14,0 0 46px -8px #2563eb80}
  .bp-refined .sv-fig:hover .sv-ped::after{opacity:1}
  .bp-refined .sv-fig:hover .sv-tag{background:#fff;color:var(--blue)}
  .bp-refined .sv-fig:hover .sv-tag i{background:var(--blue);color:#fff;transform:translateX(2px)}
}
.bp-refined .sv-fig:focus-visible .sv-art{transform:translateY(-12px)}
.bp-refined .sv-fig:focus-visible .sv-ped{box-shadow:inset 0 -6px 12px #263e4c14,0 0 46px -8px #2563eb80}
.bp-refined .sv-fig:focus-visible .sv-ped::after{opacity:1}
.bp-refined .sv-fig:focus-visible .sv-tag{background:#fff;color:var(--blue)}
.bp-refined .sv-fig:focus-visible .sv-tag i{background:var(--blue);color:#fff}
.bp-refined .sv-fig:active .sv-tag{background:#fff;color:var(--blue);transform:scale(.97);transition-duration:var(--t1)}
.bp-refined .sv-fig:active .sv-tag i{background:var(--blue);color:#fff}
.bp-refined .sv-fig:focus-visible{outline:none}
.bp-refined .sv-fig:focus-visible .sv-tag{outline:2px solid var(--blue);outline-offset:4px}

@media(max-width:1100px){
  .bp-refined .sv-shelf{grid-template-columns:repeat(6,minmax(0,1fr))}
  .bp-refined .sv-fig:nth-child(5){grid-column:span 2}
  .bp-refined .sv-fig:nth-child(7){grid-column:3 / span 2}
}
@media(max-width:700px){
  .bp-refined .bp-services{padding:116px 10px 72px}
  .bp-refined .sv-head{padding:0 8px}
  .bp-refined .sv-head h1{font-size:clamp(40px,11vw,48px);line-height:1.02}
  .bp-refined .sv-head p.sv-lead{font-size:16px;margin-top:18px}
  .bp-refined .sv-shelf{grid-template-columns:repeat(4,minmax(0,1fr));row-gap:28px;column-gap:6px;margin-top:40px}
  .bp-refined .sv-fig,.bp-refined .sv-fig:nth-child(5){grid-column:span 2}
  .bp-refined .sv-fig:nth-child(7){grid-column:2 / span 2}
  .bp-refined .sv-art{width:min(156px,100%)}
  .bp-refined .sv-tag{margin-top:12px;min-height:44px;padding:0 8px 0 14px;font-size:13.5px;gap:8px}
  .bp-refined .sv-tag i{width:28px;height:28px}
  .bp-refined .sv-fig:focus-visible .sv-art{transform:translateY(-6px)}
}
@media(prefers-reduced-motion:no-preference){
  .bp-refined:not([data-motion="off"]) .bp-services .sv-head>*{animation:bp-rise var(--dur) var(--e) both}
  .bp-refined:not([data-motion="off"]) .bp-services .sv-head>:nth-child(2){animation-delay:.12s}
  .bp-refined:not([data-motion="off"]) .bp-services .sv-head>:nth-child(3){animation-delay:.24s}
}