/* ============================================================
   SiliconPath Law - Services, v2.

   Loads AFTER about-v2.css (tokens, .wrap, .sec, .fin, .cta, .h-sec,
   .lead, the shared kinetic kit: .kx split headings and [data-rv]
   reveals under html.st-scroll) and BEFORE cursor-layer.css (.st-spot,
   magnetic, the badge).

   A kinetic scroll story, driven by StringTune (services-story.js):
     glass hero -> paths as sticky stacking cards -> audience, pinned,
     cards rising one by one -> one firm on the dark band, words lighting
     up and pillars lighting along a rail -> FAQ with a sticky heading ->
     the shared closing block.
   EVERY MOTION RULE IS GATED ON html.st-scroll; without it the page is
   plain, static, complete content. Every variable has a fallback.

   Palette: oxblood #5A1F1B as the single accent, warm paper, ink. No yellow.
   ============================================================ */
.skp,.ska,.sko,.skf{--k-ease:cubic-bezier(.2,.8,.2,1)}

/* ======================================================================
   2. PATHS - sticky stacking cards
   ====================================================================== */
.skp__h{margin:0;max-width:18ch}
.skp__stack{margin:clamp(30px,4vw,48px) 0 0;padding:0;list-style:none;display:grid;gap:22px}
.skp__card{display:grid;gap:22px 48px;border-radius:var(--r-lg);
  padding:clamp(26px,3.4vw,46px);
  background:var(--white);border:1px solid var(--line);
  box-shadow:0 30px 60px -40px rgba(62,20,17,.45);transform-origin:50% 0}
@media(min-width:900px){
  .skp__card{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);align-items:start;min-height:320px}
}
.skp__ic{display:grid;place-items:center;width:58px;height:58px;border-radius:17px;font-size:1.35rem;
  color:var(--brand);background:var(--brand-wash);border:1px solid rgba(90,31,27,.12)}
.skp__t{margin:20px 0 0;font-size:clamp(1.4rem,2.4vw,2rem);font-weight:800;letter-spacing:-.03em;line-height:1.15}
.skp__lnk{color:var(--ink);text-decoration:none;
  background-image:linear-gradient(currentColor,currentColor);background-size:0% 2px;
  background-repeat:no-repeat;background-position:0 100%;transition:background-size .45s var(--k-ease)}
.skp__lnk:hover{background-size:100% 2px}
.skp__chips{margin:16px 0 0;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:6px}
.skp__chips li{font-family:var(--mono);font-size:.7rem;font-weight:700;letter-spacing:.06em;
  padding:5px 11px;border-radius:999px;color:var(--brand);background:var(--paper);border:1px solid var(--line-2)}
.skp__d{margin:0;color:var(--ink-2);font-size:1.04rem;line-height:1.72}
.skp__inline{color:var(--brand);text-decoration:none;border-bottom:1px solid currentColor}
.skp__ideal{margin:18px 0 0;padding:14px 18px;border-radius:14px;
  background:var(--paper);border:1px solid var(--line);
  color:var(--ink);font-size:.96rem;line-height:1.6;font-weight:600}
.skp__go{margin-top:20px;display:inline-flex;align-items:center;gap:8px;
  color:var(--brand);font-weight:800;text-decoration:none}
.skp__go i{transition:transform .3s var(--k-ease)}
.skp__go:hover i{transform:translateX(4px)}
/* Tones, so the stack reads as separate cards. */
.skp__card--1{border-color:transparent;color:#fff;
  background:radial-gradient(120% 90% at 100% 0%,rgba(182,90,80,.3) 0%,rgba(182,90,80,0) 60%),
    linear-gradient(160deg,var(--brand-2) 0%,var(--brand) 55%,#3E1411 100%)}
.skp__card--1 .skp__ic{color:#fff;background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.22)}
.skp__card--1 .skp__lnk{color:#fff}
.skp__card--1 .skp__chips li{color:#fff;background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.28)}
.skp__card--1 .skp__d{color:rgba(255,255,255,.88)}
.skp__card--1 .skp__inline{color:#F0DCD8}
.skp__card--1 .skp__ideal{color:#fff;background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.16)}
.skp__card--1 .skp__go{color:#F0DCD8}
.skp__card--3{background:linear-gradient(160deg,#FFFFFF 0%,var(--brand-wash) 100%)}
/* Stacking: each card sticks a little lower than the one before; cards
   underneath recede as later ones cover them (--d ~ cards on top, from the
   list's progress; they finish stacking ~55% through, hence 1.8). */
html.st-scroll .skp__item{position:sticky;top:calc(var(--header-h,73px) + 24px + var(--k,0) * 22px);
  --d:clamp(0, calc(var(--progress,0) * (var(--n,3) - 1) * 1.8 - var(--k,0)), min(2, calc(var(--n,3) - 1 - var(--k,0))))}
html.st-scroll .skp__card{transform:scale(calc(1 - var(--d,0) * .045));
  filter:brightness(calc(1 - var(--d,0) * .08))}
html.st-scroll .skp__stack{padding-bottom:0}

/* ======================================================================
   3. AUDIENCE - pinned; the cards rise in one by one
   ====================================================================== */
.ska{position:relative;background:var(--paper-2);border-block:1px solid var(--line)}
.ska__sticky{padding-block:clamp(64px,8vw,110px)}
.ska__in{display:grid;gap:clamp(28px,4vw,56px);align-items:center}
.ska__hd .h-sec{margin:0;max-width:18ch}
.ska__hd .lead{margin:16px 0 0;max-width:46ch}
.ska__bar{display:none}
.ska__g{margin:0;padding:0;list-style:none;display:grid;gap:14px;grid-template-columns:repeat(2,minmax(0,1fr))}
@media(max-width:479px){.ska__g{grid-template-columns:1fr}}
.ska__c{display:flex;flex-direction:column;border-radius:var(--r-lg);padding:clamp(20px,2.2vw,28px);
  background:var(--white);border:1px solid var(--line);
  box-shadow:0 1px 0 rgba(255,255,255,.9) inset,0 18px 40px -34px rgba(90,31,27,.4)}
.ska__img{display:grid;place-items:center;width:64px;height:64px;border-radius:18px;
  background:var(--brand-wash);border:1px solid rgba(90,31,27,.1)}
.ska__img img{width:40px;height:40px;object-fit:contain}
.ska__n{margin:16px 0 0;font-size:1.12rem;font-weight:800;letter-spacing:-.02em;line-height:1.25;color:var(--ink)}
.ska__p{margin:8px 0 0;color:var(--ink-2);font-size:.95rem;line-height:1.65}
@media(min-width:960px){.ska__in{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr)}}
@media(min-width:760px) and (min-height:600px){
  html.st-scroll .ska{height:220svh}
  html.st-scroll .ska__sticky{position:sticky;top:0;min-height:100svh;display:flex;align-items:center;
    padding-block:calc(var(--header-h,73px) + 24px) 32px}
  html.st-scroll .ska__in{width:100%}
  /* Card k rises as the section's progress passes its turn. */
  html.st-scroll .ska__c{
    --t:clamp(0, calc(var(--progress,1) * 5.2 - var(--k,0) * .95), 1);
    opacity:calc(.08 + var(--t) * .92);
    transform:translateY(calc((1 - var(--t)) * 70px)) scale(calc(.95 + var(--t) * .05))}
  /* Progress line under the heading. */
  html.st-scroll .ska__bar{display:block;margin-top:28px;height:3px;max-width:280px;border-radius:3px;
    background:var(--line-2);overflow:hidden}
  html.st-scroll .ska__bar i{display:block;height:100%;transform-origin:0 50%;background:var(--brand);
    transform:scaleX(clamp(0, calc(var(--progress,1) * 1.25), 1))}
}

/* ======================================================================
   4. ONE FIRM - dark band; words light up, pillars light along a rail
   ====================================================================== */
.sko{position:relative;isolation:isolate;overflow:hidden;color:#fff;
  padding-block:clamp(70px,9vw,128px);
  background:radial-gradient(130% 100% at 50% 0%,var(--band-1) 0%,transparent 62%),
    linear-gradient(168deg,var(--band-2) 0%,var(--band-deep) 100%)}
.sko__dots{position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.45;
  background-image:radial-gradient(rgba(240,220,216,.5) 1px,transparent 1px);background-size:26px 26px}
.sko__in{display:grid;gap:clamp(34px,5vw,72px);align-items:center}
.sko__txt .h-sec{margin:0;color:#fff;max-width:16ch}
.sko__big{margin:22px 0 0;font-size:clamp(1.15rem,1.9vw,1.6rem);line-height:1.5;font-weight:700;
  letter-spacing:-.018em;color:#fff;max-width:40ch}
/* Words light up as the paragraph crosses the screen: the shared .wlit
   rule in about-v2.css. */
.sko__rail{position:relative;margin:0;padding:0 0 0 30px;list-style:none;display:grid;gap:14px}
/* The rail: a line down the left; its fill follows the section. */
.sko__rail::before,.sko__rail::after{content:"";position:absolute;left:9px;top:24px;bottom:24px;width:2px;border-radius:2px}
.sko__rail::before{background:rgba(255,255,255,.16)}
.sko__rail::after{background:linear-gradient(180deg,#F0DCD8,#D98A7F);transform-origin:50% 0;
  transform:scaleY(clamp(0, calc((var(--progress,1) - .22) * 2.4), 1))}
.sko__p{display:flex;gap:16px;align-items:flex-start;border-radius:18px;padding:20px 22px;
  background:linear-gradient(168deg,rgba(255,255,255,.09),rgba(255,255,255,.03));
  border:1px solid rgba(255,255,255,.16);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
/* Each pillar lights as the fill reaches it. */
html.st-scroll .sko__p{
  --t:clamp(0, calc((var(--progress,1) - .26 - var(--k,0) * .12) * 8), 1);
  opacity:calc(.35 + var(--t) * .65);
  transform:translateX(calc((1 - var(--t)) * 16px));
  transition:border-color .3s ease}
.sko__ic{flex:none;display:grid;place-items:center;width:46px;height:46px;border-radius:14px;color:#fff;font-size:1.1rem;
  background:linear-gradient(160deg,#9A3D35,var(--brand));border:1px solid rgba(255,255,255,.18)}
.sko__b strong{display:block;font-size:1.12rem;font-weight:800;letter-spacing:-.02em;color:#fff}
.sko__b span{display:block;margin-top:4px;color:rgba(255,255,255,.84);font-size:.97rem;line-height:1.6}
@media(min-width:960px){.sko__in{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr)}}

/* ======================================================================
   5. FAQ - sticky heading, smooth accordion
   ====================================================================== */
.skf__in{display:grid;gap:clamp(24px,4vw,64px);align-items:start}
.skf__hd .h-sec{margin:0;max-width:12ch}
@media(min-width:960px){
  .skf__in{grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr)}
  .skf__hd{position:sticky;top:calc(var(--header-h,73px) + 40px)}
}
.skf__list{display:grid;gap:12px}
.skf__i{border-radius:18px;background:var(--white);border:1px solid var(--line);
  box-shadow:0 14px 30px -26px rgba(90,31,27,.35);
  transition:border-color .3s ease,box-shadow .3s ease;
  /* Smooth open/close where supported (Chrome 131+); elsewhere it snaps. */
  interpolate-size:allow-keywords}
.skf__i[open]{border-color:var(--line-2);box-shadow:0 24px 44px -30px rgba(90,31,27,.45)}
.skf__i::details-content{block-size:0;overflow:hidden;
  transition:block-size .4s var(--k-ease),content-visibility .4s allow-discrete}
.skf__i[open]::details-content{block-size:auto}
.skf__q{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:18px;
  padding:20px 22px;font-weight:800;font-size:1.04rem;letter-spacing:-.015em;color:var(--ink)}
.skf__q::-webkit-details-marker{display:none}
.skf__q:focus-visible{outline:3px solid var(--brand);outline-offset:-3px;border-radius:18px}
/* A plus that turns into a minus. */
.skf__s{position:relative;flex:none;width:30px;height:30px;border-radius:50%;
  background:var(--brand-wash);border:1px solid rgba(90,31,27,.14);transition:background .3s ease}
.skf__s::before,.skf__s::after{content:"";position:absolute;left:50%;top:50%;width:12px;height:2px;border-radius:2px;
  background:var(--brand);translate:-50% -50%;transition:rotate .35s var(--k-ease),background .3s ease}
.skf__s::after{rotate:90deg}
.skf__i[open] .skf__s{background:var(--brand)}
.skf__i[open] .skf__s::before,.skf__i[open] .skf__s::after{background:#fff}
.skf__i[open] .skf__s::after{rotate:0deg}
.skf__a{padding:0 22px 22px}
.skf__a p{margin:0;color:var(--ink-2);font-size:.98rem;line-height:1.72;max-width:64ch}

@media(prefers-reduced-motion:reduce){
  .skp__lnk,.skp__go i,.skf__s,.skf__s::before,.skf__s::after{transition:none}
  .skf__i::details-content{transition:none}
}
/* The hero pathway navigator (.pnv) is shared: about-v2.css. */