/* Services: Produx-style expanding panels with animated line icons, on the site's paper with its serif + sans. */
.services { --ease: cubic-bezier(.16, 1, .3, 1); padding: 0; overflow-x: clip; background: var(--paper); color: var(--ink); }
.services .wrap { max-width: none; padding: 0 var(--pad); }
.services .svc-stick { padding: 130px 0 120px; }
.services :is(button, [tabindex]):focus-visible { outline: 2px solid var(--blue); outline-offset: 4px; }
.services i { font: 500 12px var(--sans); font-style: normal; }
.svc { list-style: none; }

@property --ic { syntax: "<length>"; inherits: true; initial-value: 96px; }
@property --k { syntax: "<number>"; inherits: true; initial-value: 1; }

/* ---------- line icons: one 1.5px stroke, round caps, ink with a single blue accent. --k keeps the stroke 1.5px at any size (96 / rendered size) ---------- */
.ic { --dur: 9s; width: var(--ic, 96px); height: var(--ic, 96px); flex: none; overflow: visible; color: rgba(11,11,12,.8); fill: none; stroke: currentColor;
  stroke-width: calc(1.5px * var(--k)); stroke-linecap: round; stroke-linejoin: round; transition: color 1s var(--ease), transform 1.4s var(--ease); }
.ic * { animation-duration: var(--dur); animation-iteration-count: infinite; animation-timing-function: cubic-bezier(.45, 0, .2, 1); }
.ic .f { opacity: .38; }
.ic .x { opacity: 0; transition: opacity 1.1s var(--ease); }
.s2-p.on .x { opacity: 1; }
.s2-p.on .ic { color: var(--ink); }
.ic .d { stroke-dasharray: 100; stroke-dashoffset: 0; }
.ic :is(.pen, .live, .up) { fill: var(--blue); stroke: none; }

/* Design */
.ic-design .d { animation-name: ic-draw; }
.ic-design .pen { offset-path: path("M20 62C30 22 52 22 52 48C52 74 72 68 78 34"); offset-distance: 100%; animation-name: ic-pen; }
@keyframes ic-draw { 0%, 3% { stroke-dashoffset: 100; opacity: 1; } 50%, 86% { stroke-dashoffset: 0; opacity: 1; } 96% { stroke-dashoffset: 0; opacity: 0; } 100% { stroke-dashoffset: 100; opacity: 0; } }
@keyframes ic-pen { 0% { offset-distance: 0%; opacity: 0; } 3% { offset-distance: 0%; opacity: 1; } 50% { offset-distance: 100%; opacity: 1; } 60%, 100% { offset-distance: 100%; opacity: 0; } }

/* Build */
.ic-build { --dur: 10s; }
.ic-build .br { transition: transform 1.4s var(--ease); }
.s2-p.on .ic-build .l { transform: translateX(-3px); }
.s2-p.on .ic-build .r { transform: translateX(3px); }
.ic-build .cur { stroke: var(--blue); transform: translate(50px, 58px); animation-name: ic-cur; }
.ic-build .t1 { animation-name: ic-t1; } .ic-build .t2 { animation-name: ic-t2; } .ic-build .t3 { animation-name: ic-t3; }
@keyframes ic-t1 { 0%, 4% { stroke-dashoffset: 100; opacity: 1; } 20%, 86% { stroke-dashoffset: 0; opacity: 1; } 95% { stroke-dashoffset: 0; opacity: 0; } 100% { stroke-dashoffset: 100; opacity: 0; } }
@keyframes ic-t2 { 0%, 24% { stroke-dashoffset: 100; opacity: 1; } 42%, 86% { stroke-dashoffset: 0; opacity: 1; } 95% { stroke-dashoffset: 0; opacity: 0; } 100% { stroke-dashoffset: 100; opacity: 0; } }
@keyframes ic-t3 { 0%, 46% { stroke-dashoffset: 100; opacity: 1; } 58%, 86% { stroke-dashoffset: 0; opacity: 1; } 95% { stroke-dashoffset: 0; opacity: 0; } 100% { stroke-dashoffset: 100; opacity: 0; } }
@keyframes ic-cur {
  0% { transform: translate(36px, 38px); opacity: 0; } 3%, 4% { transform: translate(36px, 38px); opacity: 1; } 20% { transform: translate(58px, 38px); }
  24% { transform: translate(42px, 48px); } 42% { transform: translate(62px, 48px); } 46% { transform: translate(36px, 58px); } 58% { transform: translate(50px, 58px); opacity: 1; }
  62% { opacity: 1; } 66% { opacity: 0; } 70% { opacity: 1; } 74% { opacity: 0; } 78%, 86% { transform: translate(50px, 58px); opacity: 1; } 95% { opacity: 0; } 100% { transform: translate(36px, 38px); opacity: 0; }
}

/* Launch */
.ic-launch { --dur: 8s; }
.ic-launch .mer { animation-name: ic-mer; animation-duration: 12s; animation-timing-function: ease-in-out; }
.ic-launch .m2 { animation-delay: -6s; }
.ic-launch .live { animation-name: ic-live; animation-duration: 4s; animation-timing-function: ease-in-out; }
.ic-launch .up { opacity: 0; animation-name: ic-up; }
.ic-launch .ring { stroke: var(--blue); opacity: 0; animation-name: ic-ring; }
.ic-launch .trail { stroke-dasharray: 2 5; }
@keyframes ic-mer { 0%, 100% { rx: 26px; } 50% { rx: 0px; } }
@keyframes ic-live { 0%, 100% { opacity: .3; } 50% { opacity: 1; } }
@keyframes ic-up { 0% { transform: translateY(0); opacity: 0; } 12% { opacity: 1; } 55% { transform: translateY(-24px); opacity: 1; } 65%, 100% { transform: translateY(-24px); opacity: 0; } }
@keyframes ic-ring { 0%, 40% { r: 26px; opacity: 0; } 46% { r: 26px; opacity: .9; } 100% { r: 38px; opacity: 0; } }

/* Your dashboard */
.ic-dash .knob, .ic-dash .tk { fill: #fff; }
.ic-dash .fill { transform-origin: 26px 34px; transform: scaleX(.45); }
.ic-dash .fill.b { transform-origin: 26px 48px; transform: scaleX(.7); }
.ic-dash .fill.a { stroke: var(--blue); animation-name: ic-fa; }
.ic-dash .fill.b { animation-name: ic-fb; }
.ic-dash .ka { transform: translateX(20px); animation-name: ic-ka; }
.ic-dash .kb { transform: translateX(31px); animation-name: ic-kb; }
.ic-dash .tog { stroke: var(--blue); animation-name: ic-tog; }
.ic-dash .tk { transform: translateX(12px); animation-name: ic-tk; }
@keyframes ic-ka { 0%, 100% { transform: translateX(0); } 25%, 50% { transform: translateX(30px); } 62%, 80% { transform: translateX(10px); } }
@keyframes ic-fa { 0%, 100% { transform: scaleX(0); } 25%, 50% { transform: scaleX(.68); } 62%, 80% { transform: scaleX(.23); } }
@keyframes ic-kb { 0%, 20%, 100% { transform: translateX(0); } 40% { transform: translateX(14px); } 70%, 85% { transform: translateX(38px); } }
@keyframes ic-fb { 0%, 20%, 100% { transform: scaleX(0); } 40% { transform: scaleX(.32); } 70%, 85% { transform: scaleX(.86); } }
@keyframes ic-tk { 0%, 40%, 84%, 100% { transform: translateX(0); } 46%, 78% { transform: translateX(12px); } }
@keyframes ic-tog { 0%, 40%, 84%, 100% { stroke: rgba(11,11,12,.5); fill: rgba(77,161,255,0); } 46%, 78% { stroke: #4da1ff; fill: rgba(77,161,255,.24); } }

/* ---------- 2 Produx: lit-up statement + expanding panels ---------- */
.services .svc-stick { padding: 128px 0 90px; }
.services .h2 { font: 400 clamp(30px, 3.6vw, 56px)/1.08 var(--serif); letter-spacing: -.035em; max-width: 20em; margin-bottom: clamp(36px, 6vh, 64px); }
.services .h2 span { opacity: .22; }
.s2-row { display: flex; gap: 14px; height: clamp(430px, 60vh, 560px); }
.s2-p { --ic: 150px; --k: .64; position: relative; flex: 1 1 0; min-width: 0; overflow: hidden; cursor: pointer; outline: none; background: #fff; border: 1px solid rgba(11,11,12,.07); border-radius: 6px; transition: flex-grow 1.2s var(--ease), border-color 1s var(--ease), --ic 1.2s var(--ease), --k 1.2s var(--ease); }
.s2-p.on { --ic: 220px; --k: .4364; flex-grow: 3.4; border-color: rgba(11,11,12,.14); box-shadow: 0 24px 60px -36px rgba(11,11,12,.3); }
.s2-p::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 60% 44% at 50% 38%, rgba(77,161,255,.09), transparent 70%); opacity: 0; transition: opacity 1.2s var(--ease); }
.s2-p.on::before { opacity: 1; }
.s2-p .ic { position: absolute; left: 50%; top: 50%; margin: calc(var(--ic) / -2) 0 0 calc(var(--ic) / -2); transition: top 1.2s var(--ease), transform 1.4s var(--ease), color 1s var(--ease); }
.s2-p.on .ic { top: 37%; }
.s2-p i { position: absolute; top: 18px; right: 18px; padding: 6px 12px; border-radius: 999px; background: rgba(11,11,12,.06); color: var(--muted); opacity: 0; transition: opacity .8s .2s; }
.s2-p.on i { opacity: 1; }
.s2-p div { position: absolute; left: 28px; bottom: 28px; width: 380px; max-width: calc(100% - 56px); opacity: 0; transform: translateY(14px); transition: opacity .8s .1s var(--ease), transform 1s .1s var(--ease); }
.s2-p.on div { opacity: 1; transform: none; }
.s2-p h3 { font: 400 clamp(28px, 2.6vw, 40px)/1.05 var(--serif); letter-spacing: -.035em; }
.s2-p p { margin-top: 12px; font: 400 15px/1.5 var(--sans); color: #5c5c5c; }

/* stills: no loops, a finished frame of each icon */
@media (prefers-reduced-motion: reduce) {
  .services *, .services *::before, .services *::after { animation: none !important; transition: none !important; }
  .services .h2 span { opacity: 1; }
  .ic-launch .m2 { display: none; }
  .ic-launch .mer { rx: 12px; }
  .ic-launch .live { opacity: 1; }
}

@media (max-width: 1180px) { .s2-p { --ic: 108px; --k: .889; } .s2-p.on { --ic: 160px; --k: .6; } }
@media (max-width: 900px) { .s2-p { --ic: 80px; --k: 1.2; } .s2-p.on { --ic: 120px; --k: .8; } }

@media (max-width: 760px) {
  .services .svc-stick { padding: 80px 0 56px; }
  .services .wrap { padding: 0 20px; }
  .services .h2 { margin-bottom: 28px; }
  /* compact rows, every one open: icon on the left, copy on the right */
  .s2-row { flex-direction: column; height: auto; gap: 10px; }
  .s2-p, .s2-p.on { --ic: 64px; --k: 1.5; flex: none; display: flex; align-items: flex-start; gap: 18px; padding: 20px; box-shadow: none; }
  .s2-p::before { opacity: 0; }
  .s2-p .ic, .s2-p.on .ic { position: static; margin: 0; transform: none; }
  .s2-p i { display: none; }
  .s2-p div { opacity: 1; transform: none; position: static; width: auto; flex: 1; max-width: none; }
  .s2-p h3 { font-size: 24px; }
  .s2-p p { margin-top: 6px; font-size: 14px; }
  .s2-p .x { opacity: 1; }
}
}