/* Portfolio Page */

.portfolio-hero {
    position: relative;
    width: 100%;
    height: 100vh;
    overflow: hidden;
}
.portfolio-hero-video {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    z-index: 1;
}
.portfolio-hero-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.25);
    z-index: 2;
}
.portfolio-hero-text {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    z-index: 3;
    text-align: center;
    width: 100%;
    max-width: 822px;
}
.portfolio-hero-logo {
    width: 448px;
    height: auto;
    margin: 0 auto 16px auto;
    display: block;
}
.portfolio-hero-title {
    font-family: 'Cormorant', serif;
    font-weight: 300;
    font-size: 64px;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 1.28px;
    margin: 0;
}

/* Sticky top CTA */
.pf-sticky-cta {
    position: fixed;
    top: 0;
    left: 12px;
    right: 12px;
    transform: translateY(-120%);
    width: auto;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    z-index: 1200;
    background: rgba(255, 255, 255, 0.88); /* more transparent panel background */
    border: none;
    border-bottom: 1px solid #e6ddd2;
    opacity: 0;
    pointer-events: none;
    transition: transform 0.32s ease, opacity 0.32s ease;
}
.pf-sticky-cta.is-visible {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
}
.pf-sticky-cta-inner {
    background: transparent; /* border now on outer */
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-height: 48px;
    padding: 6px 30px;
    box-sizing: border-box;
}
.pf-sticky-cta-text {
    margin: 0;
    font-family: 'Cormorant', serif;
    font-weight: 400;
    font-size: 18px;
    line-height: 100%;
    letter-spacing: 0;
    color: #31302e;
}
.pf-sticky-cta-btn {
    flex: 0 0 auto;
    min-width: 210px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 18px;
    box-sizing: border-box;
    background: #ECE3D8;
    color: #31302e;
    text-decoration: none;
    text-transform: uppercase;
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 700;
    font-size: 12px;
    letter-spacing: 0.24em;
    white-space: nowrap; /* keep in one line */
}

/* Sections */
.pf-section {
    background: #fff;
    padding: 0;
}
.pf-section-header {
    width: 100%;
    max-width: 788px;
    margin: 0 auto;
    padding: 0 0px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    text-align: center;
    align-items: center;
}
.pf-kicker {
    font-family: 'Cormorant', serif;
    font-weight: 400;
    font-style: normal;
    font-size: 23px;
    line-height: 100%;
    letter-spacing: 0.05em; /* 5% */
    text-align: center;
    text-transform: uppercase;
    color: #31302e;
}
.pf-title {
    font-family: 'Cormorant', serif;
    font-weight: 300;
    font-size: 48px;
    letter-spacing: 1.52px;
    text-transform: uppercase;
    color: #31302e;
    margin: 0;
}
.pf-desc {
    font-family: Camorant;
    font-weight: 500;
    font-size: 15px;
    line-height: 23px;
    letter-spacing: 0.3px;
    color: rgba(55, 54, 52, 1);
    margin: 0;
}
/* Wedding intro paragraph (exact spec) */
.pf-wedding .pf-desc {
    font-family: 'Cormorant', serif;
    font-weight: 400;
    font-style: normal;
    font-size: 20px;
    line-height: 120%;
    letter-spacing: 0;
    text-align: center;
    max-width: 788px;
}

/* Per-section paddings */
.pf-wedding { padding: 64px 0 0px 0; background: #F8F3ED; }
.pf-proposals { padding: 64px 0 94px 0; background: #F8F3ED; }
.pf-parties { padding: 74px 0 79px 0; background: #fff; }
.pf-feedback-section { padding: 112px 0 162px 0; } /* already defined above, keep stronger */
.pf-children { padding: 94px 0 54px 0; background: #F8F3ED; }
.pf-lectures { padding: 94px 0 0px 0; background: #F8F3ED; }
.pf-parties-2 { padding: 64px 0 54px 0; background: #F8F3ED; }
.pf-jko-birthday { padding: 94px 0 94px 0; background: #F8F3ED; }
.pf-end-strip { padding: 64px 0; background: #fff; } /* already defined below; keep values */

/* Parties intro paragraph */
.pf-parties .pf-desc {
    font-family: 'Cormorant', serif;
    font-weight: 400;
    font-style: normal;
    font-size: 20px;
    line-height: 120%;
    letter-spacing: 0;
    text-align: center;
}
/* Children intro paragraph */
.pf-children .pf-desc {
    font-family: 'Cormorant', serif;
    font-weight: 400;
    font-style: normal;
    font-size: 20px;
    line-height: 120%;
    letter-spacing: 0;
    text-align: center;
}
.pf-card-link1 {
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 600;
    font-size: 12px;
    line-height: 100%;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: rgba(127, 108, 101, 1);
    text-decoration: underline;
    text-decoration-style: solid;
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
    text-decoration-skip-ink: auto;
    align-self: center;
    margin-bottom: 22px;
    padding: 14px 12px;
    align-self: center;
    margin-top: 0px;
}
/* Second parties section intro paragraph */
.pf-parties-2 .pf-desc {
    font-family: 'Cormorant', serif;
    font-weight: 400;
    font-style: normal;
    font-size: 20px;
    line-height: 120%;
    letter-spacing: 0;
    text-align: center;
}

/* Children card titles */
.pf-children .pf-card-title {
    font-family: 'Cormorant', serif;
    font-weight: 400;
    font-style: normal;
    font-size: 20px;
    line-height: 100%;
    letter-spacing: 0;
    text-align: center;
}

/* Lectures intro paragraph */
.pf-lectures .pf-desc {
    font-family: 'Cormorant', serif;
    font-weight: 400;
    font-style: normal;
    font-size: 20px;
    line-height: 120%;
    letter-spacing: 0;
    text-align: center;
}

/* JKO birthday intro paragraph */
.pf-jko-birthday .pf-desc {
    font-family: 'Cormorant', serif;
    font-weight: 400;
    font-style: normal;
    font-size: 20px;
    line-height: 120%;
    letter-spacing: 0;
    text-align: center;
}
/* Grids */
.pf-grid {
    width: 100%;
    max-width: 1024px;
    margin: 34px auto 0 auto;
    padding: 0 40px;
    display: grid;
    gap: 44px;
    align-items: start;
    justify-content: center;
}
.pf-grid-3x2 {
    grid-template-columns: repeat(3, 310px);
}
/* Wedding grid: center 4th between col 1-2, 5th between col 2-3 */
.pf-wedding .pf-grid-3x2 > .pf-card:nth-child(4) {
    grid-column: 1 / span 2;
    grid-row: 2;
    justify-self: center;
}
.pf-wedding .pf-grid-3x2 > .pf-card:nth-child(5) {
    grid-column: 2 / span 2;
    grid-row: 2;
    justify-self: center;
}
.pf-grid-masonry-a {
    grid-template-columns: 552px 398px;
    justify-content: center; /* center the grid within container */
}
.pf-grid-masonry-a .pf-card-wide {
    grid-column: 1 / -1;     /* first wide card occupies full row */
    justify-self: center;    /* and is centered */
}
/* Exact media ratios per Figma for desktop */
.pf-grid-masonry-a .pf-card-wide .pf-card-media { aspect-ratio: 632 / 544; }
.pf-grid-masonry-a .pf-card:nth-child(2) .pf-card-media { aspect-ratio: 552 / 494; }
.pf-grid-masonry-a .pf-card:nth-child(3) .pf-card-media { aspect-ratio: 398 / 544; }
.pf-grid-split {
    grid-template-columns: 576px 400px;
}
.pf-feedback-section {
    background: #FFFFFF;
    padding: 25px 0 100px 0;
}
.pf-feedback-container {
    max-width: 846px;
    margin: 0 auto;
    padding: 0 0px;
}
.pf-feedback-content {
    display: flex;
    flex-direction: column;
    gap: 24px;
    align-items: center;
}
.pf-feedback-avatar {
    width: 140px;
    height: 140px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
}
.pf-feedback-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pf-feedback-text { color: #31302e; text-align: center; display: grid; gap: 12px; }
.pf-feedback-name {
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 700;
    font-size: 12px;
    letter-spacing: 2.88px;
    text-transform: uppercase;
    margin: 0;
}
.pf-feedback-quote {
    font-family: 'Cormorant', serif;
    font-weight: 400;
    font-size: 26px;
    line-height: 28px;
    margin: 0;
    letter-spacing: -2%;
}
.pf-grid-lectures {
    grid-template-columns: 500px 440px;
    column-gap: 44px;
    row-gap: 44px; /* two rows with 44px between */
}
.pf-card-left-row2 { grid-column: 1; grid-row: 2; }
.pf-card-left-row2 .pf-card-media { width: 500px; aspect-ratio: 500 / 441; }
.pf-card-col2-row1 { grid-column: 2; grid-row: 1; }
.pf-card-col2-row2 { grid-column: 2; grid-row: 2; }
.pf-card-col2-row1 .pf-card-media,
.pf-card-col2-row2 .pf-card-media { width: 440px; }
.pf-col {
    display: grid;
    gap: 44px;
}

/* Parties 2 stacked columns */
.pf-grid-parties-2 {
    grid-template-columns: 440px 500px;
    column-gap: 44px;
    justify-content: center;
    justify-items: center;
}
.pf-grid.pf-grid-parties-2 {
    max-width: 1024px;
    padding: 0;
    margin: 24px auto 0 auto;
}
.pf-grid-parties-2 .pf-col { gap: 44px; }
.pf-col-left .pf-card-440x580 .pf-card-media {
    width: 440px;
    height: 580px;
    aspect-ratio: 440 / 580;
    transform: rotate(0deg);
    margin-top: 110px;
    opacity: 1;
}
.pf-col-left .pf-card-440x460 .pf-card-media {
    width: 440px;
    height: 460px;
    aspect-ratio: 440 / 460;
    transform: rotate(0deg);
    opacity: 1;
}
.pf-col-right .pf-card-500x668 .pf-card-media {
    width: 500px;
    height: 668px;
    aspect-ratio: 500 / 668;
    transform: rotate(0deg);
    opacity: 1;
}
.pf-col-right .pf-card-500x587 .pf-card-media {
    width: 500px;
    height: 587px;
    aspect-ratio: 500 / 587;
    transform: rotate(0deg);
    opacity: 1;
}
/* vertical offset per design */
.pf-col-left .pf-card-440x580 { margin-top: 0; }

/* J.KO Birthday */
.pf-grid-jko {
    max-width: 1020px;
    margin: 24px auto 0 auto;
    padding: 0 40px;
    display: grid;
    grid-template-columns: 552px 290px;
    gap: 20px;
    align-items: start;
}
.pf-grid-jko .pf-jko-photo-link {
    display: block;
    position: relative;
    overflow: hidden;
    line-height: 0;
    text-decoration: none;
    color: inherit;
}

.pf-grid-jko .pf-jko-photo-link::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, 0.3);
    opacity: 0;
    transition: opacity 0.28s ease;
    pointer-events: none;
}

.pf-grid-jko .pf-jko-photo-link:hover::after {
    opacity: 1;
}

.pf-grid-jko .pf-jko-left img {
    width: 100%; height: auto; aspect-ratio: 552 / 866; object-fit: cover; display: block;
}
.pf-grid-jko .pf-jko-right {
    display: grid; gap: 20px;
    margin-top: 90px;
}
.pf-grid-jko .pf-jko-right .pf-jko-photo-link:first-child img {
    width: 100%; height: auto; aspect-ratio: 290 / 275; object-fit: cover; display: block;
}
.pf-grid-jko .pf-jko-right .pf-jko-photo-link:last-child img {
    width: 100%; height: auto; aspect-ratio: 290 / 398; object-fit: cover; display: block;
}
.pf-jko-cta { margin-top: 24px; text-align: center; }
.pf-jko-cta .pf-btn {
    display: inline-flex;
    border: none;
}

/* End strip — горизонтальний padding на секції, щоб .pf-end-viewport міг бути до 1234px
   і три кадри (332+44+482+44+332) не обрізались через внутрішні відступи слайдера. */
.pf-end-strip {
    background:#F8F3ED;
    padding: 0 clamp(16px, 4vw, 40px) 101px;
    box-sizing: border-box;
}
/* Стрілки .pf-end-arrow-btn приховані (підписи під слайдером) — у сітці auto 1fr auto
   лишався лише viewport у першій колонці, а 1fr роздувався справа → зсув. Один стовпець = по центру. */
.pf-end-slider {
    width: 100%;
    max-width: 1234px;
    margin: 0 auto;
    padding: 0;
    box-sizing: border-box;
    display: grid;
    grid-template-columns: 1fr;
    justify-items: stretch;
    align-items: center;
    gap: 12px;
}
.pf-end-viewport {
    overflow: hidden;
    width: 100%;
    max-width: 100%;
    justify-self: stretch;
    /* Мінімум висоти центрального слайда — низ смуги не стискається під час transition, підписи не заїжджають під фото */
    min-height: 716px;
    display: flex;
    align-items: center;
    box-sizing: border-box;
    -webkit-user-select: none;
    user-select: none;
}

.pf-end-viewport.pf-end-viewport--drag {
    touch-action: none;
    cursor: grabbing;
}

/* Prevent double "center zoom" animation on wrap (clone → original) */
.pf-end-viewport.pf-end-viewport--no-slide-trans .pf-end-slide {
    transition: none !important;
}
.pf-end-track {
    display: flex;
    gap: 44px;
    align-items: center;
    transition: transform 1.65s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: transform;
}
.pf-end-track.no-transition { transition: none; }
.pf-end-slide {
    flex: 0 0 332px;
    height: 494px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition:
        flex-basis 1.65s cubic-bezier(0.4, 0, 0.2, 1),
        height 1.65s cubic-bezier(0.4, 0, 0.2, 1),
        opacity 1.65s cubic-bezier(0.4, 0, 0.2, 1);
    opacity: 0.85;
    background: #f8f3ed;
}
/* Desktop pf-end + oa-top-strip (1:1 з about): усі слайди cover */
@media (min-width: 1201px) {
    .pf-end-strip.oa-top-strip .pf-end-slide img,
    .pf-end-strip.oa-top-strip .pf-end-slide:not(.is-center) img,
    .pf-end-strip.oa-top-strip .pf-end-slide.is-center img {
        object-fit: cover;
    }
    .pf-end-strip.oa-top-strip .pf-end-track {
        backface-visibility: hidden;
    }
}
/* Бокові (без oa-top-strip): contain; oa-top-strip mobile/desktop — cover via about-wedding-top-strip.css */
.pf-end-strip:not(.oa-top-strip) .pf-end-slide:not(.is-center) img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}
.pf-end-strip:not(.oa-top-strip) .pf-end-slide.is-center img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.pf-end-strip:not(.oa-top-strip) .pf-end-slide:not(.is-center) video {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}
.pf-end-strip:not(.oa-top-strip) .pf-end-slide.is-center video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.pf-end-slide.is-center {
    flex-basis: 482px;
    height: 716px;
    opacity: 1;
}

.pf-end-arrow-btn {
    width: 40px;
    height: 12px;
    border: 0;
    background: none;
    cursor: pointer;
    position: relative;
}
.pf-end-arrow-btn { display: none; } /* використовуємо іконки біля тексту */
.pf-end-arrow-btn::before {
    content: "";
    position: absolute;
    left: 0; right: 0; top: 50%;
    transform: translateY(-50%);
    height: 1px;
    background: #bea59b;
}
.pf-end-caption-row {
    width: 100%;
    max-width: 1234px;
    margin: 24px auto 0 auto;
    padding: 0;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
}
.pf-end-caption {
    font-family: 'Nunito Sans', sans-serif;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 2.88px;
    text-transform: uppercase;
    color: rgba(127, 108, 101, 1);
    display: inline-flex;
    align-items: center;
    gap: 0px;
    cursor: pointer;
    margin-top: -200px;
    position: relative;         /* for hitbox */
    padding: 10px 14px;         /* enlarge clickable area without visual change */
    margin-left: -14px;         /* compensate padding to keep layout */
    margin-right: -14px;
    -webkit-tap-highlight-color: transparent;
}
.pf-end-caption .pf-end-ic { width: 40px; height: 12px; display: block; }
/* Cards */
.pf-card { display: flex; flex-direction: column; gap: 12px; }
.pf-card-wide { width: 632px; }
.pf-card-tall { width: 576px; }
.pf-card-taller { width: 500px; }
.pf-card-media {
    width: 100%;
    height: auto;
    aspect-ratio: 310 / 446;
    overflow: hidden;
    background: #ddd;
    position: relative;
}
.pf-card-wide .pf-card-media { aspect-ratio: 632 / 544; }
.pf-card-tall .pf-card-media { aspect-ratio: 576 / 714; }
.pf-card-taller .pf-card-media { aspect-ratio: 500 / 729; }
.pf-card-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.pf-card-media video { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Hover overlay for case photos */
.pf-card-media::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, 0.3);
    opacity: 0;
    transition: opacity 0.28s ease;
    pointer-events: none;
}
.pf-card:hover .pf-card-media::after {
    opacity: 1;
}

/* Fine adjustments per card */
.pf-grid-split .pf-card:nth-child(2) {
    margin-top: 60px;
}
.pf-grid-split .pf-card:nth-child(2) .pf-card-video { transform: none; }
.pf-card-title {
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 400;
    font-size: 15px;
    line-height: 23px;
    letter-spacing: 0.3px;
    color: rgba(55, 54, 52, 1);
    margin: 0;
    text-align: center;
}
/* Wedding card titles override */
.pf-wedding .pf-card-title {
    font-family: 'Cormorant', serif;
    font-weight: 400;
    font-style: normal;
    font-size: 20px;
    line-height: 100%;
    letter-spacing: 0;
    text-align: center;
}
/* Parties card titles */
.pf-parties .pf-card-title,
.pf-parties-2 .pf-card-title {
    font-family: 'Cormorant', serif;
    font-weight: 400;
    font-style: normal;
    font-size: 20px;
    line-height: 120%;
    letter-spacing: 0;
    text-align: center;
}
/* Lectures card titles */
.pf-lectures .pf-card-title {
    font-family: 'Cormorant', serif;
    font-weight: 400;
    font-style: normal;
    font-size: 20px;
    line-height: 120%;
    letter-spacing: 0;
    text-align: center;
}
.pf-card-link {
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 600;
    font-size: 12px;
    line-height: 100%;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: rgba(127, 108, 101, 1);
    text-decoration: underline;
    text-decoration-style: solid;
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
    text-decoration-skip-ink: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 14px;
    align-self: center;
    margin-top: -8px;

}
.pf-card-link:hover { text-decoration: underline; }

/* Explicit sizes for Lectures 2x2 grid media (desktop) */
.pf-grid-lectures .pf-card-taller .pf-card-media {
    width: 500px;
    height: 729px;
    aspect-ratio: auto;
    transform: rotate(0deg);
    opacity: 1;
}
.pf-grid-lectures .pf-card-taller { margin-top: 30px; }
.pf-grid-lectures .pf-card-left-row2 .pf-card-media {
    width: 500px;
    height: 377px;
    aspect-ratio: auto;
    transform: rotate(0deg);
    opacity: 1;
}
.pf-grid-lectures .pf-card-col2-row1 .pf-card-media {
    width: 440px;
    height: 578px;
    aspect-ratio: auto;
    transform: rotate(0deg);
    opacity: 1;
}
.pf-grid-lectures .pf-card-col2-row2 .pf-card-media {
    width: 440px;
    height: 587px;
    aspect-ratio: auto;
    transform: rotate(0deg);
    opacity: 1;
}
.pf-card-col2-row2 { margin-top: -180px; }

/* Feature (Proposals) */
.pf-proposals { background: #F8F3ED; }
.pf-proposals-inner {
    max-width: 788px;
    margin: 0 auto;
    padding: 0 0px;
    display: grid;
    grid-template-rows: auto auto auto;
    gap: 24px;
    align-items: center;
    justify-items: center;
}
.pf-feature-header { text-align: center; display: grid; gap: 14px; }
.pf-feature-media {
    width: 470px;
    height: auto;
    aspect-ratio: 470 / 634;
    overflow: hidden;
}
.pf-feature-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pf-feature-media video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Hide occasional encoded top-edge dark line by slightly shifting/zooming the crop */
    object-position: 50% 16%;
    transform: scale(1.05);
    display: block;
}

/* Desktop: crop a bit more to fully hide the top black bar */
@media (min-width: 740px) {
    .pf-proposals .pf-feature-media video {
        object-position: 50% 26%;
        transform: scale(1.10);
    }
}
/* Proposals intro paragraph (exact spec) */
.pf-proposals .pf-desc {
    font-family: 'Cormorant', serif;
    font-weight: 400;
    font-style: normal;
    font-size: 20px;
    line-height: 120%;
    letter-spacing: 0;
    text-align: center;
    max-width: 788px;
}

/* CTA */
.pf-cta-video {
    position: relative;
    width: 100%;
    height: 100vh;
    overflow: hidden;
    background: var(--video-poster-bg, #131313);
}
.pf-cta-bg {
    position: absolute; inset: 0;
    width: 100%; height: 100%; object-fit: cover;
    z-index: 1;
}
.pf-cta-overlay {
    position: absolute; inset: 0;
    background: rgba(0,0,0,0.35);
    z-index: 2;
}
.pf-cta-inner {
    position: absolute; top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    z-index: 3;
    width: 100%;
    max-width: 768px;
    padding: 0 50px;
    display: flex; flex-direction: column; gap: 38px; align-items: center; text-align: center;
}
.pf-cta-title {
    font-family: 'Cormorant', serif;
    font-weight: 400;
    font-size: 48px;
    color: #fff;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    line-height: 70%;
    margin: 0;
}
.pf-cta-title .pf-cta-and {
    font-family: 'Corinthia', serif;
    font-weight: 400;
    font-size: 78px;
    letter-spacing: 0.02em;
    text-transform: lowercase;
    line-height: 100%;
}

/* Buttons */
.pf-btn {
    background: white;
    color: #31302e;
    border: none;
    padding: 12px 32px;
    font-family: 'Nunito Sans', sans-serif;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 2.88px;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.3s ease;
    white-space: nowrap;
    text-decoration: none;
    display: inline-flex; align-items: center; justify-content: center;
}
.pf-btn-big { padding: 24px 50px; }
.pf-btn-medium { padding: 12px 32px; background: #F1EBE3; }

/* Footer: layout у style.css; .footer-inner — лише для сторінок з альтернативним футером */
.footer-inner { max-width: 846px; margin: 0 auto; padding: 0 40px; text-align: center; }
.footer-inner a { color: #31302e; text-decoration: none; font-family: 'Nunito Sans', sans-serif; font-weight: 700; letter-spacing: 2.88px; text-transform: uppercase; font-size: 12px; }


/* Mobile */
@media (max-width: 739px) {
    .pf-sticky-cta {
        top: 0;
        left: 0;
        right: 0;
        width: 100%;
        max-width: none;
        height: 56px;
    }
    .pf-sticky-cta-inner {
        min-height: 56px;
        padding: 0 16px 0 96px; /* extra room by border */
        gap: 16px;
        justify-content: flex-end;   /* push content (button) to right */
    }
    .pf-sticky-cta-text {
        display: none;
    }
    .pf-sticky-cta-btn {
        width: auto;
        min-width: 0;
        max-width: max-content;
        margin-left: auto;           /* ensure right alignment */
    }

    /* Burger styling when sticky CTA visible (about-like) */
    .mobile-menu-btn.with-sticky-panel {
        top: 8px;
        left: 20px;
        padding: 8px;
        z-index: 1202;
        background: transparent !important;
        border: none;            /* remove outline/border */
        border-radius: 0;
        box-shadow: none !important;        /* remove shadow */
    }
    .mobile-menu-close.with-sticky-panel {
        top: -2px !important;
        left: 10px !important;
    }

    /* Hero */
    .portfolio-hero { height: 100vh; }
    .portfolio-hero-logo { width: 274px; }
    .portfolio-hero-title { font-size: 28px; letter-spacing: 1.12px; }
.pf-parties-2 .pf-desc {
    font-family: 'Cormorant', serif;
    font-weight: 400;
    font-style: normal;
    font-size: 20px;
    line-height: 120%;
    letter-spacing: 0;
    text-align: justify;
}
.pf-title {
    font-family: 'Cormorant', serif;
    font-weight: 400;
    font-size: 48px;
    letter-spacing: 1.52px;
    text-transform: uppercase;
    color: #31302e;
    margin: 0;
}
    /* Paddings per section */
    .pf-wedding { padding: 48px 0 0 0; }
    .pf-proposals { padding: 84px 0 64px 0; }
    .pf-parties { padding: 48px 0 0px 0; }
    .pf-feedback-section { padding: 48px 0 56px 0; }
    .pf-children { padding: 48px 0 48px 0; }
    .pf-parties-2 { padding: 36px 0 54px 0; }
    .pf-lectures { padding: 48px 0 48px 0; }
    .pf-jko-birthday { padding: 36px 0 64px 0; }
    .pf-end-strip { padding: 20px 0 54px 0; }

    /* Bigger tap targets for native pf-end captions (not oa-top-strip) */
    .pf-end-strip:not(.oa-top-strip) .pf-end-caption-row {
        padding-left: 24px;
        padding-right: 24px;
    }
    .pf-end-strip:not(.oa-top-strip) .pf-end-caption {
        position: relative;
        padding: 12px 16px;
        margin-left: -16px;
        margin-right: -16px;
        -webkit-tap-highlight-color: transparent;
    }
    .pf-end-caption .pf-end-ic {
        width: 48px;
        height: 16px;
    }
    /* Mobile separator line after JKO CTA button, before footer */
    .pf-jko-cta {
        display: flex;
        justify-content: center;
    }
    .pf-jko-cta::after {
        content: "";
        display: block;
        position: relative;
        left: 0;
        transform: none;
        width: 100%;
        height: 4px;
        background: #F1EBE3;
        border-radius: 2px;
        margin: 28px auto 0 auto;
    }
    .pf-grid.pf-grid-parties-2 {
        width: 100%;
        padding: 0 32px;
        margin: 24px auto 0 auto;
    }
    .pf-jko-birthday .pf-desc {
        font-family: 'Cormorant', serif;
        font-weight: 400;
        font-style: normal;
        font-size: 20px;
        line-height: 120%;
        letter-spacing: 0;
        text-align: justify;
    }
    .pf-lectures .pf-desc {
        font-family: 'Cormorant', serif;
        font-weight: 400;
        font-style: normal;
        font-size: 20px;
        line-height: 120%;
        letter-spacing: 0;
        text-align: justify;
    }
    /* Section header */
    .pf-section-header { max-width: 611px; padding: 0 32px; text-align: center; align-items: center; gap: 12px; }
    .pf-kicker { font-size: 18px; letter-spacing: 0.05em; }
    .pf-title { font-size: 28px; letter-spacing: 1.12px; line-height: 100%; }
    .pf-desc { font-size: 15px; line-height: 23px; padding: 0; 
    text-align: justify;}
    .pf-proposals .pf-desc {
        font-family: 'Cormorant', serif;
        font-weight: 400;
        font-style: normal;
        font-size: 20px;
        line-height: 120%;
        letter-spacing: 0;
        text-align: justify;
        max-width: 788px;
    }

    /* Grids */
    .pf-grid { max-width: 100%; padding: 0 32px; gap: 16px; }

    /* Wedding 3x2 -> 2 per row (fluid, proportional to screen) */
    .pf-grid-3x2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .pf-wedding .pf-grid-3x2 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: 22px;
        row-gap: 0px;
        justify-content: center;
        padding: 0 32px;
    }
    .pf-wedding .pf-grid-3x2 > .pf-card { width: 100%; justify-self: center; }
    .pf-wedding .pf-grid-3x2 > .pf-card .pf-card-media {
        width: 100%;
        height: auto;
    }
    /* Cancel desktop special placement for mobile */
    .pf-wedding .pf-grid-3x2 > .pf-card:nth-child(4),
    .pf-wedding .pf-grid-3x2 > .pf-card:nth-child(5) { grid-column: auto; grid-row: auto; justify-self: center; }
    .pf-wedding .pf-grid-3x2 .pf-card-media { aspect-ratio: 153.5 / 200; }
    /* Chessboard offset for right-column cards */
    .pf-wedding .pf-grid-3x2 > .pf-card { margin-top: 0; }
    .pf-wedding .pf-grid-3x2 > .pf-card.pf-mobile-lower {
        margin-top: 54px;
        transform: translateY(110px);
    }

    /* Masonry A */
    .pf-grid-masonry-a { grid-template-columns: 1fr; gap: 34px; padding: 0 32px; }
    .pf-card-wide { justify-self: center; width: 100%; max-width: 311px; }
    .pf-card-wide .pf-card-media { aspect-ratio: 311 / 419.5; }
    .pf-grid-masonry-a .pf-card:not(.pf-card-wide) .pf-card-media { aspect-ratio: 153.5 / 200; }
    /* Exact mobile sizing for event-2.jpg (second card) — full width */
    .pf-parties .pf-grid-masonry-a .pf-card:nth-child(2) .pf-card-media {
        width: 100%;
        max-width: 100%;
        height: auto;
        aspect-ratio: 311 / 278.6041564941406;
        transform: rotate(0deg);
        opacity: 1;
        justify-self: stretch;
    }
    .pf-parties .pf-grid-masonry-a .pf-card:nth-child(2) .pf-card-media img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }
    .pf-children .pf-desc {
    font-family: 'Cormorant', serif;
    font-weight: 400;
    font-style: normal;
    font-size: 20px;
    line-height: 120%;
    letter-spacing: 0;
    text-align: justify;
}

    .pf-proposals-inner {
        grid-template-columns: 1fr;
        gap: 16px;
        padding: 0 32px;
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
        justify-items: stretch;
    }
    .pf-feature-header { width: 100%; max-width: 100%; box-sizing: border-box; }
    .pf-feature-media {
        width: 100%;
        max-width: 100%;
        margin: 0;
        aspect-ratio: 470 / 634;
        justify-self: stretch;
        background: #F8F3ED; /* avoid black flashes/bars while video loads */
    }
    .pf-feature-media img,
    .pf-feature-media video { width: 100%; height: auto; display: block; object-fit: cover; }
    /* Fill the fixed-aspect container to avoid top/bottom bars */
    .pf-feature-media video { height: 100%; }
    .pf-proposals .pf-btn-big {
        width: 100%;
        max-width: 100%;
        margin: 0;
        box-sizing: border-box;
        justify-self: stretch;
    }

    /* Feedback */
    .pf-feedback-container { padding: 0 32px; }
    .pf-feedback-content { gap: 12px; }
    .pf-feedback-name { font-size: 12px; }
    .pf-feedback-quote { font-size: 20px; line-height: 120%; }

    /* Children split — fixed static gap between photo and video on mobile */
    .pf-grid-split { grid-template-columns: 1fr 1fr; gap: 22px; padding: 0 32px; }
    .pf-children .pf-grid-split {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: 22px;
        row-gap: 0;
        max-width: 611px;
        margin-left: auto;
        margin-right: auto;
        justify-content: center;
        align-items: center;
    }
    .pf-wedding .pf-card-title {
        font-family: 'Cormorant', serif;
        font-weight: 400;
        font-style: normal;
        font-size: 16px;
        line-height: 100%;
        letter-spacing: 0;
        text-align: center;
    }
    .pf-parties .pf-card-title, .pf-parties-2 .pf-card-title {
        font-size: 16px;
    }

        
    .pf-grid-split .pf-card { width: 100%; }
    .pf-grid-split .pf-card .pf-card-media { width: 100%; height: auto; aspect-ratio: auto; }
    .pf-grid-split .pf-card:nth-child(2) { margin-top: 0; }
    .pf-grid-split .pf-card .pf-card-media img,
    .pf-grid-split .pf-card  { width: 100%; height: auto; object-fit: cover; display: block; }

    /* Children video exact mobile size (second card) */
    .pf-children .pf-grid-split .pf-card:nth-child(2) .pf-card-media {
        width: 100%;
        height: auto;
        aspect-ratio: 139.5 / 192.50999450683594;
        transform: rotate(0deg);
        opacity: 1;
        justify-self: center;
        margin-top: 0px;
    }
    .pf-children .pf-grid-split .pf-card:nth-child(2) .pf-card-media video {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
        margin-top:0px;
    }

    /* Make video taller than photo in Children block */
    .pf-children .pf-grid-split .pf-card:nth-child(1) .pf-card-media {
        width: 100%;
        height: auto;
        aspect-ratio: 139.5 / 170;
        transform: rotate(0deg);
        opacity: 1;
        justify-self: center;
    }
    .pf-children .pf-grid-split .pf-card:nth-child(1) .pf-card-media img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }

    /* Children: all text under the photo (media → title → link), centered — як у весільних картках (.pf-card gap 12px + link -8px) */
    .pf-children .pf-card {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 12px;
    }
    .pf-children .pf-card .pf-card-media { order: 1; }
    .pf-children .pf-card .pf-card-title { order: 2; margin-top: 0; align-self: center; text-align: center; }
    .pf-children .pf-card .pf-card-link { order: 3; margin-top: -8px; align-self: center; text-align: center; }
    .pf-children .pf-card-title {
    font-family: 'Cormorant', serif;
    font-weight: 400;
    font-style: normal;
    font-size: 16px;
    line-height: 100%;
    letter-spacing: 0;
    text-align: center;
    margin-top: 0;
}
.pf-lectures .pf-card-title {
    font-family: 'Cormorant', serif;
    font-weight: 400;
    font-style: normal;
    font-size: 16px;
    line-height: 120%;
    letter-spacing: 0;
    text-align: center;
}
    /* Parties-2 mobile exact layout */
    .pf-grid-parties-2 {
        display: grid;
        grid-template-columns: 1fr;   /* fluid column */
        row-gap: 20px;                /* vertical spacing between rows */
        padding: 0 32px;              /* 32px side padding on mobile */
        justify-content: center;
        justify-items: center;
    }
    /* Flatten columns to treat all cards as direct grid items */
    .pf-grid-parties-2 .pf-col { display: contents; }

    /* Order (rows): 1) event-8 (big), 2) event-7 (small L), 3) event-6 (small R), 4) event-5 (small L) */
    .pf-grid-parties-2 .pf-col-right .pf-card-500x668 { grid-row: 1; }
    .pf-grid-parties-2 .pf-col-left  .pf-card-440x580 { grid-row: 2; }
    .pf-grid-parties-2 .pf-col-right .pf-card-500x587 { grid-row: 3; }
    .pf-grid-parties-2 .pf-col-left  .pf-card-440x460 { grid-row: 4; }

    /* Card widths to keep captions directly under media */
    .pf-grid-parties-2 .pf-col-right .pf-card-500x668 { width: 100%; }           /* big first - full width */
    .pf-grid-parties-2 .pf-col-left  .pf-card-440x580,
    .pf-grid-parties-2 .pf-col-right .pf-card-500x587,
    .pf-grid-parties-2 .pf-col-left  .pf-card-440x460 { width: 46.7%; }

    /* Sizes */
    /* Big (event-8.jpg) — fluid width */
    .pf-grid-parties-2 .pf-col-right .pf-card-500x668 .pf-card-media {
        width: 100%;
        height: auto;
        aspect-ratio: 311 / 415.4959716796875;
        transform: rotate(0deg);
        opacity: 1;
    }
    .pf-grid-parties-2 .pf-col-right .pf-card-500x668 .pf-card-media img,
    .pf-grid-parties-2 .pf-col-right .pf-card-500x668 .pf-card-media video { width: 100%; height: 100%; object-fit: cover; display: block; }
    /* Small cards (event-7, event-5) — scale with card width */
    .pf-grid-parties-2 .pf-col-left .pf-card-440x580 .pf-card-media,
    .pf-grid-parties-2 .pf-col-left .pf-card-440x460 .pf-card-media {
        width: 100%;
        height: auto;
        aspect-ratio: 145.5 / 191.7954559326172;
        transform: rotate(0deg);
        opacity: 1;
    }
    /* La Dolce Vita (event-6): mobile only — same width as other small cards, taller frame */
    .pf-grid-parties-2 .pf-col-right .pf-card-500x587 .pf-card-media {
        width: 100%;
        height: auto;
        aspect-ratio: 145.5 / 213;
        transform: rotate(0deg);
        opacity: 1;
    }
    .pf-grid-parties-2 .pf-col-left .pf-card-440x580 .pf-card-media img,
    .pf-grid-parties-2 .pf-col-right .pf-card-500x587 .pf-card-media img,
    .pf-grid-parties-2 .pf-col-left .pf-card-440x460 .pf-card-media img,
    .pf-grid-parties-2 .pf-col-left .pf-card-440x580 .pf-card-media video,
    .pf-grid-parties-2 .pf-col-right .pf-card-500x587 .pf-card-media video,
    .pf-grid-parties-2 .pf-col-left .pf-card-440x460 .pf-card-media video { width: 100%; height: 100%; object-fit: cover; display: block; }
    .pf-grid-parties-2 .pf-card-media { background: transparent; }
    /* Chessboard: align whole cards so captions follow underneath */
    .pf-grid-parties-2 .pf-col-left  .pf-card-440x580 { justify-self: start; }
    .pf-grid-parties-2 .pf-col-right .pf-card-500x587 { justify-self: end; }
    .pf-grid-parties-2 .pf-col-left  .pf-card-440x460 { justify-self: start; }
    .pf-grid-parties-2 .pf-col-right .pf-card-500x587 { margin-top: -150px; }
    .pf-grid-parties-2 .pf-col-left .pf-card-440x460 { margin-top: -175px; }
    /* Gap from main photo (event-8) to second photo (event-7): 24px */
    .pf-grid-parties-2 .pf-col-left .pf-card-440x580 { margin-top: -114px; }

    /* Lectures mobile: 1st full width, 2+3 side by side, 4th full width */
    .pf-grid-lectures {
        grid-template-columns: calc((100% - 24px) / 2) calc((100% - 24px) / 2);
        column-gap: 24px; /* fixed gap between 2 photos */
        row-gap: 24px;
        width: 100%;
        max-width: 611px;
        margin: 0 auto;
        padding: 0 32px;
        box-sizing: border-box;
    }
    .pf-grid-lectures > .pf-card:nth-child(1) { grid-column: 1 / -1; grid-row: 1; } /* event-9 */
    .pf-grid-lectures > .pf-card:nth-child(3) { grid-column: 1; grid-row: 2; }      /* event-10 */
    .pf-grid-lectures > .pf-card:nth-child(4) { grid-column: 2; grid-row: 2; }      /* event-12 */
    .pf-grid-lectures > .pf-card:nth-child(2) { grid-column: 1 / -1; grid-row: 3; } /* event-11 */
    .pf-grid-lectures > .pf-card:nth-child(1) .pf-card-media {
        width: 100%;
        height: auto;
        aspect-ratio: 311 / 453.2160949707031;
    }
    .pf-grid-lectures > .pf-card:nth-child(3),
    .pf-grid-lectures > .pf-card:nth-child(4) { width: 100%; justify-self: stretch; }
    .pf-grid-lectures > .pf-card:nth-child(3) .pf-card-media { width: 100%; height: auto; aspect-ratio: 153.5 / 201.52760314941406; }
    .pf-grid-lectures > .pf-card:nth-child(4) .pf-card-media { width: 100%; height: auto; aspect-ratio: 133.5 / 160; margin-top: 180px; }
    .pf-grid-lectures > .pf-card:nth-child(2) .pf-card-media {
        width: 100%;
        height: auto;
        aspect-ratio: 311 / 234.42210388183594;
    }

    /* JKO stacked */
    .pf-grid-jko { grid-template-columns: 1fr; gap: 16px; padding: 0 32px; max-width: 1020px;
        margin: 14px auto 0 auto; }
    .pf-jko-left img, .pf-jko-right img { width: 100%; height: auto; aspect-ratio: 311 / 419.5; object-fit: cover; }
    .pf-grid-jko .pf-jko-photo-link { display: block; }
    .pf-grid-jko .pf-jko-right { display: none; }
    .pf-jko-cta { margin-top: 16px; padding: 0 32px; text-align: center; }
    .pf-jko-cta .pf-btn {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
        white-space: normal;
        word-break: break-word;
    }

    /* CTA video */
    .pf-cta-video { height: 100vh; }
    .pf-cta-title { font-size: 28px; line-height: 90%; }
    .pf-cta-title .pf-cta-and { font-size: 56px; }
    .pf-btn-big { padding: 24px 40px; line-height: 160%;}
    .pf-cta-inner .pf-btn-medium {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
        white-space: normal;
        word-break: break-word;
        text-align: center;
    }

    /* Card text */
    .pf-card-title { font-size: 14px; line-height: 120%; }
    .pf-card-link, .pf-card-link1 { font-size: 10px; letter-spacing: 0.24em; }

    /* End strip: native scroll only when not using oa-top-strip.js */
    .pf-end-strip:not(.oa-top-strip) { padding-left: 0; padding-right: 0; }
    .pf-end-strip:not(.oa-top-strip) .pf-end-slider { width: 100%; padding: 0; gap: 0; display: block; }
    .pf-end-strip:not(.oa-top-strip) .pf-end-viewport {
        width: 100%;
        margin: 0;
        min-height: 0;
        height: auto;
        display: block;
        overflow-x: auto;
        overflow-y: hidden;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-x: contain;
        scrollbar-width: none;
        -ms-overflow-style: none;
        /* pan-x + pan-y: горизонтальний скрол слайдера + вертикальний скрол сторінки (як на головній) */
        touch-action: pan-x pan-y;
        -webkit-user-select: none;
        user-select: none;
    }
    .pf-end-strip:not(.oa-top-strip) .pf-end-viewport::-webkit-scrollbar {
        display: none;
        width: 0;
        height: 0;
    }
    .pf-end-strip:not(.oa-top-strip) .pf-end-viewport.pf-end-viewport--drag {
        touch-action: none;
    }
    .pf-end-strip:not(.oa-top-strip) .pf-end-track {
        gap: 24px;
        transform: none !important;
        transition: none !important;
        will-change: auto;
    }
    .pf-end-strip:not(.oa-top-strip) .pf-end-slide {
        width: 250px;
        height: 373px;
        flex: 0 0 250px;
        flex-shrink: 0;
        scroll-snap-align: center;
        aspect-ratio: auto;
        opacity: 1;
        transition: none;
        position: relative;
        display: block;
        overflow: hidden;
        box-sizing: border-box;
    }
    .pf-end-strip:not(.oa-top-strip) .pf-end-slide.is-center {
        width: 250px;
        height: 373px;
        flex: 0 0 250px;
        aspect-ratio: auto;
        transform: none;
        opacity: 1;
        transition: none;
        position: relative;
        display: block;
        overflow: hidden;
        box-sizing: border-box;
    }
    .pf-end-strip:not(.oa-top-strip) .pf-end-caption-row {
        width: 100%;
        max-width: none;
        padding: 0;
        margin-top: 16px;
        margin-bottom: 0;
        justify-content: center;
        gap: 43px;
    }
    .pf-end-strip:not(.oa-top-strip) .pf-end-caption { margin-top: 0; font-size: 0; letter-spacing: 0; }

    .pf-end-strip:not(.oa-top-strip) .pf-end-slide:not(.is-center) img,
    .pf-end-strip:not(.oa-top-strip) .pf-end-slide.is-center img,
    .pf-end-strip:not(.oa-top-strip) .pf-end-slide:not(.is-center) video,
    .pf-end-strip:not(.oa-top-strip) .pf-end-slide.is-center video {
        position: absolute;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        width: 100%;
        height: 100%;
        max-width: 100%;
        max-height: 100%;
        min-width: 100%;
        min-height: 100%;
        margin: 0;
        object-fit: cover;
        object-position: center;
        display: block;
    }

    /* Prevent overflow from desktop-fixed widths */
    .pf-card,
    .pf-card-wide,
    .pf-card-tall,
    .pf-card-taller { width: 100%; max-width: 100%; }

    /* Parties-2 overrides: keep content column and widths after generic rules */
    .pf-grid-parties-2 { max-width: min(311px, 100%); margin-left: auto; margin-right: auto; padding: 0 0; }
    .pf-grid-parties-2 .pf-col-right .pf-card-500x668 { width: 100%; }
    .pf-grid-parties-2 .pf-col-left  .pf-card-440x580,
    .pf-grid-parties-2 .pf-col-right .pf-card-500x587,
    .pf-grid-parties-2 .pf-col-left  .pf-card-440x460 { width: 46.7%; max-width: none; }
    .pf-grid-parties-2 .pf-col-left  .pf-card-440x580 { justify-self: start; }
    .pf-grid-parties-2 .pf-col-right .pf-card-500x587 { justify-self: end; }
    .pf-grid-parties-2 .pf-col-left  .pf-card-440x460 { justify-self: start; }

    /* Ensure first card text uses same width as media */
    .pf-grid-parties-2 .pf-col-right .pf-card-500x668 { display: grid; justify-items: center; padding-bottom: 13px; }
    .pf-grid-parties-2 .pf-col-right .pf-card-500x668 .pf-card-title,
    .pf-grid-parties-2 .pf-col-right .pf-card-500x668 .pf-card-link { width: 100%; text-align: center; }

    /* Constrain all media inside portfolio sections */
    .pf-section img { max-width: 100%; height: auto;  }
    .pf-wedding .pf-desc {
        font-family: 'Cormorant', serif;
        font-weight: 400;
        font-style: normal;
        font-size: 20px;
        line-height: 120%;
        letter-spacing: 0;
        text-align: justify;
        max-width: 788px;
    }
    .pf-parties .pf-desc {
        font-family: 'Cormorant', serif;
        font-weight: 400;
        font-style: normal;
        font-size: 20px;
        line-height: 120%;
        letter-spacing: 0;
        text-align: justify;
    }
    /* Не застосовувати до каруселі pf-end і CTA-відео (там height: auto ламає cover) */
    .pf-section:not(.pf-end-strip):not(.pf-cta-video) video { max-width: 100%; height: auto; margin-top: -50px; }
    /* CTA video must fully cover its block on mobile (no black bars) */
    .pf-cta-video.pf-section .pf-cta-bg {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        max-width: none;
        margin: 0;
        object-fit: cover;
        object-position: center;
    }

    /* Safety: avoid horizontal scroll on small devices */
    html, body { overflow-x: hidden; }

    /* Utility: stagger only the right column in wedding grid when needed */
    .pf-wedding .pf-grid-3x2.pf-stagger-right > .pf-card:nth-child(2n) { margin-top: 64px; } /* right column */
    .pf-wedding .pf-grid-3x2.pf-stagger-right > .pf-card:nth-child(2n+1) { margin-top: 0; }  /* left column */

    /* Portfolio footer button: keep same as main (not full-width) */
    .footer .footer-btn {
        width: auto;
        align-self: center;
        display: inline-flex;
        margin-left: auto;
        margin-right: auto;
    }
    /* Equal 32px side paddings across the whole footer area */
    .footer,
    .instagram-section,
    .footer-bottom {
        padding-left: 32px;
        padding-right: 32px;
        box-sizing: border-box;
    }
    .footer-content,
    .instagram-section-content,
    .footer-bottom-content {
        width: 100%;
        margin-left: auto;
        margin-right: auto;
        box-sizing: border-box;
    }
}


/* Show "view more" links across all portfolio sections */
.pf-card-link {
    display: inline-flex;
}


@media (min-width: 720px) and (max-width: 1199px){
    .pf-end-track {
        display: flex;
        gap: 12px;
        align-items: center;
        transition: transform 1.65s cubic-bezier(0.4, 0, 0.2, 1);
        will-change: transform;
    }
    .pf-jko-birthday {
        padding: 94px 0 0px 0;
        background: #F8F3ED;
    }
}

/* ========== Portfolio end strip: tablet = горизонтальний скрол (як about .oa-top-strip-tablet) ========== */
.pf-end-strip-tablet {
    display: none;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    background: #f8f3ed;
    padding: 0 0 64px;
}

@media (min-width: 740px) and (max-width: 1200px) {
    .pf-end-strip {
        display: none !important;
    }

    .pf-end-strip-tablet {
        display: block;
    }

    .pf-end-strip-tablet .oa-photo-slider {
        width: 100%;
        max-width: 100%;
        margin: 0 0 34px;
        box-sizing: border-box;
    }

    .pf-end-strip-tablet .oa-photo-slider-viewport {
        width: 100%;
        overflow-x: auto;
        overflow-y: hidden;
        cursor: grab;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        -ms-overflow-style: none;
        overflow-anchor: none;
        touch-action: pan-x;
        overscroll-behavior-y: auto;
    }

    .pf-end-strip-tablet .oa-photo-slider-viewport::-webkit-scrollbar {
        display: none;
    }

    .pf-end-strip-tablet .oa-photo-slider-viewport.is-dragging {
        cursor: grabbing;
    }

    .pf-end-strip-tablet .oa-photo-slider-track {
        display: flex;
        gap: 8px;
        width: max-content;
        align-items: center;
        will-change: scroll-position;
        margin-top: 94px;
    }

    .pf-end-strip-tablet .oa-photo-slide {
        width: 410px;
        height: 600px;
        flex: 0 0 410px;
        opacity: 1;
    }

    .pf-end-strip-tablet .oa-photo-slide img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
        user-select: none;
        -webkit-user-drag: none;
        pointer-events: none;
    }

    .pf-end-strip-tablet .oa-photo-slider-captions {
        max-width: 1022px;
        margin: 24px auto 0;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0 4px;
    }

    .pf-end-strip-tablet .oa-photo-nav {
        display: inline-flex;
        align-items: center;
        gap: 13px;
        border: 0;
        background: transparent;
        color: #7f6c65;
        font-family: "Nunito Sans", sans-serif;
        font-size: 12px;
        font-weight: 700;
        letter-spacing: 0.24em;
        text-transform: uppercase;
        cursor: pointer;
        padding: 10px 14px;
        margin-left: -14px;
        margin-right: -14px;
        position: relative;
        -webkit-tap-highlight-color: transparent;
    }

    .pf-end-strip-tablet .oa-photo-nav img {
        width: 40px;
        height: 12px;
    }
}

/* Case pages: duplicate native pf-end block (not the shared portfolio/about bar with .oa-top-strip) */
.oa-page .pf-end-strip[data-pf-end-mobile-native="1"]:not(.oa-top-strip) {
    display: none;
}
@media (max-width: 739px) {
    .pf-end-strip-tablet {
        display: none !important;
    }
    .oa-page [data-oa-skip-mobile="1"] {
        display: none !important;
    }
    .oa-page .pf-end-strip[data-pf-end-mobile-native="1"] {
        display: block !important;
    }
}