/* =========================================
   SKENYDESIGN — Portfolio Styles v2.0
   ========================================= */

/* 1. Variables
   ========================================= */
:root {
    --clr-yellow:      #FFE600;
    --clr-yellow-hover:#F0D800;
    --clr-yellow-dark: #B8960C;
    --clr-black:       #0A0A0A;
    --clr-dark:        #111111;
    --clr-dark-alt:    #1A1A1A;
    --clr-dark-card:   #161616;
    --clr-grey:        #888888;
    --clr-light:       #F5F5F5;
    --clr-white:       #FFFFFF;

    --ff-heading: 'Space Grotesk', -apple-system, BlinkMacSystemFont, sans-serif;
    --ff-body:    'Manrope', -apple-system, BlinkMacSystemFont, sans-serif;

    --nav-h:      92px;
    --container:  1200px;
    --pad-x:      clamp(1.25rem, 5vw, 2rem);
    --radius:     0;
    --ease:       0.22s ease;
    --ease-out:   0.4s cubic-bezier(0.16, 1, 0.3, 1);

    /* Motion tokens — deliberately varied, not one curve for everything */
    --ease-out-soft:  cubic-bezier(.16,1,.3,1);   /* decelerating entrance */
    --ease-in-out:    cubic-bezier(.45,0,.15,1);  /* slow ambient motion */
    --ease-spring:    cubic-bezier(.34,1.56,.64,1); /* tiny overshoot, tactile press/hover */
    --dur-fast:   150ms;
    --dur-base:   340ms;
    --dur-slow:   650ms;
}

/* 2. Reset
   ========================================= */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
    scroll-behavior: smooth;
    scroll-padding-top: var(--nav-h);
    overflow-x: clip;
}
body {
    background: var(--clr-black);
    color: var(--clr-white);
    font-family: var(--ff-body);
    overflow-x: clip;
    -webkit-tap-highlight-color: transparent;
}
/* hello-biz-css has its own unscoped `body{font-family:...}` (system-ui
   stack) that loads after this stylesheet — same tied-specificity/load-order
   issue as section 19's button guard. Without this, the whole site silently
   renders in the parent theme's font instead of Manrope. */
body.skeny-page { font-family: var(--ff-body); }
.skeny-site-content {
    overflow-x: clip;
    position: relative;
    width: 100%;
    min-width: 0;
}
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
/* Same tied-specificity/load-order issue as section 19: hello-biz-css has
   its own unscoped `a{color:#c36}`. Any link here without a more specific
   color rule of its own would silently render pink instead of inheriting. */
body.skeny-page a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }
ul { list-style: none; }

/* Skip link — hidden until keyboard-focused */
.skeny-skip-link {
    position: absolute;
    top: -100px;
    left: 1rem;
    z-index: 3000;
    background: var(--clr-yellow);
    color: var(--clr-black);
    font-family: var(--ff-heading);
    font-weight: 700;
    font-size: .875rem;
    padding: .75rem 1.25rem;
    border-radius: var(--radius);
    transition: top var(--dur-base) var(--ease-out-soft);
}
.skeny-skip-link:focus-visible { top: 1rem; }

/* A fixed, pointer-events-none grain layer — the kind of texture that
   keeps a flat dark UI from reading as a sterile vector export. */
.skeny-grain {
    position: fixed;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    opacity: .035;
    mix-blend-mode: overlay;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
@media (prefers-reduced-motion: reduce), (max-width: 480px) {
    .skeny-grain { display: none; }
}

/* 3. Layout
   ========================================= */
.skeny-container {
    max-width: var(--container);
    margin-inline: auto;
    padding-inline: var(--pad-x);
}
.skeny-section-title {
    font-family: var(--ff-heading);
    font-size: clamp(1.75rem, 4vw, 2.75rem);
    font-weight: 700;
    line-height: 1.15;
    color: var(--clr-white);
    text-wrap: balance;
    margin: 0;
}
.skeny-section-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 2rem;
    margin-bottom: 3rem;
}
.skeny-badge {
    display: inline-block;
    background: rgba(255,230,0,.12);
    border: 1px solid rgba(255,230,0,.3);
    color: var(--clr-yellow);
    font-family: var(--ff-heading);
    font-weight: 600;
    font-size: .8125rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    padding: .35rem .875rem;
    border-radius: 999px;
    margin-bottom: 1.5rem;
}

/* 4. Buttons
   ========================================= */
.skeny-btn {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .8rem 1.875rem;
    border-radius: var(--radius);
    font-family: var(--ff-heading);
    font-weight: 700;
    font-size: .9375rem;
    letter-spacing: .01em;
    text-decoration: none;
    transition: background var(--ease), color var(--ease), border-color var(--ease), transform var(--ease);
    border: 2px solid transparent;
    white-space: nowrap;
    cursor: pointer;
    -webkit-appearance: none;
    touch-action: manipulation;
}
.skeny-btn--yellow {
    background: var(--clr-yellow);
    color: var(--clr-black);
    border-color: var(--clr-yellow);
}
.skeny-btn--yellow:hover { background: var(--clr-yellow-hover); border-color: var(--clr-yellow-hover); transform: translateY(-2px); }
.skeny-btn--yellow:active { background: var(--clr-yellow); }

.skeny-btn--outline {
    background: transparent;
    color: var(--clr-white);
    border-color: var(--clr-white);
}
.skeny-btn--outline:hover { background: var(--clr-white); color: var(--clr-black); transform: translateY(-2px); }

.skeny-btn--dark {
    background: var(--clr-black);
    color: var(--clr-white);
    border-color: var(--clr-black);
}
.skeny-btn--dark:hover { background: #1a1a1a; transform: translateY(-2px); }

.skeny-btn--outline-dark {
    background: transparent;
    color: var(--clr-black);
    border-color: var(--clr-black);
}
.skeny-btn--outline-dark:hover { background: var(--clr-black); color: var(--clr-white); transform: translateY(-2px); }

/* Tactile press feedback — every variant gets a quick scale-down on click/tap,
   not just a hover lift. Wins over the :hover transform while pressed. */
.skeny-btn:active { transform: scale(.97); transition-duration: var(--dur-fast); }

/* 5. Navigation
   ========================================= */
.skeny-nav {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 1000;
    background: var(--clr-black);
    transition: background .4s ease, backdrop-filter .4s ease;
}
.skeny-nav__inner {
    max-width: var(--container);
    margin-inline: auto;
    padding-inline: var(--pad-x);
    padding-block: 28px;
    display: flex;
    align-items: center;
    gap: 2rem;
    transition: padding-block .3s ease;
}
.skeny-nav.is-scrolled {
    background: rgba(10,10,10,.92);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}
.skeny-nav.is-scrolled .skeny-nav__inner { padding-block: 12px; }

.skeny-nav__logo { flex-shrink: 0; }
.skeny-nav__logo img { display: block; height: 36px; width: auto; }

.skeny-nav__links {
    display: flex;
    align-items: center;
    gap: .25rem;
    margin-left: auto;
}
.skeny-nav__links a {
    font-family: var(--ff-heading);
    font-size: .9rem;
    font-weight: 500;
    color: rgba(255,255,255,.82);
    padding: .4rem .75rem;
    border-radius: var(--radius);
    transition: color var(--ease), background var(--ease);
}
.skeny-nav__links a:hover,
.skeny-nav__links a.is-active { color: var(--clr-white); background: rgba(255,255,255,.08); }
/* body.skeny-page a{color:inherit} przebijało kolor wyżej i linki dziedziczyły
   #333 z hello-biz (#site-header) — prawie niewidoczne na czarnym tle. */
body.skeny-page .skeny-nav__links a { color: rgba(255,255,255,.82); }
body.skeny-page .skeny-nav__links a:hover,
body.skeny-page .skeny-nav__links a.is-active { color: var(--clr-white); }

.skeny-nav__cta { flex-shrink: 0; }

.skeny-nav__burger {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    background: transparent;
    border: none;
    padding: .5rem;
    margin-left: auto;
    outline: none;
    -webkit-appearance: none;
    appearance: none;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    user-select: none;
    border-radius: var(--radius);
}
.skeny-nav__burger:active,
.skeny-nav__burger:focus:not(:focus-visible) { background: transparent; outline: none; }
.skeny-nav__burger:focus-visible { outline: 2px solid var(--clr-yellow); }
.skeny-nav__burger span {
    display: block;
    width: 22px; height: 2px;
    background: var(--clr-white);
    border-radius: 2px;
    transition: transform var(--ease), opacity var(--ease);
}
.skeny-nav__burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.skeny-nav__burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.skeny-nav__burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.skeny-nav__mobile { display: none; }

/* 6. Hero
   ========================================= */
.skeny-hero {
    position: relative;
    background: var(--clr-black);
    padding-top: calc(var(--nav-h) + 4rem);
    padding-bottom: 3.5rem;
    overflow: hidden;
    min-height: 88vh;
    min-height: 88dvh;
    display: flex;
    align-items: center;
}
.hero-tag {
    position: absolute;
    right: 8%;
    top: 50%;
    transform: translateY(-50%);
    width: 58.5%;
    max-width: 780px;
    pointer-events: none;
    z-index: 0;
}
.tag-svg {
    width: 100%;
    height: 100%;
    overflow: visible;
}
.tag-svg path {
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: var(--len, 99999);
    stroke-dashoffset: var(--len, 99999);
}
.tag-svg .path-main {
    stroke: rgba(255,255,255,0.09);
    stroke-width: 7;
}
.tag-svg .path-halo {
    stroke: rgba(255,255,255,0.09);
    stroke-width: 7;
}
.tag-svg.animate .path-main {
    animation: tagDraw 3.8s cubic-bezier(0.25, 0.1, 0.2, 1) forwards;
    animation-delay: 0.8s;
}
.tag-svg.animate .path-halo {
    animation: tagDraw 1.1s cubic-bezier(0.4, 0, 0.2, 1) forwards;
    animation-delay: 4.4s;
}
@keyframes tagDraw {
    to { stroke-dashoffset: 0; }
}
@media (prefers-reduced-motion: reduce) {
    .tag-svg path { stroke-dashoffset: 0; animation: none; }
}
.skeny-hero .skeny-container { position: relative; z-index: 1; width: 100%; }
.skeny-hero__inner {
    max-width: 760px;
}
.skeny-hero__title {
    font-family: var(--ff-heading);
    font-size: clamp(2.5rem, 6.5vw, 5.25rem);
    font-weight: 700;
    line-height: 1.08;
    letter-spacing: -.03em;
    color: var(--clr-white);
    margin: 0 0 1.5rem;
    text-wrap: balance;
}
.skeny-hero__title em {
    font-style: normal;
    color: var(--clr-yellow);
}

/* Staggered load-in — plays once on page load, not scroll-triggered */
@keyframes heroIn {
    from { opacity: 0; transform: translateY(10px); filter: blur(6px); }
    to   { opacity: 1; transform: translateY(0); filter: blur(0); }
}
.skeny-hero-in {
    display: block;
    opacity: 0;
    animation: heroIn .6s var(--ease-out-soft) both;
}

/* Scroll indicator arrow — a quiet hint, not a cartoon bounce */
@keyframes driftDown {
    0%, 100% { transform: translateX(-50%) translateY(0); opacity: .4; }
    50%       { transform: translateX(-50%) translateY(4px); opacity: .7; }
}
.skeny-scroll-arrow {
    position: absolute;
    bottom: 32px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1;
    background: none;
    border: none;
    padding: 0;
    color: rgba(255,255,255,.4);
    animation: driftDown 2.6s var(--ease-in-out) infinite;
    transition: opacity .4s ease;
    cursor: pointer;
}
.skeny-hero__sub {
    font-size: clamp(1rem, 2vw, 1.1875rem);
    line-height: 1.65;
    color: rgba(255,255,255,.6);
    margin: 0 0 2rem;
    max-width: 560px;
}
.skeny-hero__btns {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin: 0 0 3rem;
}
.skeny-hero__stats {
    display: flex;
    gap: 3rem;
}
.skeny-stat { display: flex; flex-direction: column; }
.skeny-stat__row {
    display: flex;
    align-items: baseline;
    gap: .2rem;
}
.skeny-stat__num {
    font-family: var(--ff-heading);
    font-size: clamp(2rem, 4vw, 2.875rem);
    font-weight: 700;
    color: var(--clr-white);
    line-height: 1;
    font-variant-numeric: tabular-nums;
}
.skeny-stat__plus {
    font-family: var(--ff-heading);
    font-size: clamp(1.5rem, 3vw, 2rem);
    font-weight: 700;
    color: var(--clr-yellow);
    line-height: 1;
}
.skeny-stat__label {
    font-size: .8125rem;
    color: rgba(255,255,255,.45);
    margin-top: .25rem;
    text-transform: uppercase;
    letter-spacing: .06em;
}
.br-desktop { display: inline; }

/* 7. Section separator glow — hero → portfolio
   ========================================= */
.skeny-portfolio__glow {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, -65%);
    width: min(1000px, 92vw);
    height: 280px;
    background: radial-gradient(ellipse at center, rgba(255,230,0,.35) 0%, rgba(255,230,0,.12) 45%, transparent 72%);
    filter: blur(32px);
    opacity: .65;
    pointer-events: none;
    z-index: 0;
}
/* Standalone version used between the homepage hero and portfolio sections
   (see markup comment) — a zero-height sibling with no overflow rule of its
   own, so the blur bleed can't get clipped no matter what overflow either
   neighboring section sets (a real WebKit-vs-Blink rendering difference:
   Safari can clip a filter:blur() element to the nearest ancestor with any
   non-visible overflow axis even when the relevant axis is technically
   'visible', Chrome does not — the fix is to remove that ancestor entirely
   rather than rely on overflow values behaving identically everywhere). */
.skeny-glow-divider {
    position: relative;
    height: 0;
}
.skeny-glow-divider::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, -65%);
    width: min(1000px, 92vw);
    height: 280px;
    background: radial-gradient(ellipse at center, rgba(255,230,0,.35) 0%, rgba(255,230,0,.12) 45%, transparent 72%);
    filter: blur(32px);
    opacity: .65;
    pointer-events: none;
    z-index: 1;
}

/* 8. Portfolio Grid
   ========================================= */
.skeny-portfolio {
    position: relative;
    background: #0a0a0a;
    padding: 5rem 0 0;
}
.skeny-portfolio .skeny-section-header { margin-bottom: 2rem; }


.skeny-portfolio__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}

.skeny-portfolio__item {
    position: relative;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    cursor: pointer;
    border-radius: 0;
    transition: opacity .25s ease, transform .25s ease;
}
.skeny-portfolio__item:focus-visible {
    outline: 3px solid var(--clr-yellow);
    outline-offset: -3px;
}

/* Gradient placeholder backgrounds — generic fallback for entries beyond
   the hand-picked set below (full listing page has more tiles than the
   9 curated colors), overridden per-index where a specific color exists. */
.skeny-portfolio__bg {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg,#1a1a1a 0%,#2c2c2c 100%);
    transition: transform .5s cubic-bezier(.25,.46,.45,.94);
}
.skeny-portfolio__item[data-cs="0"] .skeny-portfolio__bg { background: linear-gradient(135deg,#5c2000 0%,#9c3d00 100%); }
.skeny-portfolio__item[data-cs="1"] .skeny-portfolio__bg { background: linear-gradient(135deg,#00366b 0%,#0063b8 100%); }
.skeny-portfolio__item[data-cs="2"] .skeny-portfolio__bg { background: linear-gradient(135deg,#3d0066 0%,#6600b3 100%); }
.skeny-portfolio__item[data-cs="3"] .skeny-portfolio__bg { background: linear-gradient(135deg,#004d3a 0%,#00805e 100%); }
.skeny-portfolio__item[data-cs="4"] .skeny-portfolio__bg { background: linear-gradient(135deg,#5c001f 0%,#99003d 100%); }
.skeny-portfolio__item[data-cs="5"] .skeny-portfolio__bg { background: linear-gradient(135deg,#242466 0%,#3d3daa 100%); }
.skeny-portfolio__item[data-cs="6"] .skeny-portfolio__bg { background: linear-gradient(135deg,#0a2e1a 0%,#0f8a45 100%); }
.skeny-portfolio__item[data-cs="7"] .skeny-portfolio__bg { background: linear-gradient(135deg,#4d0033 0%,#99005c 100%); }
.skeny-portfolio__item[data-cs="8"] .skeny-portfolio__bg { background: linear-gradient(135deg,#003340 0%,#00819e 100%); }
.skeny-portfolio__thumb {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}
.skeny-portfolio__thumb-logo {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: min(58%, 260px);
    height: auto;
    z-index: 1;
    filter: drop-shadow(0 2px 14px rgba(0,0,0,.55));
    pointer-events: none;
    user-select: none;
}

/* Hover overlay */
.skeny-portfolio__overlay {
    position: absolute;
    inset: 0;
    z-index: 2;
    background: rgba(255,230,0,.88);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 1.75rem 2rem;
    opacity: 0;
    transition: opacity .3s ease;
}
/* hover only on real pointer devices */
@media (hover: hover) and (pointer: fine) {
    .skeny-portfolio__item:hover .skeny-portfolio__overlay,
    .skeny-portfolio__item:focus-visible .skeny-portfolio__overlay { opacity: 1; }
    .skeny-portfolio__item:hover .skeny-portfolio__bg { transform: scale(1.03); }
}

/* ── Mobile spotlight — auto-highlights the tile centered on screen while scrolling ── */
@media (pointer: coarse) {
    .skeny-portfolio__item {
        --spot: 0;
        filter: brightness(calc(0.4 + 0.6 * var(--spot)));
        transition: filter 0.25s linear;
        will-change: filter;
    }
    /* Text overlay (title/category) removed on mobile — just the photo,
       still dimmed/brightened by the --spot scroll-spotlight above. */
    .skeny-portfolio__overlay { display: none; }
    /* portfolio-lista.php's tiles share this class but that page never
       runs updateSpotlight() (only front-page.php's homepage grid does)
       — --spot stayed permanently 0 there, so every tile sat stuck at
       40% brightness forever, reading as a dark overlay that never
       lifts. Opt the listing page out of the effect entirely instead of
       wiring up scroll tracking it was never designed to need. */
    .skeny-portfolio--listing .skeny-portfolio__item { filter: none; }
}

.skeny-portfolio__name {
    font-family: var(--ff-heading);
    font-size: 15px;
    font-weight: 700;
    color: #111;
    line-height: 1.25;
}
.skeny-portfolio__cat {
    font-family: var(--ff-heading);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: #555;
    margin-top: .4rem;
}
@media (pointer: coarse) {
    .skeny-portfolio__name { color: var(--clr-white); }
    .skeny-portfolio__cat  { color: rgba(255,255,255,.75); }
}

body.modal-open { overflow: hidden; overscroll-behavior-x: none; touch-action: pan-y; }

/* 10. Specializations — two-column grid, number + title only
   ========================================= */
.skeny-specs {
    position: relative;
    background: var(--clr-black);
    padding: 6rem 0;
}
.skeny-specs-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    max-width: var(--container);
    margin: 3rem auto 0;
    padding: 0 var(--pad-x);
}
/* Odd tile count (e.g. 7) would otherwise leave the last tile alone on
   the left with an empty gap beside it — span both columns instead. */
.skeny-specs-grid > .skeny-spec-tile:last-child:nth-child(odd) { grid-column: 1 / -1; }
.skeny-spec-tile {
    position: relative;
    min-height: 200px;
    background: var(--tile-bg, var(--clr-dark-card));
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.skeny-spec-tile__content {
    position: relative;
    z-index: 1;
    padding: 1.75rem 2rem;
    display: flex;
    align-items: center;
    gap: 1.25rem;
}
.skeny-spec-tile__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 116px;
    height: 116px;
    flex-shrink: 0;
}
.skeny-spec-tile__icon img { width: 96px; height: 96px; display: block; }
.skeny-spec-tile__text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: .125rem;
    min-width: 0;
}
.skeny-spec-tile__content h3 {
    font-family: var(--ff-heading);
    font-size: 1.1875rem;
    font-weight: 700;
    color: var(--clr-white);
    line-height: 1.2;
    margin: 0;
}
.skeny-spec-tile__desc {
    font-size: .875rem;
    line-height: 1.55;
    color: rgba(255,255,255,.6);
    margin: 0;
}

/* Kafel usługi to link do podstrony */
a.skeny-spec-tile {
    color: inherit;
    text-decoration: none;
    transition: transform var(--ease);
}
a.skeny-spec-tile:hover { transform: translateY(-3px); }
.skeny-spec-tile__more {
    display: inline-block;
    margin: .625rem 0 0;
    font-family: var(--ff-heading);
    font-size: .8125rem;
    font-weight: 700;
    color: rgba(255,255,255,.8);
    transition: color .2s ease;
}
a.skeny-spec-tile:hover .skeny-spec-tile__more { color: var(--clr-yellow); }

/* 10b. Cennik — lista usług z cenami "od", bez kart
   ========================================= */
.skeny-pricing {
    background: var(--clr-black);
    padding: 6rem 0;
}
.skeny-pricing__lead {
    font-size: .9375rem;
    line-height: 1.7;
    color: rgba(255,255,255,.55);
    max-width: 640px;
    margin: 1rem 0 2.5rem;
}
.skeny-pricing__list {
    list-style: none;
    margin: 0;
    padding: 0;
    border-top: 1px solid rgba(255,255,255,.1);
}
.skeny-pricing__row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) 7.5rem;
    align-items: baseline;
    gap: 1.5rem;
    padding: 1.125rem 0;
    border-bottom: 1px solid rgba(255,255,255,.1);
}
.skeny-pricing__name {
    font-family: var(--ff-heading);
    font-size: 1.0625rem;
    font-weight: 700;
    color: var(--clr-white);
}
.skeny-pricing__note {
    font-size: .875rem;
    line-height: 1.5;
    color: rgba(255,255,255,.5);
}
.skeny-pricing__price {
    font-family: var(--ff-heading);
    font-size: 1.0625rem;
    font-weight: 700;
    color: var(--clr-yellow);
    white-space: nowrap;
    text-align: right;
}
/* Pozycje 5+ cennika: na komputerze zawsze widoczne, na telefonie zwinięte
   (animacja grid-template-rows 0fr -> 1fr w media query niżej). */
.skeny-pricing__list--cont { border-top: 0; }
.skeny-pricing__extra { display: grid; grid-template-rows: 1fr; }
.skeny-pricing__extra-inner { min-height: 0; overflow: hidden; }
/* body.skeny-page: hello-biz [type=button]{display:inline-block} ładuje się po tym pliku */
body.skeny-page .skeny-pricing__more { display: none; }
.skeny-pricing__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
    margin-top: 2.5rem;
}
body.skeny-page .skeny-pricing__agency a { color: var(--clr-yellow); text-decoration: underline; text-underline-offset: 3px; }
.skeny-pricing__agency {
    font-size: .875rem;
    line-height: 1.6;
    color: rgba(255,255,255,.5);
    max-width: 520px;
    margin: 0;
}

/* 10c. Podstrony usług (usluga.php)
   ========================================= */
.skeny-service-hero {
    background: var(--clr-black);
    padding: calc(var(--nav-h) + 4rem) 0 2.5rem;
}
.skeny-service-hero__title {
    font-family: var(--ff-heading);
    font-size: clamp(2.25rem, 5vw, 4rem);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -.02em;
    color: var(--clr-white);
    max-width: 900px;
    margin: 0 0 1.25rem;
    text-wrap: balance;
}
.skeny-service-hero__lead {
    font-size: clamp(1rem, 1.6vw, 1.1875rem);
    line-height: 1.65;
    color: rgba(255,255,255,.65);
    max-width: 680px;
    margin: 0 0 2rem;
}
.skeny-service-hero .skeny-hero__btns { margin: 0; }
.skeny-service-section {
    background: var(--clr-black);
    padding: 3.5rem 0;
}
.skeny-service-section > .skeny-container > .skeny-section-title { margin: 0 0 2rem; }
.skeny-service-section .skeny-pricing__lead { margin: 0 0 2rem; }
.skeny-checklist {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem 2.5rem;
}
.skeny-checklist__item {
    position: relative;
    padding-left: 2rem;
    font-size: 1rem;
    line-height: 1.6;
    color: rgba(255,255,255,.8);
}
.skeny-checklist__item::before {
    content: '';
    position: absolute;
    left: .35rem;
    top: .2rem;
    width: .45rem;
    height: .85rem;
    border-right: 2.5px solid var(--clr-yellow);
    border-bottom: 2.5px solid var(--clr-yellow);
    transform: rotate(45deg);
}
.skeny-steps {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.25rem;
}
.skeny-steps__item {
    background: var(--clr-dark-card);
    padding: 1.75rem 1.5rem;
}
.skeny-steps__num {
    display: block;
    font-family: var(--ff-heading);
    font-size: 2rem;
    font-weight: 700;
    line-height: 1;
    color: var(--clr-yellow);
    margin: 0 0 1rem;
}
.skeny-steps__title {
    font-family: var(--ff-heading);
    font-size: 1.0625rem;
    font-weight: 700;
    line-height: 1.3;
    color: var(--clr-white);
    margin: 0 0 .5rem;
}
.skeny-steps__desc {
    font-size: .875rem;
    line-height: 1.6;
    color: rgba(255,255,255,.55);
    margin: 0;
}
.skeny-faq { border-top: 1px solid rgba(255,255,255,.1); max-width: 860px; }
.skeny-faq__item { border-bottom: 1px solid rgba(255,255,255,.1); }
.skeny-faq__q {
    position: relative;
    list-style: none;
    cursor: pointer;
    padding: 1.25rem 2.5rem 1.25rem 0;
    font-family: var(--ff-heading);
    font-size: 1.0625rem;
    font-weight: 600;
    color: var(--clr-white);
}
.skeny-faq__q::-webkit-details-marker { display: none; }
.skeny-faq__q::after {
    content: '+';
    position: absolute;
    right: .25rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.5rem;
    font-weight: 400;
    color: var(--clr-yellow);
}
.skeny-faq__item[open] .skeny-faq__q::after { content: '−'; }
.skeny-faq__a {
    font-size: .9375rem;
    line-height: 1.7;
    color: rgba(255,255,255,.6);
    max-width: 760px;
    margin: 0 0 1.25rem;
}
.skeny-cta__text {
    font-size: .9375rem;
    line-height: 1.6;
    color: rgba(10,10,10,.75);
    margin: .75rem 0 0;
}
body.skeny-page .skeny-cta__text a { color: var(--clr-black); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.skeny-service-others {
    background: var(--clr-black);
    padding: 3.5rem 0 1rem;
}
.skeny-service-others__title {
    font-family: var(--ff-heading);
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--clr-white);
    margin: 0 0 1rem;
}
.skeny-service-others__list { display: flex; flex-wrap: wrap; gap: .5rem; }
body.skeny-page a.skeny-filters__btn { display: inline-block; text-decoration: none; }

/* 11. About
   ========================================= */
.skeny-about {
    background: var(--clr-black);
    padding: 6rem 0;
}
.skeny-about__inner {
    display: grid;
    grid-template-columns: 1fr 1.35fr;
    gap: 5rem;
    /* align-items:stretch (the grid default) is required here, not just
       cosmetic — .skeny-about__left must span the full row height (matching
       the taller text column) for its sticky child below to have any range
       to travel/stick within. With align-items:start it was previously
       exactly as tall as the photo itself, so position:sticky had nowhere
       to go and silently did nothing (verified: the photo scrolled in
       perfect lockstep with the page, zero sticky effect). */
}
/* top:50% + transform:translateY(-50%) looked right only once actually
   stuck — transform shifts the paint position unconditionally, so
   *before* the sticky threshold engaged (still in normal flow near the
   top of its grid cell) it was ALSO shifted up by half its own height,
   poking into the section above (visible scrolling back up). A flexbox-
   centered 100vh sticky wrapper avoids that (real layout, not paint-only)
   but wastes almost all the stick range here, since the text column
   (~908px) is barely taller than one viewport (~900px) — a wrapper that
   itself claims 100vh leaves next to nothing to travel within.
   Approximating the offset with calc() instead keeps the sticky element
   at its own natural height (full ~309px of range) while still landing
   close to vertical-center: 300px ≈ half this photo's typical rendered
   height (aspect-ratio 3/4 at this column's width across common desktop
   viewports), so top alone (no transform) puts it a few px off dead
   center rather than exactly on it — an acceptable trade for never
   double-applying an offset outside the stuck state. */
.skeny-about__photo {
    position: sticky;
    top: max(2rem, calc(50vh - 300px));
}
.skeny-about__photo-img {
    width: 100%;
    aspect-ratio: 3/4;
    object-fit: cover;
    object-position: center top;
    display: block;
}
.skeny-about__text {
    font-size: 1.0625rem;
    line-height: 1.75;
    color: rgba(255,255,255,.65);
    margin-top: 1.25rem;
    margin-bottom: 2rem;
}
.skeny-about__tag {
    position: absolute;
    bottom: -28px;
    right: -28px;
    height: 130px;
    width: auto;
    filter: brightness(0) invert(1);
    opacity: .92;
    pointer-events: none;
    user-select: none;
    z-index: 2;
}

/* 12. Tools — poziome paski (ikona, nazwa, poziom po prawej), 2 kolumny,
   na telefonie jedna
   ========================================= */
.skeny-tools-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .5rem;
    margin-top: 2rem;
}
.skeny-tool {
    background: rgba(255,255,255,.04);
    border-left: 3px solid var(--tool-color, #ffffff);
    padding: .625rem 1rem .625rem .75rem;
    display: flex;
    align-items: center;
    gap: .875rem;
    min-width: 0;
    transition: background var(--ease), transform var(--ease);
    transition-delay: calc(var(--i, 0) * 0.07s);
}
.skeny-tool:hover { background: rgba(255,255,255,.07); }
/* Merge with .skeny-reveal--pop's transition (same longhand, would otherwise be
   fully overwritten by cascade order) so background keeps its own hover fade
   and the per-tile stagger delay survives. */
.skeny-tool.skeny-reveal--pop {
    transition: opacity var(--dur-base) var(--ease-out-soft), transform var(--dur-slow) var(--ease-spring), background var(--ease);
    transition-delay: calc(.1s + var(--i, 0) * 0.07s);
}
.skeny-tool__icon {
    flex-shrink: 0;
    width: 34px; height: 34px;
    background: var(--tool-color, #ffffff);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--ff-heading);
    font-weight: 700;
    font-size: .8125rem;
    color: var(--clr-black);
}
.skeny-tool__name {
    flex: 1;
    min-width: 0;
    font-family: var(--ff-heading);
    font-size: .875rem;
    font-weight: 600;
    color: var(--clr-white);
}
.skeny-tool__level {
    flex-shrink: 0;
    white-space: nowrap;
    font-size: .7rem;
    font-weight: 500;
    letter-spacing: .04em;
    color: rgba(255,255,255,.4);
}
.skeny-tool__level--full   { color: var(--clr-yellow); }
.skeny-tool__level--regular { color: rgba(255,255,255,.6); }

/* 13. CTA
   ========================================= */
.skeny-cta {
    position: relative;
    background: var(--clr-yellow);
    padding: 3rem 0;
    overflow: hidden;
}
.skeny-cta::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 60% 100% at 85% 0%, rgba(10,10,10,.08) 0%, transparent 60%);
    pointer-events: none;
}
.skeny-cta .skeny-container { position: relative; z-index: 1; }
.skeny-cta__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 3rem;
}
.skeny-cta__title {
    font-family: var(--ff-heading);
    font-size: clamp(1.5rem, 3.5vw, 2.5rem);
    font-weight: 700;
    color: var(--clr-black);
    line-height: 1.15;
    margin: 0;
    text-wrap: balance;
}
.skeny-cta__btns {
    display: flex;
    flex-direction: row;
    gap: .75rem;
    flex-shrink: 0;
}

/* 13b. Contact
   ========================================= */
.skeny-contact {
    background: var(--clr-black);
    padding: 7.5rem 0;
}
.skeny-contact__wrap {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 5rem;
    align-items: start;
}
.skeny-contact__heading {
    font-family: var(--ff-heading);
    font-size: clamp(2.25rem, 5vw, 3.5rem);
    font-weight: 700;
    line-height: 1.1;
    color: var(--clr-white);
    margin: 0 0 1.25rem;
    text-wrap: balance;
}
.skeny-contact__text {
    font-size: .9375rem;
    color: rgba(255,255,255,.5);
    line-height: 1.7;
    margin: 0 0 1.75rem;
}
.skeny-contact__email {
    font-size: .9375rem;
    color: var(--clr-yellow);
    text-decoration: none;
    border-bottom: 1px solid rgba(255,230,0,.3);
    padding-bottom: 2px;
    transition: border-color .2s ease;
}
.skeny-contact__email:hover { border-color: var(--clr-yellow); }

/* Telefon: <button> do kliknięcia, po kliknięciu JS podmienia go na link
   tel: z tą samą klasą (+ .is-shown). body.skeny-page: hello-biz-css ma
   niescopowane button:hover/focus z różowym tłem, trzeba je przebić. */
body.skeny-page .skeny-phone,
body.skeny-page .skeny-phone:hover,
body.skeny-page .skeny-phone:focus {
    background: none;
    border: none;
    border-radius: 0;
    padding: 0;
    font-family: inherit;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
}
/* body.skeny-page: hello-biz-css ustawia [type=button]{display:inline-block}
   i ładuje się po tym pliku, więc sama klasa przegrywała. */
body.skeny-page .skeny-contact__phone {
    display: block;
    width: fit-content;
    margin: 1rem 0 0;
    font-size: .9375rem;
    text-decoration: none;
    transition: color .2s ease, border-color .2s ease;
}
body.skeny-page .skeny-contact__phone { border-bottom: 1px dashed rgba(255,255,255,.35); padding-bottom: 2px; color: var(--clr-white); }
body.skeny-page .skeny-contact__phone:hover { color: var(--clr-yellow); border-color: var(--clr-yellow); }
body.skeny-page .skeny-contact__phone.is-shown { border-bottom-style: solid; }

.skeny-contact__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    margin-top: 1.5rem;
    font-size: .8125rem;
    color: rgba(255,255,255,.4);
}
.skeny-contact__status {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
}
.skeny-contact__status-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #3ddc84;
    flex-shrink: 0;
}

.skeny-contact__form { display: flex; flex-direction: column; gap: 1rem; }
.skeny-contact__form input,
.skeny-contact__form textarea {
    background: var(--clr-dark-card);
    padding: .875rem 1.125rem;
    font-size: .875rem;
    font-family: var(--ff-body);
    color: var(--clr-white);
    outline: none;
    border: 1px solid transparent;
    transition: border-color .2s ease;
    resize: none;
    width: 100%;
    box-sizing: border-box;
    -webkit-appearance: none;
}
.skeny-contact__form input::placeholder,
.skeny-contact__form textarea::placeholder { color: rgba(255,255,255,.25); }

/* Consent checkbox — the generic `.skeny-contact__form input` rule above
   (background/border/padding for text inputs) needs overriding here since
   the checkbox itself is visually hidden; `.skeny-contact__consent-box` is
   the actual visible custom box. */
.skeny-contact__consent {
    display: flex;
    align-items: flex-start;
    gap: .625rem;
    cursor: pointer;
    font-size: .8125rem;
    color: rgba(255,255,255,.5);
    line-height: 1.5;
}
.skeny-contact__consent input[type="checkbox"] {
    position: absolute; opacity: 0; width: 0; height: 0; padding: 0; border: none; background: none;
}
.skeny-contact__consent-box {
    width: 16px; height: 16px;
    margin-top: .15rem;
    border: 1.5px solid var(--clr-white);
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: border-color .2s, background .2s;
}
.skeny-contact__consent-box::after {
    content: '';
    width: 8px; height: 8px;
    background: var(--clr-yellow);
    border-radius: 2px;
    transform: scale(0);
    transition: transform .15s ease;
}
.skeny-contact__consent input:checked ~ .skeny-contact__consent-box { border-color: var(--clr-yellow); background: rgba(255,230,0,.1); }
.skeny-contact__consent input:checked ~ .skeny-contact__consent-box::after { transform: scale(1); }
.skeny-contact__form input:focus,
.skeny-contact__form textarea:focus { border-color: rgba(255,230,0,.5); }
.skeny-contact__error { font-size: .875rem; color: #ff6b6b; min-height: 1.2em; }
.skeny-contact__submit {
    background: var(--clr-yellow);
    color: var(--clr-black);
    border: none;
    padding: 1rem 2rem;
    font-family: var(--ff-heading);
    font-size: .875rem;
    font-weight: 700;
    letter-spacing: .04em;
    border-radius: 2px;
    align-self: flex-start;
    transition: background .2s ease, transform .1s ease;
}
.skeny-contact__submit:hover { background: var(--clr-yellow-hover); }
.skeny-contact__submit:active { transform: scale(.98); }
.skeny-contact__success {
    padding: 2rem 0;
    font-size: .9375rem;
    color: rgba(255,255,255,.75);
    line-height: 1.6;
}
.skeny-contact__success strong { color: var(--clr-white); }

/* 14. Footer
   ========================================= */
.skeny-footer {
    background: var(--clr-black);
    padding: 3rem 0;
}
.skeny-footer__logo { display: block; width: 100%; }
/* !important: WP Smush's lazyload locks the image to its width/height
   HTML attributes via an inline style (--smush-placeholder-width custom
   property) until the real image swaps in — without this the logo stays
   pinned at its original 130px regardless of this rule. */
.skeny-footer__logo img { width: 100% !important; height: auto !important; display: block; }
.skeny-footer__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, auto)) 1fr;
    gap: 2rem 5rem;
    margin: 3rem 0 0;
}
.skeny-footer__heading {
    font-family: var(--ff-heading);
    font-size: .9375rem;
    font-weight: 700;
    color: var(--clr-white);
    margin: 0 0 1rem;
}
.skeny-footer__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: .625rem;
}
.skeny-footer__list li { font-size: .875rem; line-height: 1.4; }
body.skeny-page .skeny-footer__list a,
body.skeny-page .skeny-footer__phone,
.skeny-footer__place {
    font-size: .875rem;
    color: rgba(255,255,255,.55);
    text-decoration: none;
    text-align: left;
    transition: color .2s ease;
}
body.skeny-page .skeny-footer__list a:hover,
body.skeny-page .skeny-footer__phone:hover { color: var(--clr-yellow); }
.skeny-footer__tag {
    justify-self: end;
    align-self: end;
    height: 120px;
    width: auto;
    filter: brightness(0) invert(1);
    opacity: .35;
}
.skeny-footer__bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .75rem 2rem;
    margin: 3rem 0 0;
    padding: 1.5rem 0 0;
    border-top: 1px solid rgba(255,255,255,.1);
}
.skeny-footer__copy {
    font-size: .75rem;
    color: rgba(255,255,255,.35);
}
body.skeny-page a.skeny-footer__legal-link { font-size: .75rem; color: rgba(255,255,255,.5); }
body.skeny-page a.skeny-footer__legal-link:hover { color: var(--clr-yellow); }

/* 16. Scroll Progress
   ========================================= */
.skeny-progress {
    position: fixed;
    top: 0; left: 0;
    width: 0%; height: 3px;
    background: var(--clr-yellow);
    z-index: 2000;
    transition: width .1s linear;
    pointer-events: none;
}

/* 17. Scroll Reveal
   ========================================= */
/* Default — text/headers: a short, quiet rise. A small base delay (below)
   gives it a beat to actually be seen arriving, instead of resolving
   before the eye lands on it while scrolling. */
.skeny-reveal {
    opacity: 0;
    transform: translateY(12px);
    transition: opacity var(--dur-slow) var(--ease-out-soft), transform var(--dur-slow) var(--ease-out-soft);
    transition-delay: .1s;
}
.skeny-reveal.is-visible { opacity: 1; transform: none; }
.skeny-reveal-delay-1 { transition-delay: .15s; }
.skeny-reveal-delay-2 { transition-delay: .28s; }
.skeny-reveal-delay-3 { transition-delay: .4s; }
.skeny-reveal-delay-4 { transition-delay: .52s; }

/* Tactile pop — cards/tiles/icons: no travel, a small scale settle instead.
   Reads as "the object is arriving", not "the page is sliding paper around". */
.skeny-reveal--pop {
    opacity: 0;
    transform: scale(.94);
    transition: opacity var(--dur-base) var(--ease-out-soft), transform var(--dur-slow) var(--ease-spring);
    transition-delay: .1s;
}
.skeny-reveal--pop.is-visible { opacity: 1; transform: none; }

/* Side drift — for content that benefits from a touch of directional
   variety (e.g. testimonials) instead of everything rising the same way.
   A tiny rotation settles out on entry, like a physical card being set
   down rather than a flat layer sliding in. */
.skeny-reveal--side-l { opacity: 0; transform: translateX(-16px) rotate(-1.5deg); transition: opacity var(--dur-slow) var(--ease-out-soft), transform var(--dur-slow) var(--ease-spring); transition-delay: .1s; }
.skeny-reveal--side-r { opacity: 0; transform: translateX(16px) rotate(1.5deg);  transition: opacity var(--dur-slow) var(--ease-out-soft), transform var(--dur-slow) var(--ease-spring); transition-delay: .1s; }
.skeny-reveal--side-l.is-visible,
.skeny-reveal--side-r.is-visible { opacity: 1; transform: none; }

/* 18. Responsive
   ========================================= */

/* Tablet (≤1024px) */
@media (max-width: 1024px) {
    .skeny-about__inner { gap: 3rem; }
}

/* Tablet portrait / large mobile (≤768px) */
@media (max-width: 768px) {
    :root { --nav-h: 76px; }

    /* ── Nav ── */
    .skeny-nav__links, .skeny-nav__cta { display: none; }
    .skeny-nav__burger { display: flex; }
    .skeny-nav__logo img { height: 28px; }
    .skeny-nav__inner { padding-block: 22px; }
    .skeny-nav.is-scrolled .skeny-nav__inner { padding-block: 10px; }
    .skeny-nav__mobile {
        position: absolute;
        top: 100%; left: 0; right: 0;
        background: var(--clr-black);
        padding: 1.25rem var(--pad-x) 1.75rem;
        flex-direction: column;
        gap: 0;
        z-index: 999;
        display: none;
    }
    .skeny-nav__mobile.is-open { display: flex; }
    .skeny-nav__mobile a:not(.skeny-btn) {
        font-family: var(--ff-heading);
        font-size: 1.0625rem;
        font-weight: 600;
        color: var(--clr-white);
        padding: .875rem 0;
        display: block;
        text-align: right;
    }
    .skeny-nav__mobile .skeny-btn { margin-top: 1rem; align-self: flex-end; }

    /* ── Hero ── */
    .skeny-hero {
        padding-top: calc(var(--nav-h) + 2.5rem);
        padding-bottom: 2.5rem;
        min-height: auto;
        overflow: hidden;
    }
    .skeny-hero__inner { max-width: 100%; }
    .skeny-hero__sub   { max-width: 100%; }
    .skeny-hero__stats { flex-wrap: wrap; gap: 1.5rem; }
    .hero-tag { width: 70%; right: -30px; opacity: 0.5; }
    .br-desktop { display: none; }

    /* ── Portfolio ── */
    /* overflow-x alone would compute overflow-y to auto per spec (any
       axis left at 'visible' while the other isn't gets auto-clipped
       too), silently cutting off .skeny-portfolio__glow's upward bleed
       into the hero above — overflow-y:visible keeps that from happening. */
    .skeny-portfolio { overflow-x: hidden; overflow-y: visible; }
    .skeny-portfolio__grid { grid-template-columns: 1fr 1fr; }

    /* ── Specs — single column on narrow screens ── */
    .skeny-specs { padding: 4.5rem 0; }
    .skeny-specs-grid { grid-template-columns: 1fr; margin-top: 2.25rem; gap: 1.25rem; }
    /* Ikona nad tekstem — obok zabierała połowę szerokości kafla */
    .skeny-spec-tile { min-height: 0; }
    .skeny-spec-tile__content { flex-direction: column; align-items: flex-start; gap: .75rem; padding: 1.5rem; }
    .skeny-spec-tile__content h3 { font-size: 1.125rem; }
    .skeny-spec-tile__icon { width: 56px; height: 56px; justify-content: flex-start; }
    .skeny-spec-tile__icon img { width: 56px; height: 56px; }

    /* ── About ── */
    .skeny-about { padding: 4rem 0; overflow: hidden; }
    .skeny-about__inner { grid-template-columns: 1fr; gap: 2.5rem; }
    .skeny-about__photo { position: relative; top: auto; }
    .skeny-about__tag { height: 90px; bottom: -18px; right: -14px; }
    /* Button sat at the left edge (default inline-flex start position) —
       moved to the right on mobile like every other CTA on this breakpoint. */
    .skeny-about__cta { display: flex; width: fit-content; margin-left: auto; }

    /* ── Cennik ── */
    .skeny-pricing { padding: 4.5rem 0; }
    .skeny-pricing__row {
        grid-template-columns: minmax(0, 1fr) auto;
        gap: .25rem 1rem;
    }
    .skeny-pricing__note { grid-column: 1 / -1; grid-row: 2; }
    .skeny-pricing__footer { flex-direction: column; align-items: flex-start; gap: 1.5rem; }
    .skeny-pricing__extra { grid-template-rows: 0fr; transition: grid-template-rows .5s var(--ease-out-soft); }
    .skeny-pricing__extra.is-open { grid-template-rows: 1fr; }
    .skeny-pricing__extra .skeny-pricing__row { opacity: 0; transform: translateY(-8px); transition: opacity .25s ease, transform .25s ease; }
    .skeny-pricing__extra.is-open .skeny-pricing__row { opacity: 1; transform: none; transition: opacity .4s ease .12s, transform .4s var(--ease-out-soft) .12s; }
    body.skeny-page .skeny-pricing__more,
    body.skeny-page .skeny-pricing__more:hover,
    body.skeny-page .skeny-pricing__more:focus {
        display: block;
        width: 100%;
        margin: 1.25rem 0 0;
        padding: .875rem 1rem;
        background: transparent;
        border: 1px solid rgba(255,255,255,.3);
        border-radius: 0;
        color: var(--clr-white);
        font-family: var(--ff-heading);
        font-size: .9375rem;
        font-weight: 700;
        cursor: pointer;
        -webkit-appearance: none;
        appearance: none;
        touch-action: manipulation;
    }
    .skeny-pricing__footer .skeny-btn { align-self: flex-end; }

    /* ── Podstrony usług ── */
    .skeny-service-hero { padding: calc(var(--nav-h) + 2.5rem) 0 2rem; }
    .skeny-service-section { padding: 2.75rem 0; }
    .skeny-checklist { grid-template-columns: 1fr; }
    .skeny-service-section .skeny-section-header { align-items: center; gap: 1rem; }
    .skeny-service-section .skeny-section-header .skeny-btn { padding: .6rem 1.125rem; font-size: .8125rem; }
    .skeny-steps { grid-template-columns: 1fr 1fr; }

    /* ── CTA ── */
    .skeny-cta { overflow: hidden; }
    .skeny-cta__inner { flex-direction: column; align-items: flex-start; gap: 2rem; }
    /* The heading stays left (align-items:flex-start above), but the button
       group is pulled to the right instead of sitting flush left under it. */
    .skeny-cta__btns { flex-direction: row; flex-wrap: wrap; align-self: flex-end; }

    /* ── Contact ── */
    .skeny-contact { padding: 4.5rem 0; }
    .skeny-contact__wrap { grid-template-columns: 1fr; gap: 2.5rem; }
    .skeny-contact__submit { align-self: flex-end; }

    /* ── Footer ── */
    .skeny-footer { overflow: hidden; }
    .skeny-footer__grid { grid-template-columns: 1fr 1fr; gap: 2.25rem 1.5rem; margin-top: 2.25rem; }
    .skeny-footer__tag { height: 90px; }
    .skeny-footer__bar { flex-direction: column; align-items: flex-start; margin-top: 2.25rem; }

    /* ── Narzędzia w O mnie: jedna kolumna pasków ── */
    .skeny-tools-grid { grid-template-columns: 1fr; }
}

/* Mobile (≤480px) */
@media (max-width: 480px) {
    :root { --nav-h: 72px; }

    .skeny-hero {
        padding-top: calc(var(--nav-h) + 2rem);
        padding-bottom: 2rem;
    }
    .skeny-hero__title { font-size: clamp(2rem, 10vw, 3rem); }
    .skeny-hero__stats { gap: 1.25rem; }

    .skeny-about { padding: 3rem 0; }

    .skeny-steps { grid-template-columns: 1fr; }

    /* Dwa przyciski hero obok siebie, równej szerokości */
    .skeny-hero__btns { flex-wrap: nowrap; gap: .625rem; }
    .skeny-hero__btns .skeny-btn { flex: 1 1 0; justify-content: center; padding-inline: .75rem; font-size: .875rem; }

    .skeny-cta { padding: 2.5rem 0; }
    .skeny-cta__btns { flex-direction: column; width: 100%; }
    .skeny-cta__btns .skeny-btn { justify-content: center; width: 100%; }
}

/* Small (≤375px) */
@media (max-width: 375px) {
    .skeny-hero__stats { gap: .875rem; }
    .skeny-tools-grid { gap: .5rem; }
}


/* ═══════════════════════════════════════════════════
   19. Brief Modal
   ═══════════════════════════════════════════════════ */

.skeny-brief-modal {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    visibility: hidden;
    pointer-events: none;
}
.skeny-brief-modal.is-open {
    visibility: visible;
    pointer-events: auto;
}

.skeny-brief-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,.75);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    opacity: 0;
    transition: opacity .3s ease;
}
.skeny-brief-modal.is-open .skeny-brief-modal__backdrop { opacity: 1; }

/* .skeny-brief-modal__dialog wraps close-button + panel at the panel's
   own max-width, so the close button can be positioned relative to
   WHERE THE PANEL ACTUALLY IS (its top-right corner) instead of the
   screen's literal corner — it was `position:fixed` to the viewport
   before, which put it far from the panel on any screen wider than the
   panel itself. */
.skeny-brief-modal__dialog {
    position: relative;
    width: 100%;
    max-width: 640px;
}
/* Close button sits just above the panel, on the dark backdrop — a white
   X reads cleanly there but would vanish on the yellow panel itself. */
.skeny-brief-modal__close {
    position: absolute;
    top: -3.25rem;
    right: 0;
    z-index: 2;
    appearance: none;
    background: transparent;
    border: none;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    opacity: 0;
    transform: translateY(-8px);
    transition: opacity .25s ease .1s, transform .25s ease .1s;
    pointer-events: none;
}
.skeny-brief-modal.is-open .skeny-brief-modal__close {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}
/* Same two-bar X as the mobile hamburger's open state (.skeny-nav__burger
   span, 22px × 2px) — reused here as a static crossed pair instead of a
   morphing hamburger, so both "X" icons on the site read identically. */
.skeny-brief-modal__close-bar {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 22px;
    height: 2px;
    background: var(--clr-white);
    border-radius: 2px;
    transition: background .2s;
}
.skeny-brief-modal__close-bar:nth-child(1) { transform: translate(-50%, -50%) rotate(45deg); }
.skeny-brief-modal__close-bar:nth-child(2) { transform: translate(-50%, -50%) rotate(-45deg); }
.skeny-brief-modal__close:hover .skeny-brief-modal__close-bar { background: var(--clr-yellow); }

.skeny-brief-modal__panel {
    position: relative;
    z-index: 1;
    background: var(--clr-yellow);
    border-radius: 16px;
    width: 100%;
    max-height: calc(100svh - 2rem);
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: rgba(0,0,0,.25) transparent;
    box-shadow: 0 30px 80px rgba(0,0,0,.5);
    transform: translateY(24px) scale(.97);
    opacity: 0;
    transition: transform .35s cubic-bezier(.23,1,.32,1), opacity .3s ease;
}
.skeny-brief-modal.is-open .skeny-brief-modal__panel {
    transform: translateY(0) scale(1);
    opacity: 1;
}
.skeny-brief-modal__panel::-webkit-scrollbar { width: 4px; }
.skeny-brief-modal__panel::-webkit-scrollbar-track { background: transparent; }
.skeny-brief-modal__panel::-webkit-scrollbar-thumb { background: rgba(0,0,0,.25); border-radius: 2px; }

/* Notice bar */
.skeny-brief-modal__notice {
    display: flex;
    align-items: center;
    gap: .5rem;
    background: rgba(0,0,0,.06);
    border-bottom: 1px solid rgba(0,0,0,.1);
    padding: .75rem 1.5rem;
    color: var(--clr-black);
    font-size: .8125rem;
    font-weight: 500;
    letter-spacing: .01em;
}
.skeny-brief-modal__notice svg { flex-shrink: 0; }

/* Header */
.skeny-brief-modal__header {
    padding: 1.5rem 1.5rem 0;
}
.skeny-brief-modal__title {
    font-family: var(--ff-heading);
    font-size: 1.375rem;
    font-weight: 700;
    color: var(--clr-black);
    margin: 0;
}

/* Form */
.skeny-brief-form {
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1.75rem;
}

.skeny-brief-form__fieldset {
    border: none;
    margin: 0;
    padding: 0;
}
.skeny-brief-form__legend {
    display: block;
    font-family: var(--ff-heading);
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--clr-black);
    margin-bottom: .875rem;
}

/* Checkboxes */
.skeny-brief-form__checks {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .5rem;
}
.skeny-brief-form__check {
    display: flex;
    align-items: center;
    gap: .625rem;
    cursor: pointer;
    padding: .375rem 0;
}
.skeny-brief-form__check input[type="checkbox"] { position: absolute; opacity: 0; width: 0; height: 0; }
.skeny-brief-form__check-box {
    width: 18px;
    height: 18px;
    border: 2px solid var(--clr-black);
    border-radius: 4px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .15s ease;
}
.skeny-brief-form__check-box::after {
    content: '';
    width: 8px;
    height: 8px;
    background: var(--clr-yellow);
    border-radius: 2px;
    transform: scale(0);
    transition: transform .15s ease;
}
.skeny-brief-form__check input:checked ~ .skeny-brief-form__check-box { background: var(--clr-black); }
.skeny-brief-form__check input:checked ~ .skeny-brief-form__check-box::after { transform: scale(1); }
.skeny-brief-form__check-label { font-size: .875rem; color: var(--clr-black); line-height: 1.3; }

/* Radio buttons — deadline */
.skeny-brief-form__radios {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}
.skeny-brief-form__radio {
    display: flex;
    align-items: center;
    gap: .5rem;
    cursor: pointer;
    padding: .5rem 1rem;
    border: 2px solid var(--clr-black);
    border-radius: 100px;
    font-size: .875rem;
    font-weight: 500;
    color: var(--clr-black);
    background: transparent;
    transition: background .2s, color .2s;
}
.skeny-brief-form__radio input[type="radio"] { position: absolute; opacity: 0; width: 0; height: 0; }
.skeny-brief-form__radio-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--clr-yellow);
    flex-shrink: 0;
    transform: scale(0);
    transition: transform .15s ease;
}
.skeny-brief-form__radio input:checked ~ .skeny-brief-form__radio-dot { transform: scale(1); }
.skeny-brief-form__radio:has(input:checked) { background: var(--clr-black); color: var(--clr-white); }

/* Textarea & inputs */
.skeny-brief-form__textarea,
.skeny-brief-form__input {
    width: 100%;
    background: var(--clr-white);
    border: none;
    border-radius: 10px;
    color: var(--clr-black);
    font-family: var(--ff-body);
    font-size: .9375rem;
    padding: .75rem 1rem;
    outline: none;
    transition: box-shadow .2s;
    box-sizing: border-box;
    -webkit-appearance: none;
}
.skeny-brief-form__textarea { resize: vertical; min-height: 100px; margin-top: .625rem; }
.skeny-brief-form__textarea::placeholder,
.skeny-brief-form__input::placeholder { color: rgba(0,0,0,.35); }
.skeny-brief-form__textarea:focus,
.skeny-brief-form__input:focus { box-shadow: 0 0 0 2px rgba(0,0,0,.25); }

/* Contact grid */
.skeny-brief-form__contact-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .875rem;
    margin-top: .625rem;
}
.skeny-brief-form__field { display: flex; flex-direction: column; gap: .375rem; }
.skeny-brief-form__field-label { font-size: .8125rem; color: var(--clr-black); font-weight: 600; }
.skeny-brief-form__optional { font-weight: 400; color: rgba(0,0,0,.4); }

/* Submit row */
.skeny-brief-form__submit { display: flex; flex-direction: column; align-items: flex-end; gap: .75rem; }
.skeny-brief-form__submit-btn { display: flex; align-items: center; gap: .5rem; }
.skeny-brief-form__error { font-size: .875rem; color: #b00020; min-height: 1.2em; }

/* Consent checkbox — reuses .skeny-brief-form__check/-box/-label (same
   look as the services checkboxes above) but full-width with top-aligned
   box, since the label text wraps to 2 lines. */
.skeny-brief-form__check--consent { width: 100%; align-items: flex-start; }
.skeny-brief-form__check--consent .skeny-brief-form__check-box { margin-top: .1rem; }

/* Mobile adjustments */
@media (max-width: 600px) {
    /* 96svh left only ~4svh of dark backdrop above the panel — the close
       X (which sits just above the panel via .skeny-brief-modal__dialog)
       barely fit in that sliver and ended up overlapping the yellow panel
       itself, a white X on yellow being effectively invisible there.
       88svh leaves real clearance for it. */
    .skeny-brief-modal__panel { max-height: 88svh; }
    .skeny-brief-modal { align-items: flex-end; padding: 0; }
    .skeny-brief-form__checks { grid-template-columns: 1fr; }
    .skeny-brief-form__contact-grid { grid-template-columns: 1fr; }
    .skeny-brief-form__submit-btn { width: 100%; justify-content: center; }
    .skeny-brief-form__submit { align-items: stretch; }
}

/* Desktop: two columns so the whole brief fits without scrolling the
   panel. Grid areas are assigned by nth-child rather than restructuring
   the markup, so the DOM order (and therefore the mobile stacked order
   above) stays untouched — "service" spans two rows next to budget+desc,
   balancing the tall checkbox list against the shorter fields beside it. */
@media (min-width: 860px) {
    .skeny-brief-modal__dialog { max-width: 920px; }
    .skeny-brief-form {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-areas:
            "service budget"
            "service desc"
            "deadline contact"
            "submit  submit";
        align-items: start;
        column-gap: 2.75rem;
        row-gap: 1.75rem;
    }
    .skeny-brief-form > *:nth-child(1) { grid-area: service; }
    .skeny-brief-form > *:nth-child(2) { grid-area: budget; }
    .skeny-brief-form > *:nth-child(3) { grid-area: deadline; }
    .skeny-brief-form > *:nth-child(4) { grid-area: desc; }
    .skeny-brief-form > *:nth-child(5) { grid-area: contact; }
    .skeny-brief-form > *:nth-child(6) { grid-area: submit; }
}

/* ── Budget slider ── */
.skeny-brief-budget { display: flex; flex-direction: column; gap: .75rem; }

.skeny-brief-budget__display {
    display: flex;
    align-items: baseline;
    gap: .25rem;
}
.skeny-brief-budget__input {
    background: transparent;
    border: none;
    color: var(--clr-black);
    font-family: var(--ff-heading);
    font-size: 1.75rem;
    font-weight: 700;
    min-width: 2ch;
    padding: 0;
    outline: none;
    -webkit-appearance: none;
    letter-spacing: -.01em;
}
.skeny-brief-budget__currency {
    font-family: var(--ff-heading);
    font-size: 1.375rem;
    font-weight: 600;
    color: var(--clr-black);
    transition: opacity .25s;
}

/* Slider track */
.skeny-brief-budget__slider-wrap { padding: .25rem 0; }
.skeny-brief-budget__slider {
    --pct: 0%;
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 4px;
    border-radius: 2px;
    background: linear-gradient(to right, var(--clr-yellow-dark) var(--pct), rgba(0,0,0,.15) var(--pct));
    outline: none;
    cursor: pointer;
    display: block;
}
/* Thumb — WebKit */
.skeny-brief-budget__slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--clr-black);
    border: none;
    cursor: pointer;
    transition: transform .15s ease;
}
.skeny-brief-budget__slider::-webkit-slider-thumb:active {
    transform: scale(1.2);
}
/* Thumb — Firefox */
.skeny-brief-budget__slider::-moz-range-thumb {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--clr-black);
    border: none;
    cursor: pointer;
}
/* Track — Firefox */
.skeny-brief-budget__slider::-moz-range-progress {
    background: var(--clr-yellow-dark);
    height: 4px;
    border-radius: 2px;
}

/* Edge labels */
.skeny-brief-budget__edges {
    display: flex;
    justify-content: space-between;
    font-size: .75rem;
    color: rgba(0,0,0,.45);
    margin-top: .125rem;
}

/* ── Brief success state ── */
.skeny-brief-success {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 3rem 2rem 3.5rem;
    gap: 1rem;
}
.skeny-brief-success svg { flex-shrink: 0; }
.skeny-brief-success__title {
    font-family: var(--ff-heading);
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--clr-black);
    margin: 0;
}
.skeny-brief-success__sub {
    font-size: .9375rem;
    color: rgba(0,0,0,.65);
    line-height: 1.5;
    margin: 0;
}

/* 19. Guard against parent theme's global button reset
   ========================================= */
/* hello-biz-css ships an unscoped browser-reset for real <button> /
   [type=button] / [type=submit] elements: pink (#c36) border + text at
   rest, solid pink fill + white text on hover/focus. Several of our own
   single-class selectors tie its specificity exactly and it loads after
   our stylesheet (enqueued from inside wp_head()), so on ties it silently
   wins. Adding the "button" element to each selector below raises our
   specificity just enough to always win, regardless of load order —
   values match each component's existing rule exactly, this only
   guarantees they actually apply. */
button.skeny-nav__burger { background: transparent; border: none; }
button.skeny-nav__burger:hover, button.skeny-nav__burger:focus { background: transparent; }

button.skeny-scroll-arrow { background: none; border: none; color: rgba(255,255,255,.4); }
button.skeny-scroll-arrow:hover, button.skeny-scroll-arrow:focus { background: none; color: rgba(255,255,255,.4); }

button.skeny-brief-modal__close { background: transparent; border: none; }

button.skeny-contact__submit { background: var(--clr-yellow); color: var(--clr-black); border: none; }
button.skeny-contact__submit:hover { background: var(--clr-yellow-hover); color: var(--clr-black); }

button.skeny-btn--yellow { background: var(--clr-yellow); color: var(--clr-black); border-color: var(--clr-yellow); }
button.skeny-btn--yellow:hover { background: var(--clr-yellow-hover); border-color: var(--clr-yellow-hover); color: var(--clr-black); }

button.skeny-btn--dark { background: var(--clr-black); color: var(--clr-white); border-color: var(--clr-black); }
button.skeny-btn--dark:hover { background: #1a1a1a; border-color: #1a1a1a; color: var(--clr-white); }

/* hello-biz-css also ships an unscoped reset for real text-like <input>
   elements — input[type=text], [type=email], [type=tel] etc. — with
   border:1px solid #666; border-radius:3px; padding:.5rem 1rem. That
   selector's specificity (element + attribute) ties our single-class
   input rules and (loading after) wins, same tie-break pattern as the
   button reset above. <textarea> isn't affected — the grouped selector's
   bare "textarea" part is element-only and loses to our class normally. */
.skeny-brief-modal input.skeny-brief-form__input { border: none; border-radius: 10px; padding: .75rem 1rem; }
.skeny-brief-modal input.skeny-brief-budget__input { border: none; border-radius: 0; padding: 0; }

button.skeny-btn--outline-dark { background: transparent; color: var(--clr-black); border-color: var(--clr-black); }
button.skeny-btn--outline-dark:hover { background: var(--clr-black); color: var(--clr-white); }

button.skeny-lightbox__backdrop { background: rgba(0,0,0,.92); border: none; }
button.skeny-lightbox__close { background: rgba(255,255,255,.08); border: none; color: var(--clr-white); }
button.skeny-lightbox__close:hover { background: rgba(255,255,255,.16); color: var(--clr-white); }
.skeny-brief-success__sub strong { color: var(--clr-black); font-weight: 600; }

/* hello-biz-css also ships an unscoped color rule for plain <a> elements
   (color: #333) that ties/beats our single-class .skeny-btn--* selectors
   the same way its button reset does — on .skeny-btn--dark this made the
   button text ~#333 on a near-black background (contrast ~1.4:1, unreadable).
   Only surfaced on --dark because --yellow's own near-black text color
   happened to look similar enough to #333 to hide the bug. */
body.skeny-page a.skeny-btn--yellow { color: var(--clr-black); }
body.skeny-page a.skeny-btn--outline { color: var(--clr-white); }
body.skeny-page a.skeny-btn--dark { color: var(--clr-white); }
body.skeny-page a.skeny-btn--outline-dark { color: var(--clr-black); }
body.skeny-page a.skeny-contact__email { color: var(--clr-yellow); }
body.skeny-page a.skeny-legal-link { color: var(--clr-yellow); text-decoration: underline; }
body.skeny-page a.skeny-legal-link:hover { color: var(--clr-yellow-hover); }
/* Inside the brief modal the link sits on the yellow panel itself, where
   yellow text would be invisible — override back to black there. */
body.skeny-page .skeny-brief-modal a.skeny-legal-link { color: var(--clr-black); }
body.skeny-page .skeny-brief-modal a.skeny-legal-link:hover { color: #1a1a1a; }
body.skeny-page .skeny-nav__mobile a:not(.skeny-btn) { color: var(--clr-white); }

/* 21. Legal page (polityka-prywatnosci.php)
   ========================================= */
.skeny-legal { padding: calc(var(--nav-h) + 3.5rem) 0 5rem; min-height: 60vh; }
.skeny-legal__inner { max-width: 720px; margin-inline: auto; }
.skeny-legal__title {
    font-family: var(--ff-heading);
    font-size: clamp(2rem, 4vw, 2.75rem);
    font-weight: 700;
    color: var(--clr-white);
    margin: .5rem 0 .75rem;
    line-height: 1.15;
}
.skeny-legal__updated { font-size: .8125rem; color: rgba(255,255,255,.4); margin-bottom: 2.5rem; }
.skeny-legal h2 {
    font-family: var(--ff-heading);
    font-size: 1.1875rem;
    font-weight: 700;
    color: var(--clr-white);
    margin: 2.25rem 0 .75rem;
}
.skeny-legal p { font-size: .9375rem; line-height: 1.75; color: rgba(255,255,255,.65); margin-bottom: 1rem; }
.skeny-legal ul { list-style: disc; padding-left: 1.25rem; margin-bottom: 1rem; }
.skeny-legal li { font-size: .9375rem; line-height: 1.75; color: rgba(255,255,255,.65); margin-bottom: .4rem; }
.skeny-legal strong { color: var(--clr-white); font-weight: 600; }
body.skeny-page .skeny-legal a { color: var(--clr-yellow); text-decoration: underline; }
.skeny-legal-back { margin-left: auto; white-space: nowrap; flex-shrink: 0; }
.skeny-legal-back__short { display: none; }
@media (max-width: 480px) {
    .skeny-legal-back__full { display: none; }
    .skeny-legal-back__short { display: inline; }
    .skeny-legal-back { padding: .55rem 1rem; font-size: .8125rem; }
}

/* 23. Portfolio listing page (portfolio-lista.php)
   ========================================= */
/* No hero above this section (unlike the homepage), so it needs its own
   clearance under the fixed nav instead of the base .skeny-portfolio's
   padding-top:0 (which assumes the hero section directly above it). */
.skeny-portfolio--listing {
    padding: calc(var(--nav-h) + 3.5rem) 0 5rem;
}

/* 22. Project page (portfolio-projekt.php)
   ========================================= */
.skeny-project-hero {
    padding: calc(var(--nav-h) + 3.5rem) 0 3rem;
}
.skeny-project-hero__title {
    font-family: var(--ff-heading);
    font-size: clamp(1.875rem, 4vw, 2.75rem);
    font-weight: 700;
    line-height: 1.15;
    color: var(--clr-white);
    margin: 0 0 1.25rem;
    text-wrap: balance;
}
.skeny-project-hero__desc p { font-size: 1rem; line-height: 1.75; color: rgba(255,255,255,.65); margin: 0; }
.skeny-project-hero__desc p + p { margin-top: 1rem; }
.skeny-project-hero__link { margin-top: 2rem; }

/* Filtry na /portfolio/ — body.skeny-page przebija różowe button:hover
   z hello-biz-css */
.skeny-filters {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin: -1.5rem 0 2rem;
}
body.skeny-page .skeny-filters__btn {
    background: transparent;
    color: rgba(255,255,255,.7);
    border: 1px solid rgba(255,255,255,.25);
    border-radius: 0;
    padding: .5rem 1rem;
    font-family: var(--ff-heading);
    font-size: .8125rem;
    font-weight: 600;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    touch-action: manipulation;
    transition: color .2s ease, border-color .2s ease, background .2s ease;
}
body.skeny-page .skeny-filters__btn:hover,
body.skeny-page .skeny-filters__btn:focus-visible { background: transparent; color: var(--clr-white); border-color: var(--clr-white); }
body.skeny-page .skeny-filters__btn.is-active { background: var(--clr-yellow); color: var(--clr-black); border-color: var(--clr-yellow); }
.skeny-portfolio__item.is-hidden { display: none; }
@media (max-width: 768px) {
    .skeny-project-hero { padding: calc(var(--nav-h) + 2.5rem) 0 2.5rem; }
}

.skeny-project-gallery-section {
    background: var(--clr-black);
}
.skeny-project-gallery {
    display: flex;
    flex-direction: column;
}
.skeny-project-gallery__tile {
    position: relative;
    width: 100%;
}
.skeny-project-gallery__frame {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 7;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
}
.skeny-project-gallery__photo {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    cursor: zoom-in;
}
.skeny-project-gallery__frame--natural { aspect-ratio: auto !important; }
.skeny-project-gallery__photo--natural { height: auto !important; object-fit: contain; }
.skeny-project-gallery__placeholder {
    font-family: var(--ff-heading);
    font-size: .8125rem;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: rgba(255,255,255,.2);
}
@media (max-width: 768px) {
    .skeny-project-gallery__frame { aspect-ratio: 4 / 3; }
    /* Default 2x a normal tile's height (4/3 width:height doubled), full tile width —
       cropped on the sides (object-fit:cover) same as every other tile, just taller.
       Per-tile override via inline --natural-mobile-ratio custom property (set from
       the gallery item's 'mobile_ratio' field) for images that crop too aggressively
       at the default ratio. */
    .skeny-project-gallery__frame--natural { aspect-ratio: var(--natural-mobile-ratio, 2 / 3) !important; }
    .skeny-project-gallery__photo--natural { height: 100% !important; object-fit: cover; }
}

/* Lightbox — click a gallery tile to view the full, uncropped photo */
.skeny-lightbox {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    visibility: hidden;
    opacity: 0;
    transition: opacity .25s ease, visibility .25s ease;
}
.skeny-lightbox.is-open { visibility: visible; opacity: 1; }
.skeny-lightbox__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,.92);
    border: none;
    width: 100%;
    cursor: pointer;
}
.skeny-lightbox__img {
    position: relative;
    z-index: 1;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    transform: scale(.96);
    transition: transform .25s ease;
}
.skeny-lightbox.is-open .skeny-lightbox__img { transform: scale(1); }
.skeny-lightbox__close {
    position: absolute;
    z-index: 2;
    top: 1.25rem;
    right: 1.25rem;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,.08);
    color: var(--clr-white);
    transition: background var(--ease);
}
.skeny-lightbox__close:hover { background: rgba(255,255,255,.16); }

.skeny-project-quote-section { background: var(--clr-black); padding: 1rem 0 3rem; }
.skeny-project-quote {
    max-width: 640px;
    margin: 0 auto;
    padding-top: 2rem;
    border-top: 2px solid var(--clr-yellow);
    text-align: center;
}
.skeny-project-quote p {
    font-family: var(--ff-heading);
    font-size: clamp(1.125rem, 2.4vw, 1.5rem);
    font-weight: 600;
    line-height: 1.5;
    color: var(--clr-white);
    margin: 0 0 1rem;
}
.skeny-project-quote cite {
    display: block;
    font-style: normal;
    font-size: .8125rem;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: rgba(255,255,255,.5);
}

.skeny-project-nav {
    display: flex;
    align-items: stretch;
    justify-content: center;
    flex-wrap: nowrap;
    gap: 1rem;
    padding: 3rem 0 5rem;
}
.skeny-project-nav .skeny-btn {
    flex: 1 1 0;
    justify-content: center;
    text-align: center;
    white-space: normal;
}

/* 20. Reduced motion — global override
   ========================================= */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }
    .skeny-reveal,
    .skeny-reveal--pop,
    .skeny-reveal--side-l,
    .skeny-reveal--side-r {
        opacity: 1 !important;
        transform: none !important;
        filter: none !important;
    }
}

/* 24. Global: zero rounded corners
   ========================================= */
/* Site-wide design rule — sharp 90° corners everywhere, no exceptions
   (includes elements using border-radius:50% for circles, e.g. dots and
   round buttons, which become squares). --radius is already 0 at the
   :root level, but this catches every literal border-radius value set
   directly on individual components (buttons, cards, pills, scrollbar
   thumbs, checkboxes, sliders, etc.) without having to track down and
   edit each one — and keeps any future addition compliant automatically. */
* { border-radius: 0 !important; }