/* Story skin (Oversight scroll-story style): warm white canvas, sections read as numbered chapters with a
   sticky heading column, Plus Jakarta Sans throughout. Colours come from the page theme. */
body:has(.skin-story) {
    --st-bg: color-mix(in srgb, var(--pl) 55%, #fbfaf7); --st-ink: var(--pd); --st-mute: color-mix(in srgb, var(--pd) 60%, #fff); --st-line: color-mix(in srgb, var(--pd) 14%, transparent);
    --st-a: var(--pa); --st-b: var(--pb); --st-font: "Plus Jakarta Sans", system-ui, sans-serif;
    --sk-band: var(--pa); --sk-accent: var(--pi); --sk-display: "Plus Jakarta Sans", sans-serif;
    background: var(--st-bg);
}
body:has(.skin-story) main { background: var(--st-bg); color: var(--st-ink); font-family: var(--st-font); counter-reset: ch; }
body:has(.skin-story) main .sv-wrap, body:has(.skin-story) main .sv-sec, body:has(.skin-story) main [class$="-sec"] { background: transparent !important; }
body:has(.skin-story) main :is(h1, h2, h3, h4, .sv-title) { font-family: var(--st-font); color: var(--st-ink); letter-spacing: -.03em; }

/* Chapters: each section gets a rule, a chapter number and a sticky heading */
body:has(.skin-story) main > .sv-wrap + .sv-wrap > .sv-sec { border-top: 1px solid var(--st-line); }
body:has(.skin-story) main .sv-sec { padding-block: clamp(64px, 9vw, 120px); }
body:has(.skin-story) main .sv-title { font-weight: 800; font-size: clamp(2rem, 4vw, 3.2rem); line-height: 1.05; max-width: 18ch; text-align: left; margin-inline: 0; }
body:has(.skin-story) main .sv-sec > .wrap > .sv-title::before { counter-increment: ch; content: "Chapter " counter(ch, decimal-leading-zero); display: flex; align-items: center; gap: 12px; margin-bottom: 18px; font: 600 .78rem/1 var(--st-font); letter-spacing: .14em; text-transform: uppercase; color: var(--st-a); }
body:has(.skin-story) main .sv-sec > .wrap > .sv-title::after { content: ""; display: block; width: 56px; height: 4px; margin-top: 20px; border-radius: 4px; background: linear-gradient(90deg, var(--st-a), var(--st-b)); }
body:has(.skin-story) main .sv-intro { color: var(--st-mute); text-align: left; margin-inline: 0; max-width: 52ch; font-size: 1.05rem; }
@media (min-width: 1000px) {
    body:has(.skin-story) main .sv-sec > .wrap:has(> .sv-title + .sv-intro + *), body:has(.skin-story) main .sv-sec > .wrap:has(> .sv-title + :is(ul, ol, div)) { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); column-gap: 56px; align-items: start; }
    body:has(.skin-story) main .sv-sec > .wrap:has(> .sv-title + .sv-intro + *) > .sv-title, body:has(.skin-story) main .sv-sec > .wrap:has(> .sv-title + :is(ul, ol, div)) > .sv-title { position: sticky; top: 110px; grid-column: 1; }
    body:has(.skin-story) main .sv-sec > .wrap:has(> .sv-title + .sv-intro + *) > .sv-intro { grid-column: 1; grid-row: 2; position: sticky; top: 300px; }
    body:has(.skin-story) main .sv-sec > .wrap:has(> .sv-title + .sv-intro + *) > :not(.sv-title, .sv-intro), body:has(.skin-story) main .sv-sec > .wrap:has(> .sv-title + :is(ul, ol, div)) > :not(.sv-title, .sv-intro) { grid-column: 2; grid-row: 1 / span 3; margin-top: 0; }
    body:has(.skin-story) main .sv-sec > .wrap:has(> .sv-title + :is(ul, ol, div)) :is(.pp-opts, .pp-bento, .pp-svc-grid) { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
    body:has(.skin-story) main .pp-steps { grid-template-columns: minmax(0, 1fr) !important; display: grid !important; }
}

/* Buttons */
body:has(.skin-story) main :is(.pp-btn, .sv-btn) { background: var(--st-a) !important; color: var(--pi) !important; border-radius: 12px; border: 0; box-shadow: 0 6px 0 color-mix(in srgb, var(--st-a) 60%, #000); font-weight: 700; }
body:has(.skin-story) main :is(.pp-btn, .sv-btn):hover { transform: translateY(2px); box-shadow: 0 4px 0 color-mix(in srgb, var(--st-a) 60%, #000); }
body:has(.skin-story) main :is(.pp-btn-ghost, .pp-btn-line) { border-radius: 12px; }

/* Hero */
.pp-hero.skin-story { background: var(--st-bg) !important; color: var(--st-ink); border-bottom: 1px solid var(--st-line); }
.skin-story h1 { font: 800 clamp(2.6rem, 5.4vw, 4.6rem)/1.02 var(--st-font) !important; letter-spacing: -.04em; color: var(--st-ink) !important; }
.skin-story h1::after { background: linear-gradient(90deg, var(--st-a), var(--st-b)) !important; }
.skin-story .pp-lead { color: var(--st-mute) !important; font-size: 1.12rem; }
.skin-story .pp-eyebrow { color: var(--st-a) !important; letter-spacing: .14em; }

/* Cards: clean, flat, left accent */
body:has(.skin-story) main :is(.pp-tile, .pp-opts li, .pp-numlist li, .pp-svc, .pp-result, .pp-listing, .pp-case, .pp-panel, .pp-plans > *) {
    background: #fff !important; border: 1px solid var(--st-line) !important; border-radius: 16px; box-shadow: none !important; position: relative; overflow: hidden; transition: transform .35s, border-color .35s;
}
body:has(.skin-story) main :is(.pp-tile, .pp-opts li, .pp-numlist li, .pp-svc, .pp-result, .pp-listing)::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: linear-gradient(var(--st-a), var(--st-b)); transform: scaleY(0); transform-origin: top; transition: transform .45s; }
body:has(.skin-story) main :is(.pp-tile, .pp-opts li, .pp-numlist li, .pp-svc, .pp-result, .pp-listing):hover { border-color: color-mix(in srgb, var(--st-a) 40%, transparent) !important; transform: translateX(4px); }
body:has(.skin-story) main :is(.pp-tile, .pp-opts li, .pp-numlist li, .pp-svc, .pp-result, .pp-listing):hover::before { transform: scaleY(1); }
body:has(.skin-story) main .pp-tile.size-big { background: linear-gradient(150deg, var(--st-a), color-mix(in srgb, var(--st-a) 55%, var(--pd))) !important; border: 0 !important; }
body:has(.skin-story) main .pp-tile.size-big :is(h3, p, .pp-fig) { color: var(--pi) !important; }
body:has(.skin-story) main :is(.pp-tile-ic, .pp-svc-ic) { background: color-mix(in srgb, var(--st-a) 12%, #fff) !important; border-radius: 12px; }
body:has(.skin-story) main :is(.pp-tile p, .pp-opts span, .pp-svc p, .pp-numlist p, .pp-steps p) { color: var(--st-mute); }

/* Steps and numbered lists as a vertical story line */
body:has(.skin-story) .pp-steps li { background: none !important; border: 0 !important; border-left: 2px solid var(--st-line) !important; border-radius: 0; box-shadow: none !important; padding: 4px 0 28px 30px; text-align: left; position: relative; }
body:has(.skin-story) .pp-steps li::after { display: none !important; }
body:has(.skin-story) .pp-steps::before { display: none !important; }
body:has(.skin-story) .pp-steps span { position: absolute; left: -15px; top: 0; width: 28px !important; height: 28px !important; border-radius: 50%; background: var(--st-a) !important; color: var(--pi) !important; font: 700 .72rem/28px var(--st-font) !important; text-align: center; box-shadow: 0 0 0 5px var(--st-bg) !important; }
body:has(.skin-story) .pp-steps h3 { margin-top: 0; }
body:has(.skin-story) .pp-numlist li > span { color: var(--st-a) !important; background: none !important; font: 800 1.4rem/1 var(--st-font) !important; }

/* Tabs, tracker */
body:has(.skin-story) .pp-roles-box, body:has(.skin-story) .pp-tracker { background: #fff !important; border: 1px solid var(--st-line) !important; border-radius: 20px; box-shadow: 0 30px 60px -40px color-mix(in srgb, var(--pd) 50%, transparent) !important; }
body:has(.skin-story) .pp-roles-tabs [aria-selected="true"] { background: var(--st-a) !important; color: var(--pi) !important; }

/* FAQ, CTA, contact */
body:has(.skin-story) .sv-faq details { background: none; border: 0; border-bottom: 1px solid var(--st-line); border-radius: 0; box-shadow: none; }
body:has(.skin-story) .sv-faq summary { font-weight: 700; padding: 20px 0; }
body:has(.skin-story) .pp-cta { border-radius: 24px; background: linear-gradient(120deg, var(--st-a), color-mix(in srgb, var(--st-a) 45%, var(--pd))) !important; color: var(--pi); }
body:has(.skin-story) .pp-cta :is(h2, p) { color: var(--pi) !important; }
body:has(.skin-story) .pp-cta h2 { font-weight: 800; letter-spacing: -.035em; }
body:has(.skin-story) .pp-cta .pp-btn-inv { background: #fff !important; color: var(--pd) !important; border-radius: 12px; }
body:has(.skin-story) .sv-contact-big { font-weight: 800; letter-spacing: -.04em; color: var(--st-a) !important; }
body:has(.skin-story) .sv-form { border-radius: 20px; border: 1px solid var(--st-line); box-shadow: none; }

/* Compact scale: moderate type, tighter section rhythm, UI-style chips */
body:has(.skin-story) main .sv-sec { padding-block: clamp(40px, 5vw, 72px) !important; }
body:has(.skin-story) main .sv-title { font-size: clamp(1.6rem, 2.8vw, 2.25rem) !important; line-height: 1.12 !important; }
body:has(.skin-story) main .sv-intro { font-size: 1rem !important; margin-top: 10px; }
.pp-hero.skin-story { padding-block: clamp(44px, 6vw, 76px) !important; }
.pp-hero.skin-story.lay-atelier { padding-bottom: 0 !important; }
.skin-story h1 { font-size: clamp(2rem, 3.8vw, 3.1rem) !important; line-height: 1.08 !important; }
.skin-story .pp-lead { font-size: 1.02rem !important; }
.skin-story .pp-stats strong { font-size: 1.45rem !important; }
body:has(.skin-story) main :is(.pp-tile h3, .pp-opts b, .pp-numlist h3, .pp-steps h3, .pp-svc h3, .pp-roles-copy h3, .pp-show-copy h3) { font-size: clamp(1.05rem, 1.5vw, 1.25rem) !important; line-height: 1.25 !important; }
body:has(.skin-story) main :is(.pp-cta h2, .sv-contact-big) { font-size: clamp(1.8rem, 3.4vw, 2.6rem) !important; line-height: 1.1 !important; }
body:has(.skin-story) main :is(.pp-tile .pp-fig) { font-size: clamp(1.6rem, 3vw, 2.2rem) !important; }
body:has(.skin-story) main :is(.pp-opts.style-tickets li) { min-height: 170px !important; }
body:has(.skin-story) main .pp-numlist li { min-height: 200px !important; }
body:has(.skin-story) main .pp-cta { padding: clamp(36px, 5vw, 60px) 24px !important; }
body:has(.skin-story) main :is(.pp-bento, .pp-opts, .pp-steps, .pp-show, .sv-faq) { margin-top: 28px !important; }
body:has(.skin-story) main .at-marquee span { font-size: clamp(1.1rem, 2vw, 1.5rem) !important; }
/* UI-style section label chip above every title */
body:has(.skin-story) main .sv-sec .sv-title + .sv-intro::before { content: none; }
body:has(.skin-story) .at-marquee { padding: 14px 0 !important; }
body:has(.skin-story) main .sv-intro { background: none !important; box-shadow: none !important; border: 0 !important; padding: 0 !important; }
body:has(.skin-story) main .sv-title { max-width: 28ch !important; }
@media (min-width: 1000px) { body:has(.skin-story) main .sv-sec > .wrap > :is(.sv-title, .sv-intro) { position: static !important; } }
.pp-hero.skin-story:is(.lay-search, .lay-map, .lay-gantt, .lay-dashboard, .lay-form) { background: var(--pd) !important; }
.pp-hero.skin-story:is(.lay-search, .lay-map, .lay-gantt, .lay-dashboard, .lay-form) :is(h1, .pp-stats strong) { color: #fff !important; }
.pp-hero.skin-story:is(.lay-search, .lay-map, .lay-gantt, .lay-dashboard, .lay-form) :is(.pp-lead, .pp-stats span) { color: rgba(255,255,255,.72) !important; }
.pp-hero.skin-story:is(.lay-search, .lay-map, .lay-gantt, .lay-dashboard, .lay-form) .pp-btn-ghost { color: #fff !important; background: transparent !important; border-color: rgba(255,255,255,.3) !important; }
.pp-hero.skin-story:is(.lay-search, .lay-map, .lay-gantt, .lay-dashboard, .lay-form) { color: #fff; }
.pp-hero.skin-story.lay-photo { background: none !important; color: #fff; }
.pp-hero.skin-story.lay-photo :is(h1, .pp-stats strong) { color: #fff !important; }
.pp-hero.skin-story.lay-photo :is(.pp-lead, .pp-highlights li) { color: rgba(255,255,255,.85) !important; }
@media (min-width: 1000px) {
    body:has(.skin-story) main .sv-sec > .wrap:has(.pp-pb, .pp-show, .pp-showcase, [data-showcase], .pp-cases, .pp-case) { display: block !important; }
    body:has(.skin-story) main .sv-sec > .wrap:has(.pp-pb, .pp-show, .pp-showcase, [data-showcase], .pp-cases, .pp-case) > * { grid-column: auto !important; grid-row: auto !important; margin-top: revert; }
    body:has(.skin-story) main .sv-sec > .wrap:has(.pp-pb, .pp-show, .pp-showcase, [data-showcase], .pp-cases, .pp-case) :is(.pp-opts, .pp-bento) { grid-template-columns: revert !important; }
}

body:has(.skin-story) main .style-dark :is(.sv-title, h2) { color: var(--st-ink) !important; }
body:has(.skin-story) main .style-dark .sv-intro { color: var(--st-mute) !important; }

.skin-story .pp-stats strong { color: color-mix(in srgb, var(--st-a) 70%, #000) !important; }

body:has(.skin-story) main .pp-svc-no { font-size: clamp(2rem, 3.4vw, 2.8rem) !important; }