/* Gallery skin (Oversight portfolio style): soft grey canvas, Space Grotesk headlines, white framed cards
   with a caption row, index labels and dark pill buttons. Colours come from the page theme. */
body:has(.skin-gallery) {
    --gl-bg: #ecebe8; --gl-card: #fff; --gl-ink: #111; --gl-mute: #6b6b6b; --gl-line: rgba(0,0,0,.08);
    --gl-a: var(--pa); --gl-b: var(--pb); --gl-head: "Space Grotesk", system-ui, sans-serif; --gl-body: "Inter", system-ui, sans-serif;
    --sk-band: var(--pd); --sk-accent: var(--pa); --sk-display: "Space Grotesk", sans-serif;
    background: var(--gl-bg);
}
body:has(.skin-gallery) main { background: var(--gl-bg); color: var(--gl-ink); font-family: var(--gl-body); }
body:has(.skin-gallery) main .sv-wrap, body:has(.skin-gallery) main .sv-sec, body:has(.skin-gallery) main [class$="-sec"] { background: transparent !important; }
body:has(.skin-gallery) main .sv-sec { padding-block: clamp(56px, 8vw, 104px); }
body:has(.skin-gallery) main :is(h1, h2, h3, h4, .sv-title) { font-family: var(--gl-head); color: var(--gl-ink); letter-spacing: -.035em; }
body:has(.skin-gallery) main .sv-title { font-weight: 600; font-size: clamp(2rem, 4.2vw, 3.3rem); line-height: 1.02; max-width: 20ch; }
body:has(.skin-gallery) main .sv-title::before { content: none; display: none; margin-bottom: 14px; font: 500 .78rem/1 var(--gl-body); letter-spacing: .12em; color: var(--gl-a); }
body:has(.skin-gallery) main { counter-reset: gl; }
body:has(.skin-gallery) main .sv-intro { color: var(--gl-mute); max-width: 56ch; }
body:has(.skin-gallery) main .pp-eyebrow { font: 500 .78rem/1 var(--gl-body); letter-spacing: .14em; text-transform: uppercase; color: var(--gl-a); background: none; padding: 0; }

/* Buttons */
body:has(.skin-gallery) main :is(.pp-btn, .sv-btn, .pp-btn-inv) { background: #111 !important; color: #fff !important; border-radius: 999px; border: 0; padding: 14px 24px 14px 18px; display: inline-flex; align-items: center; gap: 10px; box-shadow: 0 1px 0 rgba(255,255,255,.2) inset, 0 8px 20px -8px rgba(0,0,0,.4); }
body:has(.skin-gallery) main :is(.pp-btn, .sv-btn, .pp-btn-inv)::before { content: ""; width: 20px; height: 20px; border-radius: 50%; background: var(--gl-a); box-shadow: inset 0 0 0 5px #111, 0 0 0 1px var(--gl-a); }
body:has(.skin-gallery) main :is(.pp-btn-ghost, .pp-btn-line) { color: #111 !important; border: 1px solid var(--gl-line) !important; border-radius: 999px; background: #fff !important; }

/* Hero */
.pp-hero.skin-gallery { background: var(--gl-bg) !important; color: #111; }
.skin-gallery h1 { font: 600 clamp(2.6rem, 5.6vw, 4.8rem)/.98 var(--gl-head) !important; letter-spacing: -.045em; color: #111 !important; }
.skin-gallery h1::after { background: var(--gl-a) !important; height: 6px; }
.skin-gallery .pp-lead { color: var(--gl-mute) !important; }
.skin-gallery .pp-stats strong { font-family: var(--gl-head); color: #111 !important; }
.skin-gallery :is(.pp-dash, .pp-phone-wrap, .pp-map, .pp-collage, .pp-gantt, .pp-rings, .pp-plots, .pp-search, .pp-form, .pp-print) { border-radius: 24px; }

/* Framed portfolio cards */
body:has(.skin-gallery) main :is(.pp-tile, .pp-opts li, .pp-roles-box, .pp-tracker, .pp-numlist li, .pp-steps li, .pp-case, .sv-form, .pp-svc, .pp-plans > *, .pp-col, .pp-panel, .pp-result, .pp-listing, .pp-show) {
    background: var(--gl-card) !important; border: 6px solid #fff !important; outline: 1px solid var(--gl-line); border-radius: 22px; box-shadow: 0 1px 2px rgba(0,0,0,.04), 0 14px 30px -18px rgba(0,0,0,.25) !important; color: var(--gl-ink);
    transition: transform .35s, box-shadow .35s;
}
body:has(.skin-gallery) main :is(.pp-tile, .pp-opts li, .pp-numlist li, .pp-svc, .pp-result, .pp-listing, .pp-case):hover { transform: translateY(-5px) rotate(-.3deg); box-shadow: 0 30px 50px -24px rgba(0,0,0,.35) !important; }
body:has(.skin-gallery) main :is(.pp-tile-ic, .pp-svc-ic) { background: color-mix(in srgb, var(--gl-a) 12%, #f4f4f2) !important; border-radius: 14px; }
body:has(.skin-gallery) main .pp-tile.size-big { background: radial-gradient(420px 280px at 100% 0%, color-mix(in srgb, var(--gl-a) 22%, transparent), transparent 70%), #fff !important; }
body:has(.skin-gallery) main .pp-fig { font-family: var(--gl-head); color: var(--gl-a) !important; }
body:has(.skin-gallery) main :is(.pp-tile h3, .pp-opts b, .pp-svc h3, .pp-numlist h3) { font-family: var(--gl-head); font-weight: 600; }
body:has(.skin-gallery) main :is(.pp-tile p, .pp-opts span, .pp-svc p, .pp-numlist p) { color: var(--gl-mute); }

/* Numbers as index labels */
body:has(.skin-gallery) .pp-steps span, body:has(.skin-gallery) .pp-numlist li > span { background: #111 !important; color: #fff !important; border-radius: 999px; font: 500 .78rem/1 var(--gl-body) !important; padding: 7px 11px; width: auto !important; height: auto !important; box-shadow: none !important; }
body:has(.skin-gallery) .pp-steps::before { background: var(--gl-line) !important; }

/* Tabs */
body:has(.skin-gallery) .pp-roles-tabs { background: #f1f0ed; border-radius: 999px; padding: 5px; }
body:has(.skin-gallery) .pp-roles-tabs [aria-selected="true"] { background: #111 !important; color: #fff !important; border-radius: 999px; }

/* FAQ as numbered rows */
body:has(.skin-gallery) .sv-faq { counter-reset: q; }
body:has(.skin-gallery) .sv-faq details { background: #fff; border: 0; border-radius: 16px; margin-bottom: 8px; padding: 0 22px; box-shadow: 0 1px 2px rgba(0,0,0,.04); }
body:has(.skin-gallery) .sv-faq summary { font: 600 1.05rem/1.4 var(--gl-head); padding: 20px 0; }
body:has(.skin-gallery) .sv-faq summary::before { counter-increment: q; content: counter(q, decimal-leading-zero); margin-right: 14px; font: 500 .78rem/1 var(--gl-body); color: var(--gl-a); }

/* CTA: big framed card */
body:has(.skin-gallery) .pp-cta { display: grid; gap: 18px; text-align: left; border-radius: 28px; border: 8px solid #fff; padding: clamp(40px, 6vw, 72px); background: radial-gradient(600px 360px at 100% 100%, color-mix(in srgb, var(--pa) 45%, transparent), transparent 70%), var(--pd) !important; color: #fff; box-shadow: 0 30px 60px -30px rgba(0,0,0,.4); }
body:has(.skin-gallery) .pp-cta :is(h2, p) { color: #fff !important; }
body:has(.skin-gallery) .pp-cta h2 { font: 600 clamp(2.2rem, 5vw, 3.8rem)/1 var(--gl-head); letter-spacing: -.04em; max-width: 16ch; }
body:has(.skin-gallery) .pp-cta .pp-btn-inv { background: #fff !important; color: #111 !important; }
body:has(.skin-gallery) .pp-cta .pp-btn-inv::before { box-shadow: inset 0 0 0 5px #fff, 0 0 0 1px var(--gl-a); }
body:has(.skin-gallery) .pp-cta .pp-btn-line { color: #fff !important; background: transparent !important; border-color: rgba(255,255,255,.3) !important; }
body:has(.skin-gallery) .sv-contact-big { font-family: var(--gl-head); letter-spacing: -.04em; color: #111 !important; }
body:has(.skin-gallery) .sv-form :is(input, select, textarea) { background: #f6f5f2 !important; border-color: transparent !important; border-radius: 12px; }

/* Compact scale: moderate type, tighter section rhythm, UI-style chips */
body:has(.skin-gallery) main .sv-sec { padding-block: clamp(40px, 5vw, 72px) !important; }
body:has(.skin-gallery) main .sv-title { font-size: clamp(1.6rem, 2.8vw, 2.25rem) !important; line-height: 1.12 !important; }
body:has(.skin-gallery) main .sv-intro { font-size: 1rem !important; margin-top: 10px; }
.pp-hero.skin-gallery { padding-block: clamp(44px, 6vw, 76px) !important; }
.pp-hero.skin-gallery.lay-atelier { padding-bottom: 0 !important; }
.skin-gallery h1 { font-size: clamp(2rem, 3.8vw, 3.1rem) !important; line-height: 1.08 !important; }
.skin-gallery .pp-lead { font-size: 1.02rem !important; }
.skin-gallery .pp-stats strong { font-size: 1.45rem !important; }
body:has(.skin-gallery) 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-gallery) 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-gallery) main :is(.pp-tile .pp-fig) { font-size: clamp(1.6rem, 3vw, 2.2rem) !important; }
body:has(.skin-gallery) main :is(.pp-opts.style-tickets li) { min-height: 170px !important; }
body:has(.skin-gallery) main .pp-numlist li { min-height: 200px !important; }
body:has(.skin-gallery) main .pp-cta { padding: clamp(36px, 5vw, 60px) 24px !important; }
body:has(.skin-gallery) main :is(.pp-bento, .pp-opts, .pp-steps, .pp-show, .sv-faq) { margin-top: 28px !important; }
body:has(.skin-gallery) main .at-marquee span { font-size: clamp(1.1rem, 2vw, 1.5rem) !important; }
/* UI-style section label chip above every title */
body:has(.skin-gallery) main .sv-sec .sv-title + .sv-intro::before { content: none; }
body:has(.skin-gallery) .at-marquee { padding: 14px 0 !important; }
body:has(.skin-gallery) main .sv-intro { background: none !important; box-shadow: none !important; border: 0 !important; padding: 0 !important; }
body:has(.skin-gallery) main .sv-title { max-width: 28ch !important; }
.pp-hero.skin-gallery:is(.lay-search, .lay-map, .lay-gantt, .lay-dashboard, .lay-form) { background: var(--pd) !important; }
.pp-hero.skin-gallery:is(.lay-search, .lay-map, .lay-gantt, .lay-dashboard, .lay-form) :is(h1, .pp-stats strong) { color: #fff !important; }
.pp-hero.skin-gallery: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-gallery: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-gallery:is(.lay-search, .lay-map, .lay-gantt, .lay-dashboard, .lay-form) { color: #fff; }
.pp-hero.skin-gallery.lay-photo { background: none !important; color: #fff; }
.pp-hero.skin-gallery.lay-photo :is(h1, .pp-stats strong) { color: #fff !important; }
.pp-hero.skin-gallery.lay-photo :is(.pp-lead, .pp-highlights li) { color: rgba(255,255,255,.85) !important; }

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

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