:root {
    --white: #ffffff;
    --black: #080808;
    --black-soft: #111111;
    --royal: #0b1f3a;
    --royal-2: #17345f;
    --gold: #b88a2d;
    --gold-light: #d7b35a;
    --ink: #111111;
    --muted: #666666;
    --line: #e7e7e7;
    --line-dark: #252525;
    --max: 1320px;
}

* {
    box-sizing: border-box
}

html {
    scroll-behavior: smooth
}

body {
    margin: 0;
    background: var(--white);
    color: var(--ink);
    font-family: Inter,Arial,sans-serif;
    line-height: 1.6;
    overflow-x: hidden
}

a {
    color: inherit;
    text-decoration: none
}

img, video {
    display: block;
    max-width: 100%
}

/* =========================================================
   RG PHOTOGRAPHY — GLOBAL FONT
   ALL WEBSITE TEXT
   ========================================================= */

body,
body *,
p,
li,
span,
a,
button,
label,
input,
textarea,
select,
option,
small,
strong,
b,
blockquote,
cite,
figcaption,
h1,
h2,
h3,
h4,
h5,
h6,
h1 em,
h2 em,
h3 em,
h4 em,
h5 em,
h6 em {
    font-family: "Cormorant Garamond", Georgia, serif !important;
}

/* ---------- GLOBAL ---------- */
.site-header {
    position: fixed;
    z-index: 1000;
    top: 0;
    left: 0;
    right: 0;
    height: 84px;
    padding: 0 4vw;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: rgba(255,255,255,.68);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px) backdrop-filter:blur(12px);
    -webkit-backdrop-filter: blur(12px)backdrop-filter:blur(12px);
    -webkit-backdrop-filter: blur(12px)border-bottom:1px solid #dedede;
    box-shadow: 0 8px 28px rgba(0,0,0,.06);
    backdrop-filter: blur(14px)
}

.brand {
    display: flex;
    align-items: center;
    gap: 13px;
    min-width: 185px
}

    .brand img {
        width: 48px;
        height: 40px;
        object-fit: contain
    }

    .brand span {
        font-size: 11px;
        font-weight: 800;
        letter-spacing: 3px;
        color: var(--black)
    }

.main-nav {
    display: flex;
    align-items: center;
    gap: 24px;
    font-size: 10px;
    letter-spacing: 1.7px;
    font-weight: 800;
    color: var(--black)
}

    .main-nav a {
        opacity: .78;
        transition: .25s
    }

        .main-nav a:hover {
            color: var(--gold);
            opacity: 1
        }

.nav-instagram, .nav-book {
    padding: 13px 17px;
    border: 1px solid var(--black)
}

.nav-instagram {
    background: var(--black);
    color: #fff
}

.nav-book {
    background: #fff;
    color: var(--black)
}

    .nav-book:hover, .nav-instagram:hover {
        background: var(--gold);
        border-color: var(--gold);
        color: #fff
    }

.menu-toggle {
    display: none;
    background: none;
    border: 0;
    color: var(--black)
}

.eyebrow {
    color: var(--gold);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 3px;
    margin: 0 0 18px
}

h1, h2, h3 {
    font-family: "Cormorant Garamond",Georgia,serif;
    margin: 0;
    font-weight: 600;
    color: var(--black)
}

h1 {
    font-size: clamp(64px,8vw,118px);
    line-height: .83;
    letter-spacing: -2px
}

h2 {
    font-size: clamp(50px,6vw,82px);
    line-height: .9;
    letter-spacing: -1px
}

    h1 em, h2 em {
        color: var(--royal);
        font-style: italic
    }

.section-pad {
    padding: 110px max(6vw,24px)
}

.section-heading {
    max-width: var(--max);
    margin: 0 auto 48px;
    display: flex;
    justify-content: space-between;
    gap: 30px;
    align-items: end
}

    .section-heading > p {
        max-width: 390px;
        color: var(--muted);
        font-size: 14px;
        margin: 0
    }

.text-link {
    color: var(--black);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1.7px;
    white-space: nowrap
}

    .text-link:hover {
        color: var(--gold)
    }

/* ---------- HERO ---------- */
.hero {
    min-height: 100vh;
    position: relative;
    display: flex;
    align-items: flex-end;
    padding: 0 8vw 10vh;
    overflow: hidden;
    background: #fff
}

.hero-slider {
    position: absolute;
    inset: 0;
    z-index: 0
}

.hero-slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    visibility: hidden;
    transition: opacity 1.1s ease
}

    .hero-slide.active {
        opacity: 1;
        visibility: visible
    }

    .hero-slide img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        filter: grayscale(.15) contrast(1.03)
    }

.hero-content {
    position: relative;
    z-index: 2;
    max-width: 760px;
    text-shadow: 0 2px 18px rgba(255,255,255,.45)
}

.hero-copy {
    max-width: 570px;
    font-size: 16px;
    color: #333;
    margin: 30px 0
}

.hero-actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 50px;
    padding: 0 23px;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1.7px;
    transition: .25s
}

.btn-gold {
    color: #fff;
    background: var(--black);
    border: 1px solid var(--black);
    box-shadow: 0 10px 25px rgba(0,0,0,.13)
}

    .btn-gold:hover {
        background: var(--gold);
        border-color: var(--gold);
        transform: translateY(-2px)
    }

.btn-outline {
    border: 1px solid #1b1b1b;
    background: #fff;
    color: var(--black)
}

    .btn-outline:hover {
        border-color: var(--gold);
        color: var(--gold);
        transform: translateY(-2px)
    }

.hero-scroll {
    position: absolute;
    right: 4vw;
    bottom: 32px;
    z-index: 2;
    font-size: 9px;
    letter-spacing: 2px;
    color: var(--black);
    writing-mode: vertical-rl
}

    .hero-scroll span {
        color: var(--gold);
        font-size: 16px;
        margin-top: 8px
    }

/* =====================================================
   INTRO PARAGRAPH - FONT ONLY
   ===================================================== */

.intro-text {
    font-family: "Cormorant Garamond", Georgia, serif !important;
    font-size: 22px !important;
    font-weight: 500 !important;
    line-height: 1.45 !important;
    letter-spacing: 0 !important;
}

/* ---------- WHITE / BLACK RHYTHM ---------- */
.intro {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: end;
    border-bottom: 1px solid var(--line)
}

.intro-text {
    font-size: 18px;
    color: #555;
    max-width: 560px;
    margin: 0
}

.dark-section {
    background: var(--black);
    color: #fff
}

    .dark-section h2, .dark-section h3 {
        color: #fff
    }

    .dark-section .section-heading > p, .dark-section .service-list p {
        color: #bdbdbd
    }

    .dark-section .text-link {
        color: #fff
    }

        .dark-section .text-link:hover {
            color: var(--gold-light)
        }

/* ---------- CATEGORIES ---------- */
.category-grid {
    max-width: var(--max);
    margin: auto;
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 18px
}

.category-card {
    position: relative;
    min-height: 340px;
    overflow: hidden;
    border: 1px solid #d9d9d9;
    background: #111;
    box-shadow: 0 18px 42px rgba(0,0,0,.10)
}

.category-image {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    filter: grayscale(.55);
    transition: .6s
}

.category-card:after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(0deg,rgba(0,0,0,.88),rgba(0,0,0,.02) 68%)
}

.category-card:before {
    content: "";
    position: absolute;
    inset: 10px;
    border: 1px solid rgba(216,178,84,.45);
    z-index: 2;
    pointer-events: none
}

.category-card:hover .category-image {
    transform: scale(1.05);
    filter: grayscale(.1)
}

.category-card span, .category-card h3, .category-card small {
    position: absolute;
    z-index: 3;
    left: 24px
}

.category-card span {
    top: 20px;
    color: var(--gold-light);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.5px
}

.category-card h3 {
    bottom: 50px;
    font-size: 42px;
    color: #fff
}

.category-card small {
    bottom: 22px;
    color: #fff;
    font-size: 9px;
    letter-spacing: 2px
}

/* ---------- PORTFOLIO ---------- */
/* Home page portfolio layout:
   PRE-WEDDING | POST-WEDDING | BABY SHOOT
   PRE-WEDDING | POST-WEDDING | MATERNITY SHOOT */AS

.portfolio-grid {
    max-width: var(--max);
    margin: auto;
    display: grid;
    grid-template-columns: repeat(3,minmax(0,1fr));
    grid-template-rows: repeat(2,258px);
    gap: 14px;
    align-items: stretch;
}

.portfolio-card {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    min-height: 0;
    overflow: hidden;
    background: #111;
    text-decoration: none;
    border: 0;
}

    /* First two cards are the two tall cards on the left */
    .portfolio-card.tall {
        grid-row: 1 / span 2;
        height: 530px;
    }

    .portfolio-card > div {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        background-size: cover;
        background-position: center center;
        background-repeat: no-repeat;
        transition: transform .5s ease;
        z-index: 1;
    }

    .portfolio-card:hover > div {
        transform: scale(1.04);
    }

    .portfolio-card::after {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(to top,rgba(0,0,0,.65),rgba(0,0,0,.05) 55%,transparent);
        pointer-events: none;
        z-index: 2;
    }

    .portfolio-card span {
        position: absolute;
        left: 18px;
        bottom: 18px;
        z-index: 3;
        padding: 10px 14px;
        background: #080808;
        color: #fff;
        font-size: 11px;
        font-weight: 700;
        letter-spacing: 1.5px;
        white-space: nowrap;
    }

.card-view-more {
    position: absolute;
    right: 18px;
    bottom: 18px;
    z-index: 4;
    padding: 11px 15px;
    background: #080808;
    color: #fff;
    border: 1px solid var(--gold);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.2px;
    white-space: nowrap;
    transition: all .3s ease;
}

.portfolio-card:hover .card-view-more {
    background: var(--gold);
    color: #000;
}

/* Baby Shoot + Maternity Shoot stay together in the right column */
.portfolio-right {
    grid-column: 3;
    grid-row: 1 / span 2;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: repeat(2,minmax(0,1fr));
    gap: 14px;
    height: 530px;
    min-height: 0;
}

    .portfolio-right .portfolio-card {
        width: 100%;
        height: 100%;
        min-height: 0;
    }

/* ---------- TABLET ---------- */
@media (max-width:900px) {
    .portfolio-grid {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto;
    }

    .portfolio-card.tall {
        grid-row: auto;
        height: 450px;
    }

    .portfolio-right {
        grid-column: 1 / -1;
        grid-row: auto;
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 1fr;
        gap: 14px;
        height: 260px;
    }

        .portfolio-right .portfolio-card {
            height: 260px;
        }
}

/* ---------- MOBILE ---------- */
@media (max-width:600px) {
    .portfolio-grid {
        grid-template-columns: 1fr;
        grid-template-rows: auto;
        gap: 10px;
    }

    .portfolio-card.tall {
        grid-row: auto;
        height: 420px;
    }

    .portfolio-right {
        grid-column: auto;
        grid-row: auto;
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: auto auto;
        gap: 10px;
        height: auto;
    }

        .portfolio-right .portfolio-card {
            height: 250px;
        }
}

/* ---------- VIDEO ---------- */
.video-section {
    background: #fff
}

.video-grid {
    max-width: var(--max);
    margin: auto;
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 18px
}

.video-card {
    border: 1px solid #dedede;
    background: #fff;
    padding-bottom: 18px;
    box-shadow: 0 14px 35px rgba(0,0,0,.07)
}

    .video-card video {
        width: 100%;
        aspect-ratio: 16/9;
        object-fit: cover;
        background: #111;
        filter: grayscale(.12)
    }

    .video-card h3 {
        font-size: 27px;
        margin: 15px 18px 3px
    }

    .video-card p {
        color: var(--muted);
        font-size: 11px;
        margin: 0 18px
    }

/* ---------- SERVICES ---------- */
.service-list {
    max-width: var(--max);
    margin: auto;
    border-top: 1px solid var(--line-dark)
}

    .service-list > div {
        display: grid;
        grid-template-columns: 70px 1fr 1.3fr;
        gap: 25px;
        align-items: center;
        padding: 28px 0;
        border-bottom: 1px solid var(--line-dark)
    }

    .service-list span {
        color: var(--gold-light);
        font-size: 10px;
        font-weight: 800;
        letter-spacing: 1px
    }

    .service-list h3 {
        font-size: 34px
    }

    .service-list p {
        color: #bdbdbd;
        font-size: 14px;
        margin: 0
    }

/* ---------- ABOUT ---------- */
.about {
    max-width: var(--max);
    margin: auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 90px;
    align-items: center
}

.about-image {
    position: relative
}

    .about-image:before {
        content: "";
        position: absolute;
        inset: 18px -18px -18px 18px;
        border: 1px solid var(--gold);
        z-index: 0
    }

    .about-image img {
        position: relative;
        z-index: 1;
        width: 100%;
        aspect-ratio: 1/1;
        object-fit: cover;
        filter: grayscale(.08);
        background: #f3f3f3
    }

.about-copy p:not(.eyebrow):not(.signature) {
    color: #555;
    max-width: 580px
}

.signature {
    color: var(--gold);
    font-family: "Cormorant Garamond",serif;
    font-size: 28px;
    letter-spacing: 3px;
    margin: 30px 0 10px
}

.about-founder {
    background: #fff
}

.founder-frame {
    padding: 0 18px 18px 0
}

    .founder-frame:after {
        content: "";
        position: absolute;
        inset: 0 0 18px 18px;
        border: 1px solid var(--gold);
        pointer-events: none;
        z-index: 2
    }

    .founder-frame img {
        position: relative;
        z-index: 1;
        box-shadow: 0 25px 60px rgba(0,0,0,.14)
    }

.founder-badge {
    position: absolute;
    right: -4px;
    bottom: 0;
    z-index: 3;
    background: var(--black);
    color: #fff;
    padding: 16px 20px;
    min-width: 190px;
    box-shadow: 0 12px 30px rgba(0,0,0,.18)
}

    .founder-badge span {
        display: block;
        color: var(--gold-light);
        font-size: 8px;
        font-weight: 800;
        letter-spacing: 2px;
        margin-bottom: 4px
    }

    .founder-badge strong {
        font-family: "Cormorant Garamond",Georgia,serif;
        font-size: 25px;
        font-weight: 600
    }

.about-values {
    background: #fff;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line)
}

.about-stat-grid {
    max-width: var(--max);
    margin: auto;
    display: grid;
    grid-template-columns: repeat(4,1fr);
    border-top: 1px solid #ddd;
    border-left: 1px solid #ddd
}

.about-stat {
    padding: 28px;
    border-right: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
    background: #fff
}

    .about-stat span {
        color: var(--gold);
        font-size: 10px;
        font-weight: 800;
        letter-spacing: 2px
    }

    .about-stat h3 {
        font-size: 52px;
        margin: 18px 0 2px
    }

    .about-stat p {
        color: var(--muted);
        font-size: 12px;
        margin: 0
    }

.about-team {
    background: #fdfdfd
}

.team-grid {
    max-width: var(--max);
    margin: auto;
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 14px
}

.team-card {
    min-height: 250px;
    padding: 25px;
    background: #fff;
    border: 1px solid #ddd;
    box-shadow: 0 14px 35px rgba(0,0,0,.06);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    position: relative;
    overflow: hidden
}

    .team-card:before {
        content: "";
        position: absolute;
        width: 120px;
        height: 120px;
        border-radius: 50%;
        right: -45px;
        top: -45px;
        border: 1px solid rgba(184,138,45,.32)
    }

    .team-card span {
        color: var(--gold);
        font-size: 9px;
        font-weight: 800;
        letter-spacing: 2px
    }

    .team-card h3 {
        font-size: 31px;
        margin: 12px 0 4px
    }

    .team-card p {
        font-size: 12px;
        color: var(--muted);
        margin: 0
    }

.team-lead {
    background: var(--black)
}

    .team-lead h3 {
        color: #fff
    }

    .team-lead p {
        color: #ccc
    }

    .team-lead span {
        color: var(--gold-light)
    }

.about-cta {
    background: var(--black);
    color: #fff;
    text-align: center
}

    .about-cta h2 {
        color: #fff
    }

        .about-cta h2 em {
            color: var(--gold-light)
        }

    .about-cta .booking-inner p:not(.eyebrow) {
        color: #bdbdbd
    }

/* ---------- REVIEWS ---------- */
.review-grid {
    max-width: var(--max);
    margin: auto;
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 18px
}

blockquote {
    margin: 0;
    padding: 30px;
    border: 1px solid #dedede;
    background: #fff;
    box-shadow: 0 12px 28px rgba(0,0,0,.05)
}

.stars {
    color: var(--gold);
    letter-spacing: 3px
}

blockquote p {
    color: #555;
    min-height: 90px
}

cite {
    font-size: 10px;
    letter-spacing: 1.5px;
    color: var(--royal)
}

/* ---------- LOCATION ---------- */
.location {
    max-width: var(--max);
    margin: auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 70px;
    align-items: center
}

    .location p:not(.eyebrow) {
        color: var(--muted);
        max-width: 500px;
        margin: 22px 0 28px
    }

.location-address {
    font-size: 14px !important;
    line-height: 1.7;
    margin: 0 0 24px !important;
    color: #333 !important
}

.location-rating {
    font-size: 12px !important;
    color: var(--gold) !important;
    font-weight: 800;
    letter-spacing: 1px;
    margin: 0 0 10px !important
}

.map-frame {
    min-height: 380px;
    border: 1px solid #111;
    background: #ddd;
    overflow: hidden;
    box-shadow: 0 16px 40px rgba(0,0,0,.10)
}

    .map-frame iframe {
        width: 100%;
        height: 380px;
        border: 0;
        display: block
    }

/* ---------- BOOKING / FOOTER ---------- */
.booking {
    background: #fff;
    text-align: center;
    border-top: 1px solid #ddd
}

.booking-inner {
    max-width: 760px;
    margin: auto
}

.booking p:not(.eyebrow) {
    color: var(--muted);
    max-width: 600px;
    margin: 25px auto 30px
}

.booking .btn {
    margin: 5px
}

.footer {
    padding: 65px 6vw 35px;
    text-align: center;
    border-top: 1px solid #222;
    background: var(--black)
}

    .footer img {
        width: 145px;
        margin: 0 auto 15px;
        filter: brightness(0) invert(1)
    }

    .footer p {
        font-size: 10px;
        letter-spacing: 2px;
        color: #fff
    }

.footer-links {
    display: flex;
    justify-content: center;
    gap: 25px;
    flex-wrap: wrap;
    margin: 25px 0
}

    .footer-links a {
        font-size: 10px;
        letter-spacing: 1.5px;
        color: #ddd
    }

        .footer-links a:hover {
            color: var(--gold-light)
        }

.footer small {
    font-size: 9px;
    color: #999
}

/* ---------- INNER PAGES ---------- */
.page-hero {
    min-height: 55vh;
    display: flex;
    align-items: flex-end;
    padding: 150px 8vw 80px;
    position: relative;
    overflow: hidden;
    background: #fff;
    border-bottom: 1px solid #ddd
}

    .page-hero:before {
        content: "";
        position: absolute;
        inset: 0;
        background: radial-gradient(circle at 78% 28%,rgba(184,138,45,.12),transparent 28%),linear-gradient(135deg,#fff 0%,#fff 62%,#f7f7f7 100%)
    }

.page-hero-inner {
    position: relative;
    z-index: 1;
    max-width: 900px
}

.page-hero p {
    color: #666;
    max-width: 650px
}

.page-back {
    display: inline-block;
    margin-bottom: 25px;
    color: #666;
    font-size: 10px;
    letter-spacing: 1.8px
}

.gallery-grid {
    max-width: var(--max);
    margin: auto;
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 14px
}

.gallery-item {
    position: relative;
    overflow: hidden;
    background: #fff;
    border: 1px solid #ddd;
    box-shadow: 0 8px 24px rgba(0,0,0,.05)
}

    .gallery-item img {
        width: 100%;
        height: 360px;
        object-fit: cover;
        filter: grayscale(.2);
        transition: .5s
    }

    .gallery-item:hover img {
        transform: scale(1.04);
        filter: grayscale(0)
    }

    .gallery-item span {
        position: absolute;
        left: 18px;
        bottom: 16px;
        z-index: 2;
        font-size: 10px;
        letter-spacing: 1.8px;
        background: var(--black);
        color: #fff;
        padding: 7px 10px;
        border-left: 2px solid var(--gold)
    }

.filter-note {
    color: #888;
    font-size: 12px;
    margin: -20px auto 35px;
    max-width: var(--max)
}

/* ---------- RESPONSIVE ---------- */
@media(max-width:1050px) {
    .main-nav {
        gap: 13px
    }

    .portfolio-grid {
        grid-template-columns: repeat(2,1fr)
    }

    .portfolio-card, .portfolio-card.tall {
        height: 360px
    }

    .gallery-grid {
        grid-template-columns: repeat(2,1fr)
    }
}

@media(max-width:820px) {
    .site-header {
        height: 68px;
        padding: 0 18px
    }

    .brand img {
        width: 42px;
        height: 36px
    }

    .brand span {
        font-size: 9px;
        letter-spacing: 2px
    }

    .menu-toggle {
        display: flex;
        flex-direction: column;
        gap: 5px
    }

        .menu-toggle span {
            width: 24px;
            height: 1px;
            background: var(--black)
        }

    .main-nav {
        position: absolute;
        top: 68px;
        left: 12px;
        right: 12px;
        display: none;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        padding: 10px;
        background: rgba(255,255,255,.99);
        border: 1px solid #ddd;
        box-shadow: 0 14px 35px rgba(0,0,0,.12)
    }

        .main-nav.open {
            display: flex
        }

        .main-nav a {
            padding: 13px 15px;
            border-bottom: 1px solid #eee
        }

    .nav-instagram, .nav-book {
        margin-top: 7px;
        text-align: center
    }

    .hero {
        min-height: 92vh;
        padding: 0 22px 70px
    }

    .hero-content {
        max-width: 100%
    }

    h1 {
        font-size: clamp(54px,15vw,82px)
    }

    .hero-copy {
        font-size: 14px;
        margin: 22px 0
    }

    .hero-scroll {
        display: none
    }

    .section-pad {
        padding: 75px 18px
    }

    .intro, .about, .location {
        grid-template-columns: 1fr;
        gap: 35px
    }

    .section-heading {
        align-items: start;
        flex-direction: column;
        margin-bottom: 30px
    }

    .category-grid {
        grid-template-columns: repeat(2,1fr);
        gap: 8px
    }

    .category-card {
        min-height: 220px
    }

        .category-card h3 {
            left: 14px;
            bottom: 39px;
            font-size: 28px
        }

        .category-card span {
            left: 14px;
            top: 13px
        }

        .category-card small {
            left: 14px;
            bottom: 14px;
            font-size: 8px
        }

    .portfolio-grid {
        grid-template-columns: repeat(2,1fr);
        gap: 8px
    }

    .portfolio-card, .portfolio-card.tall {
        height: 220px
    }

        .portfolio-card span {
            left: 12px;
            bottom: 13px;
            font-size: 8px
        }

    .video-grid, .review-grid {
        grid-template-columns: 1fr
    }

    .video-card h3 {
        font-size: 25px
    }

    .service-list > div {
        grid-template-columns: 35px 1fr;
        gap: 8px
    }

    .service-list p {
        grid-column: 2
    }

    .service-list h3 {
        font-size: 27px
    }

    .map-frame {
        min-height: 270px;
        height: 270px
    }

        .map-frame iframe {
            height: 270px
        }

    .about-image:before {
        inset: 10px -10px -10px 10px
    }

    .page-hero {
        min-height: 48vh;
        padding: 120px 22px 55px
    }

    .gallery-grid {
        grid-template-columns: 1fr 1fr;
        gap: 8px
    }

    .gallery-item img {
        height: 260px
    }
}

@media(max-width:430px) {
    .category-card {
        min-height: 190px
    }

        .category-card h3 {
            font-size: 24px
        }

    .portfolio-card, .portfolio-card.tall {
        height: 190px
    }

    .hero-actions .btn {
        width: 100%
    }

    h2 {
        font-size: 49px
    }

    .gallery-grid {
        grid-template-columns: 1fr
    }

    .gallery-item img {
        height: 340px
    }

    .about-stat-grid, .team-grid {
        grid-template-columns: 1fr
    }

    .team-card {
        min-height: 210px
    }

    .founder-badge {
        position: relative;
        right: auto;
        bottom: auto;
        margin-top: -1px;
        width: calc(100% - 10px);
        margin-left: 10px
    }
}


/* ---------- BRAND BUTTONS & REAL MAP ---------- */
.nav-instagram {
    background: linear-gradient(135deg,#f58529 0%,#dd2a7b 38%,#8134af 68%,#515bd4 100%) !important;
    border-color: #d62b72 !important;
    color: #fff !important;
    box-shadow: 0 8px 22px rgba(221,42,123,.18);
}

    .nav-instagram:hover {
        filter: brightness(1.06);
        transform: translateY(-1px);
    }

.nav-book {
    background: #25D366 !important;
    border-color: #25D366 !important;
    color: #061b0d !important;
    font-weight: 900 !important;
    box-shadow: 0 8px 22px rgba(37,211,102,.18);
}

    .nav-book:hover {
        background: #1fbd5a !important;
        border-color: #1fbd5a !important;
        color: #fff !important
    }

.btn-whatsapp {
    background: #25D366 !important;
    border-color: #25D366 !important;
    color: #061b0d !important;
    box-shadow: 0 12px 28px rgba(37,211,102,.18)
}

    .btn-whatsapp:hover {
        background: #1fbd5a !important;
        border-color: #1fbd5a !important;
        color: #fff !important
    }

.btn-instagram {
    background: linear-gradient(135deg,#f58529 0%,#dd2a7b 38%,#8134af 68%,#515bd4 100%) !important;
    border-color: #d62b72 !important;
    color: #fff !important;
    box-shadow: 0 12px 28px rgba(221,42,123,.18)
}

    .btn-instagram:hover {
        filter: brightness(1.06);
        transform: translateY(-1px)
    }

.map-box {
    position: relative;
    min-height: 420px;
    border: 1px solid #151515;
    background: #111;
    overflow: hidden;
    box-shadow: 0 20px 55px rgba(0,0,0,.14)
}

    .map-box iframe {
        width: 100%;
        height: 420px;
        border: 0;
        display: block;
        filter: saturate(1.08) contrast(1.02)
    }

.map-open {
    position: absolute;
    right: 18px;
    bottom: 18px;
    background: #25D366;
    color: #07150b;
    padding: 13px 18px;
    font-size: 9px;
    font-weight: 900;
    letter-spacing: 1.6px;
    box-shadow: 0 8px 24px rgba(0,0,0,.25)
}

    .map-open:hover {
        background: #1fbd5a;
        color: #fff
    }

.footer .footer-logo {
    width: 145px;
    margin: 0 auto 15px;
    filter: brightness(0) invert(1)
}

.footer-brandline {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 14px;
    margin-bottom: 15px
}

    .footer-brandline img {
        width: 68px !important;
        margin: 0 !important
    }

    .footer-brandline strong {
        font-size: 11px;
        letter-spacing: 3px;
        color: #fff
    }

@media(max-width:820px) {
    .map-box, .map-box iframe {
        min-height: 300px;
        height: 300px
    }

    .map-open {
        right: 10px;
        bottom: 10px;
        padding: 11px 13px
    }

    .main-nav .nav-instagram, .main-nav .nav-book {
        text-align: center
    }
}

.section-more {
    display: flex;
    justify-content: center;
    margin-top: 28px
}

.btn-dark {
    background: #111;
    color: #fff;
    border: 1px solid #111
}

    .btn-dark:hover {
        background: var(--gold);
        border-color: var(--gold);
        color: #111
    }

.video-grid {
    grid-template-columns: repeat(2,1fr)
}

.video-card video {
    width: 100%;
    aspect-ratio: 16/9;
    display: block;
    background: #000;
    object-fit: cover
}

.video-card {
    border: 1px solid #ddd;
    background: #fff;
    padding: 10px
}

    .video-card h3 {
        margin: 16px 10px 5px
    }

    .video-card p {
        margin: 0 10px 14px;
        color: #777;
        font-size: 12px
    }

@media(max-width:820px) {
    .map-frame, .map-frame iframe {
        min-height: 300px;
        height: 300px
    }

    .video-grid {
        grid-template-columns: 1fr
    }
}

.card-view-more {
    position: absolute;
    z-index: 4;
    right: 18px;
    bottom: 20px;
    color: #fff;
    background: #111;
    border: 1px solid rgba(216,178,84,.65);
    padding: 8px 10px;
    font-size: 8px;
    letter-spacing: 1.5px;
    font-weight: 800
}

.category-card:hover .card-view-more, .portfolio-card:hover .card-view-more {
    background: var(--gold);
    color: #111
}

/* ---------- PORTFOLIO ---------- */
/* Portfolio cards styled like Wedding category cards */

.portfolio-grid {
    max-width: var(--max);
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(2, 340px);
    gap: 18px;
    align-items: stretch;
}

.portfolio-card,
.portfolio-card.tall {
    position: relative;
    display: block;
    width: 100%;
    height: 340px;
    min-height: 340px;
    overflow: hidden;
    background: #111;
    text-decoration: none;
    border: 1px solid #d9d9d9;
    box-shadow: 0 18px 42px rgba(0,0,0,.10);
    grid-column: auto;
    grid-row: auto;
}

    /* Portfolio image */
    .portfolio-card .portfolio-image {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center;
        display: block;
        filter: grayscale(.05);
        transition: transform .6s ease, filter .6s ease;
    }

    /* Dark gradient exactly for bottom text readability */
    .portfolio-card::after {
        content: "";
        position: absolute;
        inset: 0;
        z-index: 1;
        pointer-events: none;
        background: linear-gradient( to top, rgba(0,0,0,.72) 0%, rgba(0,0,0,.42) 22%, rgba(0,0,0,.12) 48%, rgba(0,0,0,0) 70% );
    }

    /* Hover */
    .portfolio-card:hover .portfolio-image {
        transform: scale(1.04);
        filter: grayscale(0);
    }

    /* Portfolio overlay */
    .portfolio-card .portfolio-overlay {
        position: absolute;
        inset: 0;
        z-index: 2;
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        align-items: flex-start;
        padding: 28px 30px 26px;
        color: #fff;
    }

    /* Number - top left */
    .portfolio-card .portfolio-number {
        position: absolute;
        top: 22px;
        left: 22px;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 38px;
        height: 38px;
        border: 1px solid rgba(255,255,255,.8);
        background: rgba(0,0,0,.30);
        color: #fff;
        font-size: 11px;
        font-weight: 600;
        line-height: 1;
        letter-spacing: 1.5px;
    }

    /* Title at bottom like Wedding cards */
    .portfolio-card .portfolio-title {
        position: relative;
        margin: 0;
        padding: 0;
        text-align: left;
    }

        /* Main portfolio title */
        .portfolio-card .portfolio-title h3 {
            margin: 0 0 10px;
            color: #fff;
            font-family: "Cormorant Garamond", Georgia, serif;
            font-size: clamp(34px, 4vw, 48px);
            font-weight: 400;
            line-height: .95;
            letter-spacing: -1px;
            text-transform: uppercase;
            text-shadow: 0 2px 12px rgba(0,0,0,.35);
        }

        /* VIEW STORY */
        .portfolio-card .portfolio-title::after {
            content: "VIEW STORY →";
            display: block;
            color: #fff;
            font-family: inherit;
            font-size: 10px;
            font-weight: 700;
            line-height: 1;
            letter-spacing: 1.8px;
            text-transform: uppercase;
            opacity: .95;
        }

    /* Make sure links don't inherit unwanted text */
    .portfolio-card,
    .portfolio-card:hover,
    .portfolio-card:focus {
        color: inherit;
        text-decoration: none;
    }


/* ---------- TABLET ---------- */

@media (max-width: 900px) {

    .portfolio-grid {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: repeat(2, 300px);
        gap: 14px;
    }

    .portfolio-card,
    .portfolio-card.tall {
        height: 300px;
        min-height: 300px;
    }

        .portfolio-card .portfolio-overlay {
            padding: 24px 22px 22px;
        }

        .portfolio-card .portfolio-title h3 {
            font-size: 38px;
        }

        .portfolio-card .portfolio-number {
            top: 16px;
            left: 16px;
            width: 34px;
            height: 34px;
            font-size: 10px;
        }
}


/* ---------- MOBILE ---------- */

@media (max-width: 600px) {

    .portfolio-grid {
        grid-template-columns: 1fr;
        grid-template-rows: auto;
        gap: 10px;
    }

    .portfolio-card,
    .portfolio-card.tall {
        width: 100%;
        height: 420px;
        min-height: 420px;
    }

        .portfolio-card .portfolio-overlay {
            padding: 24px 20px 22px;
        }

        .portfolio-card .portfolio-title h3 {
            font-size: 36px;
            line-height: .95;
            letter-spacing: -0.5px;
            margin-bottom: 9px;
        }

        .portfolio-card .portfolio-number {
            top: 16px;
            left: 16px;
            width: 34px;
            height: 34px;
        }

        .portfolio-card .portfolio-title::after {
            font-size: 9px;
            letter-spacing: 1.5px;
        }
}

/* =========================================================
   RG PHOTOGRAPHY — GLOBAL FONT
   ALL WEBSITE TEXT
   ========================================================= */

body,
body *,
p,
li,
span,
a,
button,
label,
input,
textarea,
select,
option,
small,
strong,
b,
blockquote,
cite,
figcaption,
h1,
h2,
h3,
h4,
h5,
h6,
h1 em,
h2 em,
h3 em,
h4 em,
h5 em,
h6 em {
    font-family: "Cormorant Garamond", Georgia, serif !important;
}

/* =========================================
   FOOTER LOGO FIX
   ========================================= */

.footer-brandline {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
}

    .footer-brandline .footer-logo {
        width: 76px;
        height: 50px;
        display: block;
        object-fit: contain;
        object-position: center;
        background: transparent;
        border: none;
        padding: 0;
        margin: 0;
        opacity: 1;
        visibility: visible;
        filter: none;
        mix-blend-mode: normal;
    }

    .footer-brandline strong {
        color: #ffffff;
        font-size: 14px;
        font-weight: 600;
        letter-spacing: 4px;
        white-space: nowrap;
    }
/* =========================================
   WEDDING CARDS — ALWAYS BRIGHT
   ========================================= */

.category-card::before,
.category-card::after {
    opacity: 0 !important;
    background: transparent !important;
}

.category-card::after,
.category-card::before {
    opacity: 0 !important;
    background: transparent !important;
}

.category-card img {
    filter: none !important;
    opacity: 1 !important;
    transition: transform 0.4s ease !important;
}

/* Keep image bright even on hover */
.category-card:hover img {
    filter: none !important;
    opacity: 1 !important;
}

/* Keep text clearly visible */
.category-card h3,
.category-card .card-title,
.category-card .category-title {
    opacity: 1 !important;
}

/* Optional premium hover: only slight zoom, no darkening */
.category-card:hover img {
    transform: scale(1.03);
}

.category-card {
    background: #fff !important;
}

    .category-card .category-overlay {
        background: transparent !important;
        opacity: 1 !important;
    }

    .category-card:hover .category-overlay {
        background: transparent !important;
        .category-card::before, .category-card:hover::before

{
    background: transparent !important;
    opacity: 0 !important;
}

.category-card img {
    filter: brightness(1) contrast(1) !important;
}

opacity: 1 !important;
}
/* =========================================
   PERMANENTLY BRIGHT WEDDING CATEGORY CARDS
   ========================================= */

/* Remove dark overlay in normal state */
.category-card::after,
.category-card::before,
.category-card .category-overlay {
    opacity: 0 !important;
    background: transparent !important;
    filter: none !important;
}

/* Keep all images bright normally */
.category-card img {
    filter: none !important;
    opacity: 1 !important;
    visibility: visible !important;
}

/* Keep images bright when hovering */
.category-card:hover img {
    filter: none !important;
    opacity: 1 !important;
}

/* Prevent hover from adding darkness */
.category-card:hover::after,
.category-card:hover::before,
.category-card:hover .category-overlay {
    opacity: 0 !important;
    background: transparent !important;
}

/* Only keep a subtle premium zoom */
.category-card:hover img {
    transform: scale(1.03) !important;
}

/* Keep card itself clean */
.category-card {
    background: #fff !important;
}
    /* FORCE WEDDING IMAGES TO STAY BRIGHT */
    .category-card,
    .category-card > *,
    .category-card img {
        filter: none !important;
    }

        .category-card img {
            opacity: 1 !important;
            filter: brightness(1) contrast(1) saturate(1) !important;
        }

        /* Disable every dark overlay */
        .category-card::before,
        .category-card::after,
        .category-card .category-overlay,
        .category-card .overlay {
            display: none !important;
            opacity: 0 !important;
            visibility: hidden !important;
            background: transparent !important;
        }

        /* Keep text/buttons visible */
        .category-card h3,
        .category-card .card-title,
        .category-card .category-title,
        .category-card .category-overlay,
        .category-card a {
            opacity: 1 !important;
        }

        /* Premium hover only */
        .category-card:hover img {
            transform: scale(1.03) !important;
            filter: brightness(1) contrast(1) saturate(1) !important;
        }
        /* =========================================================
   PORTFOLIO / CATEGORY CARDS
   KEEP IMAGES BRIGHT AT ALL TIMES
   ========================================================= */

        /* Remove dark overlay from portfolio cards */
        .category-card::after,
        .category-card .category-overlay,
        .category-card:hover::after,
        .category-card:hover .category-overlay {
            background: transparent !important;
            opacity: 0 !important;
            visibility: hidden !important;
            pointer-events: none !important;
        }

        /* Keep portfolio images bright */
        .category-card img,
        .category-card:hover img {
            filter: none !important;
            opacity: 1 !important;
            visibility: visible !important;
            transition: transform 0.4s ease !important;
        }

        /* Very slight premium movement only */
        .category-card:hover img {
            transform: scale(1.02) !important;
        }

/* Keep card itself clean */
.category-card {
    background: #fff !important;
    overflow: hidden !important;
}

    /* Keep portfolio text visible */
    .category-card h3,
    .category-card .card-title,
    .category-card .category-title,
    .category-card .category-overlay,
    .category-card .category-content {
        opacity: 1 !important;
        visibility: visible !important;
    }

    /* Keep bottom text/button readable without dark overlay */
    .category-card h3,
    .category-card .card-title,
    .category-card .category-title {
        text-shadow: 0 2px 8px rgba(0,0,0,0.45) !important;
    }

    /* Make portfolio buttons remain premium */
    .category-card a,
    .category-card button {
        position: relative;
        z-index: 5;
    }
    /* =========================================================
   PORTFOLIO CARDS - ALWAYS BRIGHT
   ========================================================= */
    /* Remove dark overlay completely */
    .category-card::before, .category-card::after, .category-card:hover::before, .category-card:hover::after {
        background: transparent !important;
        opacity: 0 !important;
        visibility: hidden !important;
    }

    /* Remove portfolio overlay darkness */
    .category-card .category-overlay,
    .category-card:hover .category-overlay {
        background: transparent !important;
        opacity: 1 !important;
        visibility: visible !important;
    }

    /* Keep images bright */
    .category-card img,
    .category-card:hover img {
        filter: none !important;
        opacity: 1 !important;
        visibility: visible !important;
    }

    /* Small premium zoom only */
    .category-card:hover img {
        transform: scale(1.02) !important;
    }

/* Keep card clean */
.category-card {
    background: #fff !important;
    overflow: hidden !important;
}

    /* Keep portfolio text visible */
    .category-card h3,
    .category-card .card-title,
    .category-card .category-title {
        opacity: 1 !important;
        visibility: visible !important;
        text-shadow: 0 2px 8px rgba(0, 0, 0, 0.45) !important;
    }

    /* Keep buttons above the image */
    .category-card a,
    .category-card button {
        position: relative;
        z-index: 10;
    }
/* =========================================================
   PORTFOLIO PAGE - REMOVE WHITE SPACING
   ========================================================= */

.gallery-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    align-items: stretch;
}

.gallery-item {
    position: relative;
    display: block;
    width: 100%;
    height: 480px;
    overflow: hidden;
    background: #111;
    border: 1px solid #ddd;
}

    .gallery-item img {
        display: block;
        width: 100%;
        height: 100%;
        max-width: none;
        object-fit: cover;
        object-position: center;
    }

    /* Category name */
    .gallery-item > span {
        position: absolute;
        left: 20px;
        bottom: 20px;
        z-index: 5;
        padding: 12px 16px;
        background: #080808;
        color: #fff;
        font-family: Inter, Arial, sans-serif;
        font-size: 12px;
        font-weight: 700;
        letter-spacing: 2px;
    }

    /* VIEW MORE button */
    .gallery-item::after {
        content: "VIEW MORE →";
        position: absolute;
        right: 12px;
        bottom: 20px;
        z-index: 5;
        padding: 14px 22px;
        background: #080808;
        color: #fff;
        border: 1px solid #c9a227;
        font-family: Inter, Arial, sans-serif;
        font-size: 12px;
        font-weight: 700;
        letter-spacing: 1.5px;
        transition: all 0.3s ease;
    }

    .gallery-item:hover::after {
        background: #c9a227;
        color: #000;
    }

    /* Image hover */
    .gallery-item img {
        transition: transform 0.5s ease;
    }

    .gallery-item:hover img {
        transform: scale(1.03);
    }


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 900px) {

    .gallery-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .gallery-item {
        height: 420px;
    }
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 600px) {

    .gallery-grid {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .gallery-item {
        height: 420px;
    }

        .gallery-item > span {
            left: 12px;
            bottom: 12px;
            padding: 10px 13px;
            font-size: 10px;
        }

        .gallery-item::after {
            right: 12px;
            bottom: 12px;
            padding: 11px 15px;
            font-size: 10px;
        }
}
/* =========================================================
   PORTFOLIO - FIX WHITE SPACE BELOW IMAGES
   ========================================================= */

.gallery-grid .gallery-item {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    height: 480px !important;
    min-height: 480px !important;
    padding: 0 !important;
    overflow: hidden !important;
    background: #111 !important;
}

    /* Force every portfolio image to fill the complete card */
    .gallery-grid .gallery-item img {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100% !important;
        max-width: none !important;
        max-height: none !important;
        display: block !important;
        object-fit: cover !important;
        object-position: center center !important;
        margin: 0 !important;
        padding: 0 !important;
        z-index: 1 !important;
    }

    /* Portfolio category name */
    .gallery-grid .gallery-item > span {
        position: absolute !important;
        left: 20px !important;
        bottom: 18px !important;
        z-index: 10 !important;
        background: #080808 !important;
        color: #ffffff !important;
        padding: 12px 16px !important;
        font-size: 12px !important;
        font-weight: 700 !important;
        letter-spacing: 2px !important;
    }

    /* VIEW MORE button */
    .gallery-grid .gallery-item::after {
        content: "VIEW MORE →";
        position: absolute !important;
        right: 20px !important;
        bottom: 18px !important;
        z-index: 10 !important;
        background: #080808 !important;
        color: #ffffff !important;
        border: 1px solid #c9a227 !important;
        padding: 13px 20px !important;
        font-size: 12px !important;
        font-weight: 700 !important;
        letter-spacing: 1.5px !important;
        transition: all 0.3s ease !important;
    }

    .gallery-grid .gallery-item:hover::after {
        background: #c9a227 !important;
        color: #000000 !important;
    }

    /* Image hover */
    .gallery-grid .gallery-item img {
        transition: transform 0.5s ease !important;
    }

    .gallery-grid .gallery-item:hover img {
        transform: scale(1.03) !important;
    }


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 900px) {

    .gallery-grid .gallery-item {
        height: 420px !important;
        min-height: 420px !important;
    }
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 600px) {

    .gallery-grid {
        grid-template-columns: 1fr !important;
    }

        .gallery-grid .gallery-item {
            height: 420px !important;
            min-height: 420px !important;
        }
}
/* =========================================================
   PORTFOLIO HOME PAGE - FINAL LAYOUT FIX
   PRE-WEDDING | POST-WEDDING | BABY | MATERNITY
   ========================================================= */

/* Main portfolio layout */
.portfolio-grid {
    width: 100%;
    max-width: var(--max);
    margin: 0 auto;
    display: grid;
    /* 3 equal columns */
    grid-template-columns: repeat(3, 1fr);
    /* 2 equal rows */
    grid-template-rows: repeat(2, 260px);
    gap: 14px;
    align-items: stretch;
}


/* =========================================================
   ALL PORTFOLIO CARDS
   ========================================================= */

.portfolio-card {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    min-height: 0;
    overflow: hidden;
    background: #111;
    border: 1px solid #ddd;
    text-decoration: none;
    box-sizing: border-box;
}


    /* =========================================================
   PRE-WEDDING + POST-WEDDING
   These cards occupy BOTH rows
   ========================================================= */

    .portfolio-card.tall {
        grid-row: span 2;
        height: auto;
        min-height: 0;
    }


    /* =========================================================
   IMAGE INSIDE EVERY PORTFOLIO CARD
   IMPORTANT FIX FOR WHITE SPACE
   ========================================================= */

    .portfolio-card > div {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-size: cover;
        background-position: center center;
        background-repeat: no-repeat;
        z-index: 1;
        transition: transform 0.5s ease;
    }


    /* Slight zoom on hover */
    .portfolio-card:hover > div {
        transform: scale(1.04);
    }


/* =========================================================
   RIGHT SIDE
   BABY SHOOT
   MATERNITY SHOOT
   ========================================================= */

.portfolio-right {
    grid-column: 3;
    grid-row: 1 / span 2;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: repeat(2, 1fr);
    gap: 14px;
    min-width: 0;
    min-height: 0;
}


    /* Baby + maternity cards inside right side */
    .portfolio-right .portfolio-card {
        width: 100%;
        height: auto;
        min-height: 0;
    }


        /* Make sure their images completely fill */
        .portfolio-right .portfolio-card > div {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            background-size: cover;
            background-position: center center;
            background-repeat: no-repeat;
        }


/* =========================================================
   DARK IMAGE OVERLAY
   Keeps the existing professional look
   ========================================================= */

.portfolio-card::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient( to top, rgba(0, 0, 0, 0.65) 0%, rgba(0, 0, 0, 0.15) 45%, rgba(0, 0, 0, 0) 70% );
    z-index: 2;
    pointer-events: none;
}


/* =========================================================
   CARD TITLE
   ========================================================= */

.portfolio-card > span {
    position: absolute;
    left: 18px;
    bottom: 18px;
    z-index: 4;
    display: inline-block;
    padding: 9px 12px;
    background: #000;
    color: #fff;
    font-family: "Inter", sans-serif;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.5px;
    line-height: 1;
    white-space: nowrap;
}


/* =========================================================
   VIEW MORE BUTTON
   ========================================================= */

.portfolio-card .card-view-more {
    position: absolute;
    right: 18px;
    bottom: 18px;
    z-index: 4;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    padding: 0 18px;
    background: #000;
    color: #fff;
    border: 1px solid #000;
    font-family: "Inter", sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1px;
    white-space: nowrap;
    transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}


/* Hover button */
.portfolio-card:hover .card-view-more {
    background: #fff;
    color: #000;
    border-color: #fff;
}


/* =========================================================
   DESKTOP / LARGE SCREEN
   ========================================================= */

@media (min-width: 1001px) {

    .portfolio-grid {
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: repeat(2, 260px);
        gap: 14px;
    }

    .portfolio-card.tall {
        grid-row: span 2;
    }

    .portfolio-right {
        grid-column: 3;
        grid-row: 1 / span 2;
        grid-template-rows: repeat(2, 1fr);
        gap: 14px;
    }
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1000px) and (min-width: 601px) {

    .portfolio-grid {
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: auto;
        gap: 14px;
    }

    .portfolio-card.tall {
        grid-row: auto;
        height: 350px;
    }

    .portfolio-right {
        grid-column: 1 / -1;
        grid-row: auto;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: 260px;
        gap: 14px;
    }

        .portfolio-right .portfolio-card {
            height: 260px;
        }
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 600px) {

    .portfolio-grid {
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: auto;
        gap: 10px;
    }

    .portfolio-card,
    .portfolio-card.tall {
        width: 100%;
        height: 300px;
        min-height: 300px;
        grid-row: auto;
    }

    .portfolio-right {
        grid-column: auto;
        grid-row: auto;
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: repeat(2, 300px);
        gap: 10px;
    }

        .portfolio-right .portfolio-card {
            height: 300px;
            min-height: 300px;
        }

    .portfolio-card > span {
        left: 12px;
        bottom: 12px;
        font-size: 9px;
        padding: 8px 10px;
    }

    .portfolio-card .card-view-more {
        right: 12px;
        bottom: 12px;
        min-height: 38px;
        padding: 0 12px;
        font-size: 9px;
    }
}
/* =========================================================
   MOBILE FRIENDLY RESPONSIVE DESIGN
   RG PHOTOGRAPHY
   ========================================================= */


/* =========================================================
   TABLET / SMALL LAPTOP
   ========================================================= */

@media (max-width: 900px) {

    /* ---------- HEADER ---------- */

    .site-header {
        padding: 14px 24px;
        min-height: 70px;
    }

    .brand {
        min-width: auto;
        gap: 10px;
    }

        .brand img {
            width: 42px;
            height: 36px;
            object-fit: contain;
        }

        .brand span {
            font-size: 10px;
            letter-spacing: 2px;
        }

    .main-nav {
        gap: 16px;
    }

        .main-nav a {
            font-size: 10px;
            letter-spacing: 1.2px;
        }

    .nav-instagram,
    .nav-book {
        padding: 11px 14px !important;
    }


    /* ---------- HERO ---------- */

    .hero {
        min-height: 80vh;
        padding: 100px 6vw 70px;
    }

    .hero-content {
        max-width: 650px;
    }

    .hero-copy {
        font-size: 15px;
    }


    /* ---------- SECTION ---------- */

    .section-pad {
        padding: 80px 5vw;
    }

    .section-heading {
        gap: 25px;
        margin-bottom: 40px;
    }


    /* ---------- CATEGORY GRID ---------- */

    .category-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 14px;
    }


    /* ---------- PORTFOLIO ---------- */

    .gallery-grid,
    .portfolio-grid {
        width: 100%;
        max-width: 100%;
    }


    /* ---------- VIDEO ---------- */

    .video-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 14px;
    }


    /* ---------- SERVICES ---------- */

    .service-list > div {
        grid-template-columns: 55px 1fr;
        gap: 18px;
    }


    /* ---------- ABOUT ---------- */

    .about {
        grid-template-columns: 1fr;
        gap: 45px;
    }

    .about-image {
        max-width: 650px;
        margin: auto;
    }


    /* ---------- REVIEWS ---------- */

    .review-grid {
        grid-template-columns: repeat(2, 1fr);
    }


    /* ---------- LOCATION ---------- */

    .location {
        grid-template-columns: 1fr;
        gap: 40px;
    }
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 700px) {

    /* Prevent horizontal scrolling */

    html,
    body {
        width: 100%;
        max-width: 100%;
        overflow-x: hidden;
    }


    /* =====================================================
       HEADER
       ===================================================== */

    .site-header {
        position: relative;
        width: 100%;
        min-height: 68px;
        padding: 12px 16px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        box-sizing: border-box;
    }


    /* LOGO */

    .brand {
        display: flex;
        align-items: center;
        gap: 8px;
        min-width: 0;
    }

        .brand img {
            width: 40px;
            height: 34px;
            object-fit: contain;
            flex-shrink: 0;
        }

        .brand span {
            font-size: 9px;
            letter-spacing: 1.8px;
            white-space: nowrap;
        }


    /* HAMBURGER */

    .menu-toggle {
        display: flex !important;
        width: 42px;
        height: 42px;
        padding: 0;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        gap: 5px;
        background: transparent;
        border: 0;
        cursor: pointer;
        flex-shrink: 0;
    }

        .menu-toggle span {
            display: block;
            width: 23px;
            height: 2px;
            background: var(--black, #111);
            transition: transform .3s ease, opacity .3s ease;
        }


    /* MOBILE NAVIGATION */

    .main-nav {
        position: absolute;
        top: 68px;
        left: 0;
        right: 0;
        width: 100%;
        display: none;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        padding: 10px 16px 18px;
        background: #fff;
        border-top: 1px solid #eee;
        border-bottom: 1px solid #ddd;
        box-shadow: 0 10px 25px rgba(0,0,0,.08);
        z-index: 9999;
        box-sizing: border-box;
    }


        /* script.js commonly adds this class */

        .main-nav.open {
            display: flex;
        }

        .main-nav.active {
            display: flex;
        }


        .main-nav a {
            width: 100%;
            min-height: 46px;
            display: flex;
            align-items: center;
            padding: 12px 8px;
            box-sizing: border-box;
            font-size: 10px;
            letter-spacing: 1.5px;
            border-bottom: 1px solid #eee;
        }

            .main-nav a:last-child {
                border-bottom: 0;
            }


    .nav-instagram,
    .nav-book {
        margin-top: 8px;
        justify-content: center;
        min-height: 44px;
        padding: 12px 16px !important;
    }


    /* =====================================================
       HERO
       ===================================================== */

    .hero {
        min-height: 75vh;
        padding: 80px 20px 60px;
        box-sizing: border-box;
    }

    .hero-content {
        width: 100%;
        max-width: 100%;
    }

    .hero-copy {
        max-width: 100%;
        font-size: 14px;
        line-height: 1.7;
    }

    .hero-actions {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
    }

        .hero-actions a {
            max-width: 100%;
        }

    .hero-scroll {
        display: none;
    }


    /* =====================================================
       PAGE HERO
       ===================================================== */

    .page-hero {
        min-height: auto;
    }

    .page-hero-inner {
        width: 100%;
        padding: 70px 20px 55px;
        box-sizing: border-box;
    }

    .page-hero h1 {
        font-size: clamp(42px, 12vw, 70px);
        line-height: .95;
    }

    .page-hero p {
        max-width: 100%;
        font-size: 14px;
        line-height: 1.7;
    }

    .page-back {
        font-size: 9px;
        letter-spacing: 1.5px;
    }


    /* =====================================================
       SECTIONS
       ===================================================== */

    .section-pad {
        padding: 65px 18px;
        box-sizing: border-box;
    }

    .section-heading {
        width: 100%;
        margin-bottom: 32px;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

        .section-heading h2 {
            font-size: clamp(32px, 9vw, 50px);
            line-height: 1;
        }

        .section-heading p {
            max-width: 100%;
            font-size: 13px;
            line-height: 1.7;
        }

    .text-link {
        font-size: 9px;
        letter-spacing: 1.5px;
    }


    /* =====================================================
       CATEGORY CARDS
       ===================================================== */

    .category-grid {
        width: 100%;
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .category-card {
        min-height: 320px;
    }


    /* =====================================================
       PORTFOLIO GRID
       ===================================================== */

    .gallery-grid {
        width: 100%;
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: none;
        gap: 12px;
    }


    /* IMPORTANT:
       Reset desktop grid positions on mobile */

    .gallery-item:nth-child(1),
    .gallery-item:nth-child(2),
    .gallery-item:nth-child(3),
    .gallery-item:nth-child(4) {
        grid-column: auto;
        grid-row: auto;
        width: 100%;
        height: 340px;
        min-height: 340px;
    }


    .gallery-item img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }


    /* Portfolio labels */

    .gallery-item > span {
        left: 12px;
        bottom: 12px;
        padding: 9px 11px;
        font-size: 9px;
        letter-spacing: 1.2px;
    }


    /* View more */

    .gallery-item .card-view-more {
        right: 12px;
        bottom: 12px;
        padding: 9px 12px;
        font-size: 9px;
        letter-spacing: 1px;
    }


    /* =====================================================
       PORTFOLIO-GRID
       If used anywhere else
       ===================================================== */

    .portfolio-grid {
        width: 100%;
        grid-template-columns: 1fr !important;
        gap: 12px;
    }

    .portfolio-card {
        width: 100%;
        min-height: 320px;
    }

        .portfolio-card.tall {
            height: 340px;
        }

    .portfolio-right {
        grid-column: auto !important;
        display: flex;
        flex-direction: column;
        gap: 12px;
    }

        .portfolio-right .portfolio-card {
            height: 300px;
        }


    /* =====================================================
       VIDEO
       ===================================================== */

    .video-grid {
        width: 100%;
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .video-card {
        width: 100%;
    }


    /* =====================================================
       SERVICES
       ===================================================== */

    .service-list {
        width: 100%;
    }

        .service-list > div {
            grid-template-columns: 1fr;
            gap: 8px;
            padding: 20px 0;
        }

            .service-list > div > * {
                min-width: 0;
            }


    /* =====================================================
       ABOUT
       ===================================================== */

    .about {
        width: 100%;
        grid-template-columns: 1fr;
        gap: 35px;
    }

    .about-image {
        width: 100%;
    }

        .about-image img {
            width: 100%;
            height: auto;
        }

    .about-text {
        width: 100%;
    }

        .about-text p {
            font-size: 14px;
            line-height: 1.8;
        }


    /* =====================================================
       ABOUT VALUES
       ===================================================== */

    .about-values {
        width: 100%;
        grid-template-columns: 1fr;
        gap: 0;
    }

    .about-stat-grid {
        grid-template-columns: 1fr 1fr;
        gap: 1px;
    }

    .about-team {
        grid-template-columns: 1fr;
    }


    /* =====================================================
       REVIEWS
       ===================================================== */

    .review-grid {
        width: 100%;
        grid-template-columns: 1fr;
        gap: 12px;
    }

        .review-grid blockquote {
            padding: 24px 20px;
        }


    /* =====================================================
       LOCATION
       ===================================================== */

    .location {
        width: 100%;
        grid-template-columns: 1fr;
        gap: 30px;
    }

        .location iframe {
            width: 100%;
            max-width: 100%;
        }


    /* =====================================================
       BOOKING / CTA
       ===================================================== */

    .about-cta {
        padding: 55px 20px;
    }

        .about-cta h2 {
            font-size: clamp(34px, 9vw, 52px);
        }

    .booking-inner {
        width: 100%;
    }


        /* =====================================================
       BUTTONS
       ===================================================== */

        .btn,
        .button,
        .hero-actions a,
        .booking-inner a {
            max-width: 100%;
            box-sizing: border-box;
        }


    /* =====================================================
       FOOTER
       ===================================================== */

    .footer {
        padding: 45px 20px 30px;
        text-align: center;
    }

    .footer-brandline {
        justify-content: center;
        flex-wrap: wrap;
    }

    .footer-links {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 12px 18px;
        margin-top: 25px;
    }

        .footer-links a {
            font-size: 9px;
            letter-spacing: 1.2px;
        }


    /* =====================================================
       IMAGES / VIDEOS
       ===================================================== */

    img,
    video,
    iframe {
        max-width: 100%;
    }


    /* =====================================================
       TABLES / LONG CONTENT
       ===================================================== */

    table {
        display: block;
        max-width: 100%;
        overflow-x: auto;
    }
}


/* =========================================================
   VERY SMALL PHONES
   ========================================================= */

@media (max-width: 400px) {

    .site-header {
        padding-left: 12px;
        padding-right: 12px;
    }

    .brand img {
        width: 36px;
        height: 32px;
    }

    .brand span {
        font-size: 8px;
        letter-spacing: 1.5px;
    }

    .hero {
        padding-left: 16px;
        padding-right: 16px;
    }

    .section-pad {
        padding-left: 14px;
        padding-right: 14px;
    }

    .gallery-grid {
        gap: 10px;
    }

    .gallery-item:nth-child(1),
    .gallery-item:nth-child(2),
    .gallery-item:nth-child(3),
    .gallery-item:nth-child(4) {
        height: 300px;
        min-height: 300px;
    }

    .gallery-item > span {
        left: 9px;
        bottom: 9px;
        padding: 8px 9px;
        font-size: 8px;
    }

    .gallery-item .card-view-more {
        right: 9px;
        bottom: 9px;
        padding: 8px 9px;
        font-size: 8px;
    }

    .page-hero-inner {
        padding-left: 16px;
        padding-right: 16px;
    }

    .footer {
        padding-left: 14px;
        padding-right: 14px;
    }
}
/* =========================================================
   MOBILE FRIENDLY FINAL OVERRIDES
   Desktop design remains unchanged
   ========================================================= */

@media (max-width: 600px) {

    /* -----------------------------------------------------
       GLOBAL MOBILE
       ----------------------------------------------------- */

    html,
    body {
        width: 100%;
        max-width: 100%;
        overflow-x: hidden;
    }

    body {
        font-size: 14px;
    }

    img,
    video {
        max-width: 100%;
    }


    /* -----------------------------------------------------
       HEADER
       ----------------------------------------------------- */

    .site-header {
        width: 100%;
        min-height: 72px;
        padding: 0 18px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        box-sizing: border-box;
    }

    .brand {
        min-width: 0;
        gap: 9px;
    }

        .brand img {
            width: 42px;
            height: 36px;
            object-fit: contain;
        }

        .brand span {
            font-size: 10px;
            letter-spacing: 2px;
            white-space: nowrap;
        }


    /* -----------------------------------------------------
       MOBILE MENU ICON
       ----------------------------------------------------- */

    .menu-toggle {
        display: flex !important;
        width: 42px;
        height: 42px;
        padding: 0;
        margin: 0;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        gap: 5px;
        background: transparent;
        border: 0;
        cursor: pointer;
        flex-shrink: 0;
    }

        .menu-toggle span,
        .menu-toggle::before,
        .menu-toggle::after {
            content: "";
            display: block;
            width: 25px;
            height: 2px;
            background: var(--black, #111);
            transition: all 0.25s ease;
        }

        /* If your HTML already has 3 spans,
       this keeps them small */
        .menu-toggle span {
            width: 25px;
            height: 2px;
        }


    /* -----------------------------------------------------
       MOBILE NAVIGATION
       ----------------------------------------------------- */

    .main-nav {
        display: none;
    }

        .main-nav.active {
            display: flex;
            position: absolute;
            top: 72px;
            left: 0;
            right: 0;
            width: 100%;
            padding: 18px 20px 22px;
            background: rgba(255,255,255,0.98);
            box-sizing: border-box;
            flex-direction: column;
            align-items: stretch;
            gap: 0;
            z-index: 9999;
            box-shadow: 0 8px 25px rgba(0,0,0,0.10);
        }

            .main-nav.active a {
                display: block;
                width: 100%;
                padding: 13px 5px;
                font-size: 11px;
                letter-spacing: 2px;
                text-align: center;
                box-sizing: border-box;
            }

            .main-nav.active .instagram,
            .main-nav.active .book-now {
                margin-top: 8px;
                padding: 12px 16px;
            }


    /* -----------------------------------------------------
       HERO
       ----------------------------------------------------- */

    .hero {
        min-height: calc(100svh - 72px);
        height: auto;
        padding: 70px 24px 55px;
        box-sizing: border-box;
    }

    .hero-content {
        width: 100%;
        max-width: 100%;
    }

    .hero-copy {
        max-width: 100%;
        margin: 18px 0;
        font-size: 14px;
        line-height: 1.6;
    }

    .hero h1 {
        font-size: clamp(38px, 11vw, 58px);
        line-height: 0.98;
        margin-bottom: 18px;
    }

    .hero-actions {
        width: 100%;
        max-width: 100%;
        display: flex;
        flex-direction: column;
        gap: 10px;
    }

        /* SMALL MOBILE HERO BUTTONS */
        .hero-actions a,
        .hero-actions button {
            width: 100%;
            max-width: 100%;
            min-height: 48px;
            padding: 13px 18px;
            font-size: 10px;
            letter-spacing: 1.7px;
            box-sizing: border-box;
            text-align: center;
        }


    /* -----------------------------------------------------
       SECTION SPACING
       ----------------------------------------------------- */

    .section-pad {
        padding: 70px 18px;
    }

    .section-heading {
        width: 100%;
        margin-bottom: 30px;
        gap: 15px;
        flex-direction: column;
        align-items: flex-start;
    }

        .section-heading h2 {
            font-size: 32px;
            line-height: 1.05;
        }

        .section-heading p {
            max-width: 100%;
            font-size: 13px;
            line-height: 1.6;
        }


    /* -----------------------------------------------------
       CATEGORIES
       ----------------------------------------------------- */

    .category-grid {
        width: 100%;
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .category-card {
        min-height: 280px;
    }


    /* -----------------------------------------------------
       PORTFOLIO
       ----------------------------------------------------- */

    .portfolio-grid {
        width: 100%;
        max-width: 100%;
        display: grid;
        grid-template-columns: 1fr;
        gap: 12px;
        align-items: stretch;
    }

    .portfolio-card {
        width: 100%;
        height: 300px;
        min-height: 300px;
        box-sizing: border-box;
    }

        .portfolio-card.tall {
            height: 360px;
            min-height: 360px;
        }

    .portfolio-right {
        width: 100%;
        display: flex;
        flex-direction: column;
        gap: 12px;
    }

        .portfolio-right .portfolio-card {
            height: 300px;
            min-height: 300px;
        }


    /* -----------------------------------------------------
       PORTFOLIO TEXT
       ----------------------------------------------------- */

    .portfolio-card span {
        font-size: 10px;
        letter-spacing: 1.5px;
        padding: 9px 12px;
        bottom: 16px;
        left: 14px;
    }


    /* -----------------------------------------------------
       PORTFOLIO VIEW MORE BUTTON
       SMALLER ON MOBILE
       ----------------------------------------------------- */

    .portfolio-card .card-view-more {
        right: 14px;
        bottom: 16px;
        min-width: auto;
        width: auto;
        padding: 10px 13px;
        font-size: 9px;
        line-height: 1;
        letter-spacing: 1.2px;
        white-space: nowrap;
        box-sizing: border-box;
    }


    /* -----------------------------------------------------
       VIDEO SECTION
       ----------------------------------------------------- */

    .video-grid {
        width: 100%;
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .video-card {
        width: 100%;
    }


    /* -----------------------------------------------------
       SERVICES
       ----------------------------------------------------- */

    .service-list {
        width: 100%;
    }

        .service-list > div {
            grid-template-columns: 45px 1fr;
            gap: 15px;
            padding: 18px 0;
        }


    /* -----------------------------------------------------
       ABOUT
       ----------------------------------------------------- */

    .about {
        width: 100%;
        grid-template-columns: 1fr;
        gap: 35px;
    }

    .about-image {
        width: 100%;
    }

        .about-image img {
            width: 100%;
            height: auto;
        }


    /* -----------------------------------------------------
       REVIEWS
       ----------------------------------------------------- */

    .review-grid {
        width: 100%;
        grid-template-columns: 1fr;
        gap: 12px;
    }

        .review-grid blockquote {
            padding: 22px 18px;
        }


    /* -----------------------------------------------------
       LOCATION
       ----------------------------------------------------- */

    .location {
        width: 100%;
        grid-template-columns: 1fr;
        gap: 30px;
    }


    /* -----------------------------------------------------
       GENERAL LINKS / BUTTONS
       ----------------------------------------------------- */

    .text-link {
        font-size: 10px;
        letter-spacing: 1.5px;
    }

    .btn,
    .button,
    .cta,
    .book-now,
    .instagram {
        min-height: 44px;
        padding: 11px 16px;
        font-size: 9px;
        letter-spacing: 1.5px;
        box-sizing: border-box;
    }


    /* -----------------------------------------------------
       FOOTER
       ----------------------------------------------------- */

    .footer {
        padding: 50px 18px 30px;
    }
}


/* =========================================================
   EXTRA SMALL PHONES
   360px AND BELOW
   ========================================================= */

@media (max-width: 380px) {

    .site-header {
        min-height: 66px;
        padding: 0 14px;
    }

    .brand img {
        width: 38px;
        height: 33px;
    }

    .brand span {
        font-size: 9px;
        letter-spacing: 1.6px;
    }

    .menu-toggle {
        width: 38px;
        height: 38px;
    }

        .menu-toggle span,
        .menu-toggle::before,
        .menu-toggle::after {
            width: 23px;
        }

    .hero {
        min-height: calc(100svh - 66px);
        padding: 55px 18px 45px;
    }

        .hero h1 {
            font-size: 38px;
        }

    .hero-copy {
        font-size: 13px;
    }

    .hero-actions a,
    .hero-actions button {
        min-height: 44px;
        padding: 11px 14px;
        font-size: 9px;
    }

    .portfolio-card {
        height: 280px;
        min-height: 280px;
    }

        .portfolio-card.tall {
            height: 340px;
            min-height: 340px;
        }

    .portfolio-right .portfolio-card {
        height: 280px;
        min-height: 280px;
    }

    .portfolio-card span {
        font-size: 9px;
        padding: 8px 10px;
        bottom: 13px;
        left: 12px;
    }

    .portfolio-card .card-view-more {
        right: 12px;
        bottom: 13px;
        padding: 9px 11px;
        font-size: 8px;
        letter-spacing: 1px;
    }
}
/* =====================================================
   FLOATING WHATSAPP BUTTON
   ===================================================== */

.floating-whatsapp {
    position: fixed;
    right: 22px;
    bottom: 22px;
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-width: 52px;
    height: 52px;
    padding: 0 16px;
    background: #25D366;
    color: #fff;
    border-radius: 50px;
    text-decoration: none;
    font-family: Arial, sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.5px;
    box-shadow: 0 6px 20px rgba(0,0,0,0.20);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

    .floating-whatsapp strong {
        font-size: 24px;
        line-height: 1;
        font-weight: 400;
    }

    .floating-whatsapp:hover {
        transform: translateY(-3px);
        box-shadow: 0 9px 25px rgba(0,0,0,0.25);
    }


/* MOBILE */
@media (max-width: 600px) {

    .floating-whatsapp {
        right: 15px;
        bottom: 15px;
        width: 48px;
        height: 48px;
        min-width: 48px;
        padding: 0;
        border-radius: 50%;
    }

        .floating-whatsapp span {
            display: none;
        }

        .floating-whatsapp strong {
            font-size: 23px;
        }
}


/* EXTRA SMALL PHONES */
@media (max-width: 380px) {

    .floating-whatsapp {
        right: 12px;
        bottom: 12px;
        width: 45px;
        height: 45px;
        min-width: 45px;
    }

        .floating-whatsapp strong {
            font-size: 21px;
        }
}
/* =========================================================
   MOBILE PORTFOLIO - 2 x 2
   PRE-WEDDING | POST-WEDDING
   BABY       | MATERNITY
   ========================================================= */

@media (max-width: 600px) {

    .portfolio-grid {
        width: calc(100% - 20px);
        max-width: none;
        margin: 0 auto;
        padding: 0;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
        align-items: stretch;
    }

        /* Keep all 4 cards equal */
        .portfolio-grid .portfolio-card,
        .portfolio-grid .portfolio-card.tall,
        .portfolio-right .portfolio-card {
            width: 100%;
            min-width: 0;
            height: 250px;
            min-height: 250px;
            max-height: 250px;
            margin: 0;
            box-sizing: border-box;
            position: relative;
            overflow: hidden;
        }

    /* Make portfolio-right participate in same 2-column grid */
    .portfolio-right {
        display: contents;
    }

        .portfolio-right .portfolio-card {
            width: 100%;
        }

    /* Images */
    .portfolio-card > div:first-child {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        background-size: cover !important;
        background-position: center center !important;
        background-repeat: no-repeat;
    }

    /* Bottom dark gradient */
    .portfolio-card::after {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        height: 40%;
        z-index: 1;
        pointer-events: none;
        background: linear-gradient( to top, rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0) );
    }

    /* Category label */
    .portfolio-card > span {
        position: absolute;
        left: 8px;
        bottom: 9px;
        z-index: 3;
        display: flex;
        align-items: center;
        height: 30px;
        padding: 0 8px;
        background: #050505;
        color: #fff;
        font-size: 7px;
        font-weight: 800;
        letter-spacing: 1px;
        line-height: 1;
        white-space: nowrap;
    }

    /* View more */
    .portfolio-card .card-view-more {
        position: absolute;
        right: 8px;
        bottom: 9px;
        z-index: 3;
        display: flex;
        align-items: center;
        justify-content: center;
        height: 30px;
        min-width: 78px;
        padding: 0 7px;
        box-sizing: border-box;
        background: #050505;
        color: #fff;
        border: 1px solid rgba(255,255,255,0.7);
        font-size: 7px;
        font-weight: 800;
        letter-spacing: 0.8px;
        white-space: nowrap;
    }
}


/* =========================================================
   SMALL PHONES
   ========================================================= */

@media (max-width: 380px) {

    .portfolio-grid {
        width: calc(100% - 16px);
        gap: 8px;
    }

        .portfolio-grid .portfolio-card,
        .portfolio-grid .portfolio-card.tall,
        .portfolio-right .portfolio-card {
            height: 220px;
            min-height: 220px;
            max-height: 220px;
        }

    .portfolio-card > span {
        left: 6px;
        bottom: 7px;
        height: 28px;
        padding: 0 7px;
        font-size: 6.5px;
        letter-spacing: 0.7px;
    }

    .portfolio-card .card-view-more {
        right: 6px;
        bottom: 7px;
        height: 28px;
        min-width: 72px;
        padding: 0 6px;
        font-size: 6.5px;
        letter-spacing: 0.6px;
    }
}
/* =========================================================
   BOOKING BUTTONS - MOBILE
   ========================================================= */

@media (max-width: 600px) {

    .booking-actions {
        width: 100%;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 10px;
        margin-top: 28px;
    }

        .booking-actions .btn {
            width: 100%;
            min-height: 52px;
            padding: 0 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            box-sizing: border-box;
            font-size: 9px;
            font-weight: 800;
            letter-spacing: 1.2px;
            text-decoration: none;
            white-space: nowrap;
        }

        .booking-actions .btn-whatsapp {
            background: #20d463;
            color: #000;
            border: 1px solid #20d463;
        }

        .booking-actions .btn-call {
            background: #fff;
            color: #111;
            border: 1px solid #c99b3b;
        }

        .booking-actions .btn:active {
            transform: scale(0.98);
        }
}


/* Extra small phones */
@media (max-width: 380px) {

    .booking-actions {
        gap: 8px;
    }

        .booking-actions .btn {
            min-height: 48px;
            font-size: 8px;
            letter-spacing: 1px;
        }
}
/* =========================================
   CALL NOW - GOLD BUTTON
   ========================================= */

.call-now {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 56px;
    padding: 0 28px;
    background: #c9a227;
    color: #ffffff;
    border: 1px solid #c9a227;
    border-radius: 0;
    text-decoration: none;
    font-family: inherit;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 2px;
    text-transform: uppercase;
    white-space: nowrap;
    cursor: pointer;
    transition: all 0.3s ease;
}

    /* Hover */
    .call-now:hover {
        background: #b38d1b;
        border-color: #b38d1b;
        color: #ffffff;
    }

    /* Click */
    .call-now:active {
        transform: scale(0.98);
    }


/* MOBILE */
@media (max-width: 600px) {

    .booking-actions .call-now {
        flex: 1;
        min-width: 0;
        min-height: 48px;
        padding: 0 12px;
        font-size: 9px;
        letter-spacing: 1.2px;
        box-sizing: border-box;
    }
}


/* SMALL MOBILE */
@media (max-width: 380px) {

    .booking-actions .call-now {
        min-height: 46px;
        padding: 0 8px;
        font-size: 8px;
        letter-spacing: 1px;
    }
}
/* =====================================================
   FINAL CALL NOW BUTTON FIX
   This must be at the VERY END of style.css
   ===================================================== */

.booking-actions a.call-now {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 145px !important;
    min-height: 56px !important;
    padding: 0 26px !important;
    margin: 0 !important;
    background: #c9a227 !important;
    background-color: #c9a227 !important;
    color: #ffffff !important;
    border: 1px solid #c9a227 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    text-decoration: none !important;
    font-family: inherit !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    letter-spacing: 2px !important;
    line-height: 1 !important;
    text-transform: uppercase !important;
    white-space: nowrap !important;
    opacity: 1 !important;
    visibility: visible !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
}


    /* HOVER */
    .booking-actions a.call-now:hover {
        background: #b08a18 !important;
        background-color: #b08a18 !important;
        color: #ffffff !important;
        border-color: #b08a18 !important;
    }


    /* CLICK */
    .booking-actions a.call-now:active {
        transform: scale(0.98) !important;
    }


/* =====================================================
   MOBILE
   ===================================================== */

@media (max-width: 600px) {

    .booking-actions {
        display: flex !important;
        flex-direction: row !important;
        align-items: stretch !important;
        justify-content: center !important;
        gap: 10px !important;
        width: 100% !important;
        padding: 0 16px !important;
        box-sizing: border-box !important;
    }

        .booking-actions a.call-now {
            flex: 1 1 0 !important;
            min-width: 0 !important;
            min-height: 48px !important;
            padding: 0 10px !important;
            font-size: 9px !important;
            letter-spacing: 1.2px !important;
            box-sizing: border-box !important;
        }
}


/* =====================================================
   SMALL PHONES
   ===================================================== */

@media (max-width: 380px) {

    .booking-actions {
        gap: 8px !important;
        padding: 0 12px !important;
    }

        .booking-actions a.call-now {
            min-height: 46px !important;
            padding: 0 7px !important;
            font-size: 8px !important;
            letter-spacing: 1px !important;
        }
}
/* =========================================================
   FINAL BOOKING BUTTONS
   ========================================================= */

.booking-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    flex-wrap: wrap;
}


    /* =========================================================
   CALL NOW - GOLD BOX
   ========================================================= */

    .booking-actions .call-now {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: auto !important;
        min-width: 145px !important;
        height: 56px !important;
        padding: 0 28px !important;
        margin: 0 !important;
        box-sizing: border-box !important;
        background: #C9A227 !important;
        color: #FFFFFF !important;
        border: 1px solid #C9A227 !important;
        border-radius: 0 !important;
        text-decoration: none !important;
        font-family: inherit !important;
        font-size: 11px !important;
        font-weight: 800 !important;
        letter-spacing: 2px !important;
        line-height: 1 !important;
        text-transform: uppercase !important;
        white-space: nowrap !important;
        opacity: 1 !important;
        visibility: visible !important;
        cursor: pointer !important;
        transition: background 0.3s ease, border-color 0.3s ease, color 0.3s ease, transform 0.2s ease !important;
    }


        /* =========================================================
   CALL NOW HOVER
   ========================================================= */

        .booking-actions .call-now:hover {
            background: #A98416 !important;
            border-color: #A98416 !important;
            color: #FFFFFF !important;
        }


        /* =========================================================
   CALL NOW ACTIVE
   ========================================================= */

        .booking-actions .call-now:active {
            transform: scale(0.98) !important;
        }


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 600px) {

    .booking-actions {
        width: 100% !important;
        display: flex !important;
        flex-direction: row !important;
        align-items: stretch !important;
        justify-content: center !important;
        gap: 10px !important;
        padding: 0 14px !important;
        box-sizing: border-box !important;
    }


        .booking-actions .btn-whatsapp,
        .booking-actions .call-now {
            flex: 1 1 0 !important;
            min-width: 0 !important;
            width: auto !important;
            height: 48px !important;
            min-height: 48px !important;
            padding: 0 8px !important;
            box-sizing: border-box !important;
            font-size: 9px !important;
            letter-spacing: 1.1px !important;
        }
}


/* =========================================================
   SMALL MOBILE
   ========================================================= */

@media (max-width: 380px) {

    .booking-actions {
        gap: 8px !important;
        padding: 0 10px !important;
    }

        .booking-actions .btn-whatsapp,
        .booking-actions .call-now {
            height: 46px !important;
            min-height: 46px !important;
            padding: 0 6px !important;
            font-size: 8px !important;
            letter-spacing: 0.9px !important;
        }
}

/* =========================================================
   RG PHOTOGRAPHY — FINAL MOBILE PORTFOLIO FIX
   2 x 2 layout:
   PRE-WEDDING | POST-WEDDING
   BABY        | MATERNITY
   ========================================================= */

@media (max-width: 600px) {

    .gallery-grid {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 auto !important;
        padding: 0 !important;
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 10px !important;
    }

        .gallery-grid .gallery-item {
            width: 100% !important;
            height: 250px !important;
            min-height: 250px !important;
            max-height: 250px !important;
            margin: 0 !important;
            padding: 0 !important;
            position: relative !important;
            overflow: hidden !important;
            display: block !important;
            box-sizing: border-box !important;
            background: #111 !important;
        }

            .gallery-grid .gallery-item img {
                position: absolute !important;
                inset: 0 !important;
                width: 100% !important;
                height: 100% !important;
                max-width: none !important;
                object-fit: cover !important;
                object-position: center center !important;
                display: block !important;
                z-index: 1 !important;
            }

            .gallery-grid .gallery-item::before {
                content: "" !important;
                position: absolute !important;
                inset: 0 !important;
                z-index: 2 !important;
                pointer-events: none !important;
                background: linear-gradient( to top, rgba(0,0,0,.78) 0%, rgba(0,0,0,.20) 52%, rgba(0,0,0,.02) 100% ) !important;
            }

            .gallery-grid .gallery-item > span {
                position: absolute !important;
                left: 10px !important;
                bottom: 10px !important;
                z-index: 5 !important;
                margin: 0 !important;
                padding: 8px 9px !important;
                background: rgba(8,8,8,.92) !important;
                color: #fff !important;
                border: 1px solid rgba(200,162,39,.75) !important;
                font-size: 8px !important;
                line-height: 1.2 !important;
                font-weight: 800 !important;
                letter-spacing: 1px !important;
                white-space: nowrap !important;
            }

            .gallery-grid .gallery-item .card-view-more {
                position: absolute !important;
                right: 10px !important;
                bottom: 10px !important;
                z-index: 6 !important;
                display: inline-flex !important;
                align-items: center !important;
                justify-content: center !important;
                margin: 0 !important;
                padding: 8px 9px !important;
                background: #080808 !important;
                color: #fff !important;
                border: 1px solid #c9a227 !important;
                font-size: 7px !important;
                line-height: 1 !important;
                font-weight: 800 !important;
                letter-spacing: 1px !important;
                white-space: nowrap !important;
                opacity: 1 !important;
                visibility: visible !important;
            }

            /* Remove old duplicate VIEW MORE pseudo-element */
            .gallery-grid .gallery-item::after {
                content: none !important;
                display: none !important;
            }

            .gallery-grid .gallery-item:hover .card-view-more,
            .gallery-grid .gallery-item:active .card-view-more {
                background: #c9a227 !important;
                color: #000 !important;
            }

    /* HOME PAGE PORTFOLIO — 2 x 2 */

    .portfolio-grid {
        width: calc(100% - 20px) !important;
        max-width: 100% !important;
        margin: 0 auto !important;
        padding: 0 !important;
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        grid-template-rows: repeat(2, 210px) !important;
        gap: 10px !important;
        align-items: stretch !important;
    }

        .portfolio-grid .portfolio-right {
            display: contents !important;
        }

            .portfolio-grid .portfolio-card,
            .portfolio-grid .portfolio-card.tall,
            .portfolio-grid .portfolio-right .portfolio-card {
                width: 100% !important;
                height: 210px !important;
                min-height: 210px !important;
                max-height: 210px !important;
                grid-row: auto !important;
                grid-column: auto !important;
                margin: 0 !important;
                overflow: hidden !important;
            }

                .portfolio-grid .portfolio-card > div {
                    position: absolute !important;
                    inset: 0 !important;
                    width: 100% !important;
                    height: 100% !important;
                    background-size: cover !important;
                    background-position: center center !important;
                    z-index: 1 !important;
                }

                .portfolio-grid .portfolio-card::after {
                    content: "" !important;
                    position: absolute !important;
                    inset: 0 !important;
                    z-index: 2 !important;
                    pointer-events: none !important;
                    background: linear-gradient( to top, rgba(0,0,0,.78), rgba(0,0,0,.05) 65% ) !important;
                }

                .portfolio-grid .portfolio-card span {
                    left: 8px !important;
                    bottom: 8px !important;
                    z-index: 4 !important;
                    padding: 7px 8px !important;
                    font-size: 7px !important;
                    letter-spacing: 1px !important;
                }

                .portfolio-grid .portfolio-card .card-view-more {
                    right: 8px !important;
                    bottom: 8px !important;
                    z-index: 5 !important;
                    padding: 7px 8px !important;
                    font-size: 7px !important;
                    letter-spacing: 1px !important;
                    opacity: 1 !important;
                    visibility: visible !important;
                }
}

/* EXTRA SMALL PHONES — KEEP 2 x 2 */
@media (max-width: 380px) {

    .gallery-grid,
    .portfolio-grid {
        gap: 7px !important;
    }

        .gallery-grid .gallery-item {
            height: 220px !important;
            min-height: 220px !important;
            max-height: 220px !important;
        }

    .portfolio-grid {
        grid-template-rows: repeat(2, 185px) !important;
    }

        .portfolio-grid .portfolio-card,
        .portfolio-grid .portfolio-card.tall,
        .portfolio-grid .portfolio-right .portfolio-card {
            height: 185px !important;
            min-height: 185px !important;
            max-height: 185px !important;
        }
}
/* =========================================================
   HOMEPAGE PORTFOLIO
   ========================================================= */

.portfolio-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    width: 100%;
}

.portfolio-card {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background: #111;
}

    .portfolio-card img {
        width: 100%;
        height: 100%;
        display: block;
        object-fit: cover;
    }

.portfolio-overlay {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 12px;
    z-index: 2;
}

    .portfolio-overlay span {
        display: inline-flex;
        align-items: center;
        min-height: 40px;
        padding: 0 14px;
        background: #050505;
        color: #ffffff;
        font-size: 10px;
        font-weight: 800;
        letter-spacing: 1.5px;
        white-space: nowrap;
    }

    .portfolio-overlay a {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-height: 40px;
        padding: 0 14px;
        background: #050505;
        color: #ffffff;
        border: 1px solid #b88a3b;
        text-decoration: none;
        font-size: 10px;
        font-weight: 800;
        letter-spacing: 1.5px;
        white-space: nowrap;
    }

        .portfolio-overlay a:hover {
            background: #b88a3b;
            color: #ffffff;
        }


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 900px) {

    .portfolio-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }

    .portfolio-card {
        aspect-ratio: 1 / 1;
    }
}


/* =========================================================
   MOBILE
   IMPORTANT: ALWAYS 2 x 2
   ========================================================= */

@media (max-width: 600px) {

    .portfolio-grid {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 6px !important;
        width: 100% !important;
    }

    .portfolio-card {
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
        aspect-ratio: 1 / 1 !important;
        grid-column: auto !important;
        grid-row: auto !important;
        overflow: hidden !important;
    }

        .portfolio-card img {
            width: 100% !important;
            height: 100% !important;
            object-fit: cover !important;
            object-position: center !important;
        }

    .portfolio-overlay {
        position: absolute !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        justify-content: flex-end !important;
        gap: 5px !important;
        padding: 7px !important;
    }

        .portfolio-overlay span {
            min-height: 30px !important;
            padding: 0 7px !important;
            font-size: 7px !important;
            letter-spacing: 1px !important;
            justify-content: center !important;
        }

        .portfolio-overlay a {
            min-height: 30px !important;
            padding: 0 7px !important;
            font-size: 7px !important;
            letter-spacing: 1px !important;
            justify-content: center !important;
        }
}


/* =========================================================
   VERY SMALL MOBILE
   ========================================================= */

@media (max-width: 380px) {

    .portfolio-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 5px !important;
    }

    .portfolio-overlay {
        padding: 5px !important;
        gap: 4px !important;
    }

        .portfolio-overlay span,
        .portfolio-overlay a {
            min-height: 27px !important;
            font-size: 6px !important;
            letter-spacing: 0.7px !important;
            padding: 0 5px !important;
        }
}
/* =========================================================
   PORTFOLIO - FINAL FIX
   ========================================================= */

.portfolio-section {
    width: 100%;
    padding: 60px 5%;
    background: #fff;
}

.portfolio-grid {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}

.portfolio-card {
    position: relative;
    width: 100%;
    height: 420px;
    overflow: hidden;
    background: #111;
}

    .portfolio-card img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center;
        opacity: 1;
        visibility: visible;
    }

.portfolio-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 22px;
    background: linear-gradient( to bottom, rgba(0,0,0,0.05), rgba(0,0,0,0.10) 40%, rgba(0,0,0,0.75) );
    z-index: 2;
    opacity: 1;
    visibility: visible;
}

.portfolio-number {
    display: inline-flex;
    width: 42px;
    height: 42px;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,0.65);
    color: #fff;
    font-size: 12px;
    letter-spacing: 2px;
}

.portfolio-bottom {
    width: 100%;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 15px;
}

    .portfolio-bottom h3 {
        margin: 0;
        padding: 16px 20px;
        background: #000;
        color: #fff;
        font-size: 13px;
        font-weight: 700;
        letter-spacing: 2px;
        text-transform: uppercase;
        white-space: nowrap;
    }

.portfolio-view {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    min-width: 125px;
    min-height: 48px;
    padding: 0 18px;
    background: #000 !important;
    color: #fff !important;
    border: 1px solid #c9a227;
    text-decoration: none !important;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    white-space: nowrap;
    opacity: 1 !important;
    visibility: visible !important;
    position: relative;
    z-index: 10;
    transition: all 0.3s ease;
}

    .portfolio-view:hover {
        background: #c9a227 !important;
        color: #000 !important;
    }


/* =========================================================
   MOBILE - 2 x 2
   ========================================================= */

@media (max-width: 768px) {

    .portfolio-section {
        padding: 30px 12px;
    }

    .portfolio-grid {
        width: 100%;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }

    .portfolio-card {
        height: 260px;
    }

    .portfolio-overlay {
        padding: 10px;
    }

    .portfolio-number {
        width: 30px;
        height: 30px;
        font-size: 9px;
        letter-spacing: 1px;
    }

    .portfolio-bottom {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 6px;
    }

        .portfolio-bottom h3 {
            width: fit-content;
            padding: 9px 10px;
            font-size: 8px;
            letter-spacing: 1px;
        }

    .portfolio-view {
        width: fit-content;
        min-width: auto;
        min-height: 34px;
        padding: 0 10px;
        font-size: 8px;
        letter-spacing: 1px;
    }
}


/* =========================================================
   VERY SMALL PHONES
   ========================================================= */

@media (max-width: 380px) {

    .portfolio-section {
        padding: 25px 8px;
    }

    .portfolio-grid {
        gap: 6px;
    }

    .portfolio-card {
        height: 220px;
    }

    .portfolio-overlay {
        padding: 7px;
    }

    .portfolio-bottom h3 {
        padding: 7px 8px;
        font-size: 7px;
    }

    .portfolio-view {
        min-height: 30px;
        padding: 0 8px;
        font-size: 7px;
    }
}
/* =========================================================
   PORTFOLIO SECTION - FINAL FIX
   ========================================================= */

.portfolio-section {
    width: 100%;
    padding: 90px 0;
    background: #000;
    overflow: hidden;
}

.portfolio-container {
    width: min(1400px, 92%);
    margin: 0 auto;
}

.portfolio-heading {
    width: 100%;
    margin-bottom: 35px;
}

    .portfolio-heading p {
        max-width: 700px;
        margin: 0;
        color: #ffffff;
        font-size: 18px;
        line-height: 1.7;
    }


/* =========================
   GRID
   ========================= */

.portfolio-grid {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}


/* =========================
   CARD
   ========================= */

.portfolio-card {
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: #111;
    border: 1px solid rgba(255,255,255,0.15);
}


    /* =========================
   IMAGE
   ========================= */

    .portfolio-card .portfolio-image {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center;
    }


/* =========================
   DARK OVERLAY
   ========================= */

.portfolio-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 22px;
    background: linear-gradient( to bottom, rgba(0,0,0,0.05) 20%, rgba(0,0,0,0.15) 45%, rgba(0,0,0,0.85) 100% );
}


/* =========================
   NUMBER
   ========================= */

.portfolio-number {
    align-self: flex-start;
    padding: 8px 11px;
    background: rgba(0,0,0,0.65);
    color: #ffffff;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 2px;
}


/* =========================
   BOTTOM CONTENT
   ========================= */

.portfolio-content {
    width: 100%;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 15px;
}

    .portfolio-content h3 {
        margin: 0;
        color: #ffffff;
        font-size: 20px;
        font-weight: 700;
        letter-spacing: 2px;
        line-height: 1.2;
    }


/* =========================
   VIEW MORE BUTTON
   ========================= */

.portfolio-view {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 13px 18px;
    background: #050505;
    border: 1px solid #c8a96b;
    color: #ffffff;
    text-decoration: none;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.5px;
    white-space: nowrap;
    transition: all 0.3s ease;
}

    .portfolio-view span {
        font-size: 16px;
        line-height: 1;
    }

    .portfolio-view:hover {
        background: #c8a96b;
        color: #000000;
    }


/* =========================
   HOVER
   ========================= */

.portfolio-card .portfolio-image {
    transition: transform 0.6s ease;
}

.portfolio-card:hover .portfolio-image {
    transform: scale(1.05);
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 900px) {

    .portfolio-section {
        padding: 60px 0;
    }

    .portfolio-container {
        width: 92%;
    }

    .portfolio-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
    }

    .portfolio-card {
        aspect-ratio: 4 / 3;
    }

    .portfolio-overlay {
        padding: 14px;
    }

    .portfolio-content {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }

        .portfolio-content h3 {
            font-size: 15px;
        }

    .portfolio-view {
        padding: 10px 13px;
        font-size: 9px;
    }
}


/* =========================================================
   MOBILE
   IMPORTANT: ALWAYS 2 × 2
   ========================================================= */

@media (max-width: 600px) {

    .portfolio-section {
        width: 100%;
        padding: 45px 0;
    }

    .portfolio-container {
        width: calc(100% - 24px);
        margin: 0 auto;
    }

    .portfolio-heading {
        margin-bottom: 22px;
    }

        .portfolio-heading p {
            font-size: 14px;
            line-height: 1.6;
        }

    /*
       IMPORTANT
       Keep TWO columns on mobile.
    */

    .portfolio-grid {
        width: 100%;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }

    .portfolio-card {
        width: 100%;
        aspect-ratio: 1 / 1;
        min-width: 0;
    }

    .portfolio-overlay {
        padding: 9px;
    }

    .portfolio-number {
        padding: 5px 7px;
        font-size: 8px;
        letter-spacing: 1px;
    }

    .portfolio-content {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 7px;
    }

        .portfolio-content h3 {
            font-size: 10px;
            line-height: 1.2;
            letter-spacing: 1px;
        }

    .portfolio-view {
        padding: 7px 9px;
        font-size: 7px;
        letter-spacing: 0.8px;
    }

        .portfolio-view span {
            font-size: 11px;
        }
}


/* =========================================================
   VERY SMALL PHONES
   ========================================================= */

@media (max-width: 380px) {

    .portfolio-container {
        width: calc(100% - 16px);
    }

    .portfolio-grid {
        gap: 6px;
    }

    .portfolio-overlay {
        padding: 7px;
    }

    .portfolio-content h3 {
        font-size: 8px;
    }

    .portfolio-view {
        padding: 6px 7px;
        font-size: 6px;
    }
}
/* =========================================================
   HOMEPAGE PORTFOLIO - FINAL FIX
   DO NOT CHANGE OTHER SECTIONS
   ========================================================= */

.portfolio-section {
    width: 100%;
    padding: 70px 5%;
    background: #ffffff;
    box-sizing: border-box;
}

.portfolio-container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    box-sizing: border-box;
}

.portfolio-heading {
    width: 100%;
    margin-bottom: 30px;
}

    .portfolio-heading p {
        margin: 0;
        max-width: 650px;
        font-size: 16px;
        line-height: 1.7;
        color: #555555;
    }


/* =========================================================
   2 x 2 GRID
   ========================================================= */

.portfolio-grid {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    box-sizing: border-box;
}


/* =========================================================
   PORTFOLIO CARD
   ========================================================= */

.portfolio-card {
    position: relative;
    display: block;
    width: 100%;
    height: 420px;
    overflow: hidden;
    background: #111111;
    text-decoration: none;
    box-sizing: border-box;
}


    /* =========================================================
   IMAGE
   ========================================================= */

    .portfolio-card .portfolio-image {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center;
        opacity: 1;
        visibility: visible;
        transform: scale(1);
        transition: transform 0.5s ease;
    }


    /* IMAGE HOVER */

    .portfolio-card:hover .portfolio-image {
        transform: scale(1.04);
    }


/* =========================================================
   DARK OVERLAY
   ========================================================= */

.portfolio-overlay {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 20px;
    box-sizing: border-box;
    background: linear-gradient( to bottom, rgba(0,0,0,0.05) 0%, rgba(0,0,0,0.05) 40%, rgba(0,0,0,0.75) 100% );
    z-index: 2;
    opacity: 1;
    visibility: visible;
}


/* =========================================================
   NUMBER
   ========================================================= */

.portfolio-number {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    background: rgba(0,0,0,0.75);
    color: #ffffff;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 2px;
    box-sizing: border-box;
}


/* =========================================================
   BOTTOM CONTENT
   ========================================================= */

.portfolio-bottom {
    width: 100%;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px;
    box-sizing: border-box;
}


    /* TITLE */

    .portfolio-bottom h3 {
        margin: 0;
        padding: 14px 18px;
        background: #000000;
        color: #ffffff;
        font-size: 13px;
        font-weight: 800;
        letter-spacing: 1.5px;
        line-height: 1.2;
        white-space: nowrap;
        box-sizing: border-box;
    }


/* =========================================================
   VIEW MORE
   ========================================================= */

.portfolio-view {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    padding: 0 15px;
    background: #050505;
    border: 1px solid #b88a3b;
    color: #ffffff;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1.2px;
    white-space: nowrap;
    text-decoration: none;
    box-sizing: border-box;
    transition: background 0.3s ease, color 0.3s ease;
}


/* VIEW MORE HOVER */

.portfolio-card:hover .portfolio-view {
    background: #b88a3b;
    color: #ffffff;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 900px) {

    .portfolio-section {
        padding: 55px 24px;
    }

    .portfolio-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }

    .portfolio-card {
        height: 320px;
    }

    .portfolio-overlay {
        padding: 14px;
    }

    .portfolio-bottom {
        gap: 8px;
    }

        .portfolio-bottom h3 {
            padding: 11px 12px;
            font-size: 9px;
            letter-spacing: 1px;
        }

    .portfolio-view {
        min-height: 36px;
        padding: 0 10px;
        font-size: 8px;
        letter-spacing: 0.8px;
    }
}


/* =========================================================
   MOBILE
   ALWAYS 2 x 2
   ========================================================= */

@media (max-width: 600px) {

    .portfolio-section {
        width: 100%;
        padding: 45px 12px;
    }

    .portfolio-container {
        width: 100%;
    }

    .portfolio-heading {
        margin-bottom: 20px;
    }

        .portfolio-heading p {
            font-size: 14px;
            line-height: 1.6;
        }

    .portfolio-grid {
        width: 100%;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-template-rows: repeat(2, auto);
        gap: 8px;
    }

    .portfolio-card {
        width: 100%;
        height: 210px;
        min-height: 210px;
        max-height: 210px;
    }

        .portfolio-card .portfolio-image {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

    .portfolio-overlay {
        padding: 8px;
    }

    .portfolio-number {
        width: 28px;
        height: 28px;
        font-size: 8px;
        letter-spacing: 1px;
    }

    .portfolio-bottom {
        width: 100%;
        gap: 5px;
    }

        .portfolio-bottom h3 {
            padding: 9px 8px;
            font-size: 7px;
            letter-spacing: 0.7px;
            white-space: nowrap;
        }

    .portfolio-view {
        min-height: 30px;
        padding: 0 7px;
        font-size: 7px;
        letter-spacing: 0.6px;
        white-space: nowrap;
    }
}


/* =========================================================
   SMALL MOBILE
   ========================================================= */

@media (max-width: 380px) {

    .portfolio-section {
        padding: 35px 8px;
    }

    .portfolio-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 6px;
    }

    .portfolio-card {
        height: 180px;
        min-height: 180px;
        max-height: 180px;
    }

    .portfolio-overlay {
        padding: 6px;
    }

    .portfolio-number {
        width: 24px;
        height: 24px;
        font-size: 7px;
    }

    .portfolio-bottom {
        gap: 3px;
    }

        .portfolio-bottom h3 {
            padding: 7px 6px;
            font-size: 6px;
            letter-spacing: 0.5px;
        }

    .portfolio-view {
        min-height: 26px;
        padding: 0 5px;
        font-size: 6px;
        letter-spacing: 0.4px;
    }
}
/* =========================================================
   PORTFOLIO SECTION
   ========================================================= */

.portfolio-section {
    width: 100%;
    padding: 90px 6%;
    background: #ffffff;
    box-sizing: border-box;
}

/* Heading */
.portfolio-heading {
    max-width: 760px;
    margin: 0 auto 50px;
    text-align: center;
}

    .portfolio-heading p {
        margin: 0;
        color: #555555;
        font-size: 17px;
        line-height: 1.8;
        font-weight: 400;
        letter-spacing: 0.2px;
    }


/* Grid */
.portfolio-grid {
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px;
}


/* Individual card */
.portfolio-card {
    position: relative;
    width: 100%;
    height: 430px;
    overflow: hidden;
    background: #111111;
    border-radius: 0;
    box-sizing: border-box;
}


    /* Image */
    .portfolio-card img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center;
        transition: transform 0.7s ease;
    }


/* Dark gradient */
.portfolio-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient( to top, rgba(0, 0, 0, 0.78) 0%, rgba(0, 0, 0, 0.35) 38%, rgba(0, 0, 0, 0.05) 70%, rgba(0, 0, 0, 0.02) 100% );
    pointer-events: none;
}


/* Card content */
.portfolio-content {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 28px;
    box-sizing: border-box;
    color: #ffffff;
}


/* Number */
.portfolio-number {
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.72);
    border: 1px solid rgba(255, 255, 255, 0.25);
    color: #ffffff;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 1px;
}


/* Bottom content */
.portfolio-bottom {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 25px;
}


    /* Title */
    .portfolio-bottom h3 {
        margin: 0;
        color: #ffffff;
        font-family: inherit;
        font-size: 22px;
        font-weight: 600;
        line-height: 1.2;
        letter-spacing: 2px;
        text-shadow: 0 2px 5px rgba(0, 0, 0, 0.55);
    }


/* View More */
.portfolio-view {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 145px;
    height: 48px;
    padding: 0 18px;
    box-sizing: border-box;
    background: #050505;
    border: 1px solid rgba(255, 255, 255, 0.35);
    color: #ffffff !important;
    text-decoration: none !important;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.5px;
    transition: background 0.3s ease, border-color 0.3s ease, transform 0.3s ease;
}


    /* Arrow */
    .portfolio-view span {
        margin-left: 8px;
        font-size: 16px;
        line-height: 1;
        transition: transform 0.3s ease;
    }


/* Hover */
.portfolio-card:hover img {
    transform: scale(1.05);
}

.portfolio-view:hover {
    background: #ffffff;
    border-color: #ffffff;
    color: #111111 !important;
    transform: translateY(-2px);
}

    .portfolio-view:hover span {
        transform: translateX(4px);
    }


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 900px) {

    .portfolio-section {
        padding: 70px 25px;
    }

    .portfolio-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 16px;
    }

    .portfolio-card {
        height: 350px;
    }

    .portfolio-content {
        padding: 20px;
    }

    .portfolio-bottom h3 {
        font-size: 17px;
        letter-spacing: 1.5px;
    }

    .portfolio-view {
        min-width: 125px;
        height: 44px;
        padding: 0 14px;
        font-size: 10px;
    }
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 600px) {

    .portfolio-section {
        padding: 55px 15px;
    }

    .portfolio-heading {
        margin-bottom: 28px;
    }

        .portfolio-heading p {
            font-size: 14px;
            line-height: 1.7;
        }

    /*
       IMPORTANT:
       Keep 2 x 2 layout on mobile
    */
    .portfolio-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }

    .portfolio-card {
        height: 245px;
    }

    .portfolio-content {
        padding: 12px;
    }

    .portfolio-number {
        width: 30px;
        height: 30px;
        font-size: 9px;
    }

    .portfolio-bottom {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 9px;
    }

        .portfolio-bottom h3 {
            font-size: 12px;
            line-height: 1.25;
            letter-spacing: 1px;
        }

    .portfolio-view {
        min-width: auto;
        width: auto;
        height: 34px;
        padding: 0 10px;
        font-size: 8px;
        letter-spacing: 1px;
    }

        .portfolio-view span {
            font-size: 12px;
            margin-left: 5px;
        }
}


/* =========================================================
   SMALL MOBILE
   ========================================================= */

@media (max-width: 380px) {

    .portfolio-section {
        padding-left: 10px;
        padding-right: 10px;
    }

    .portfolio-grid {
        gap: 8px;
    }

    .portfolio-card {
        height: 220px;
    }

    .portfolio-content {
        padding: 10px;
    }

    .portfolio-bottom h3 {
        font-size: 10px;
    }

    .portfolio-view {
        height: 30px;
        padding: 0 8px;
        font-size: 7px;
    }
}
/* =========================================================
   RG PHOTOGRAPHY - PORTFOLIO FINAL FIX
   This overrides the old portfolio styles only
   ========================================================= */

/* SECTION */
#portfolio.portfolio-section {
    display: block !important;
    width: 100% !important;
    padding: 80px 6% !important;
    margin: 0 !important;
    background: #fff !important;
    box-sizing: border-box !important;
    overflow: visible !important;
}

/* INTRO TEXT */
#portfolio .portfolio-heading {
    display: block !important;
    width: 100% !important;
    max-width: 750px !important;
    margin: 0 auto 45px !important;
    padding: 0 !important;
    text-align: center !important;
}

    #portfolio .portfolio-heading p {
        display: block !important;
        margin: 0 !important;
        padding: 0 !important;
        color: #555 !important;
        background: transparent !important;
        font-family: inherit !important;
        font-size: 17px !important;
        font-weight: 400 !important;
        line-height: 1.7 !important;
        letter-spacing: .2px !important;
        text-align: center !important;
    }


/* =========================================================
   GRID
   ========================================================= */

#portfolio .portfolio-grid {
    display: grid !important;
    width: 100% !important;
    max-width: 1400px !important;
    margin: 0 auto !important;
    padding: 0 !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 22px !important;
    box-sizing: border-box !important;
}


/* =========================================================
   CARD
   ========================================================= */

#portfolio .portfolio-card {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    height: 430px !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    background: #111 !important;
    box-sizing: border-box !important;
    border: 0 !important;
    border-radius: 0 !important;
}


    /* =========================================================
   IMAGE
   ========================================================= */

    #portfolio .portfolio-card > img {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        display: block !important;
        width: 100% !important;
        height: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        object-fit: cover !important;
        object-position: center !important;
        border: 0 !important;
        z-index: 1 !important;
        transition: transform .6s ease !important;
    }


/* =========================================================
   DARK OVERLAY
   ========================================================= */

#portfolio .portfolio-overlay {
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    background: linear-gradient( to bottom, rgba(0,0,0,.05) 20%, rgba(0,0,0,.15) 45%, rgba(0,0,0,.82) 100% ) !important;
    z-index: 2 !important;
    pointer-events: none !important;
}


/* =========================================================
   CONTENT
   ========================================================= */

#portfolio .portfolio-content {
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    align-items: stretch !important;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 28px !important;
    box-sizing: border-box !important;
    color: #fff !important;
    z-index: 3 !important;
}


/* =========================================================
   NUMBER
   ========================================================= */

#portfolio .portfolio-number {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 42px !important;
    height: 42px !important;
    margin: 0 !important;
    padding: 0 !important;
    background: rgba(0,0,0,.72) !important;
    border: 1px solid rgba(255,255,255,.4) !important;
    color: #fff !important;
    font-family: inherit !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    line-height: 1 !important;
    letter-spacing: 1px !important;
    box-sizing: border-box !important;
}


/* =========================================================
   BOTTOM AREA
   ========================================================= */

#portfolio .portfolio-bottom {
    position: relative !important;
    display: flex !important;
    align-items: flex-end !important;
    justify-content: space-between !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    gap: 20px !important;
    box-sizing: border-box !important;
}


    /* =========================================================
   TITLE
   ========================================================= */

    #portfolio .portfolio-bottom h3,
    #portfolio .portfolio-info h3 {
        display: block !important;
        margin: 0 !important;
        padding: 0 !important;
        color: #fff !important;
        background: transparent !important;
        font-family: inherit !important;
        font-size: 22px !important;
        font-weight: 600 !important;
        line-height: 1.2 !important;
        letter-spacing: 2px !important;
        text-align: left !important;
        text-shadow: 0 2px 8px rgba(0,0,0,.7) !important;
    }


/* =========================================================
   VIEW MORE BUTTON
   ========================================================= */

#portfolio .portfolio-view {
    position: relative !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    width: auto !important;
    min-width: 145px !important;
    height: 48px !important;
    margin: 0 !important;
    padding: 0 18px !important;
    box-sizing: border-box !important;
    background: #050505 !important;
    border: 1px solid rgba(255,255,255,.45) !important;
    color: #fff !important;
    font-family: inherit !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    letter-spacing: 1.5px !important;
    text-decoration: none !important;
    text-align: center !important;
    z-index: 4 !important;
    transition: all .3s ease !important;
}


    /* BUTTON ARROW */
    #portfolio .portfolio-view span {
        display: inline-block !important;
        margin-left: 8px !important;
        color: #fff !important;
        font-size: 16px !important;
        line-height: 1 !important;
    }


/* =========================================================
   HOVER
   ========================================================= */

#portfolio .portfolio-card:hover > img {
    transform: scale(1.05) !important;
}

#portfolio .portfolio-view:hover {
    background: #fff !important;
    color: #111 !important;
    border-color: #fff !important;
}

    #portfolio .portfolio-view:hover span {
        color: #111 !important;
    }


/* =========================================================
   TABLET
   ========================================================= */

@media screen and (max-width: 900px) {

    #portfolio.portfolio-section {
        padding: 65px 25px !important;
    }

    #portfolio .portfolio-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 15px !important;
    }

    #portfolio .portfolio-card {
        height: 350px !important;
    }

    #portfolio .portfolio-content {
        padding: 20px !important;
    }

    #portfolio .portfolio-bottom h3,
    #portfolio .portfolio-info h3 {
        font-size: 17px !important;
        letter-spacing: 1.4px !important;
    }

    #portfolio .portfolio-view {
        min-width: 125px !important;
        height: 43px !important;
        padding: 0 13px !important;
        font-size: 10px !important;
    }
}


/* =========================================================
   MOBILE
   ========================================================= */

@media screen and (max-width: 600px) {

    #portfolio.portfolio-section {
        width: 100% !important;
        padding: 50px 12px !important;
        margin: 0 !important;
    }


    #portfolio .portfolio-heading {
        margin-bottom: 28px !important;
    }


        #portfolio .portfolio-heading p {
            font-size: 14px !important;
            line-height: 1.7 !important;
            text-align: center !important;
        }


    /*
       MOBILE = 2 COLUMNS
       2 x 2 portfolio layout
    */

    #portfolio .portfolio-grid {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 10px !important;
        width: 100% !important;
    }


    #portfolio .portfolio-card {
        width: 100% !important;
        height: 245px !important;
        min-width: 0 !important;
    }


    #portfolio .portfolio-content {
        padding: 12px !important;
    }


    #portfolio .portfolio-number {
        width: 30px !important;
        height: 30px !important;
        font-size: 9px !important;
    }


    #portfolio .portfolio-bottom {
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        justify-content: flex-end !important;
        gap: 9px !important;
        width: 100% !important;
    }


        #portfolio .portfolio-bottom h3,
        #portfolio .portfolio-info h3 {
            margin: 0 !important;
            padding: 0 !important;
            color: #fff !important;
            font-size: 11px !important;
            line-height: 1.2 !important;
            letter-spacing: 1px !important;
            text-align: left !important;
        }


    #portfolio .portfolio-view {
        width: auto !important;
        min-width: 0 !important;
        height: 34px !important;
        margin: 0 !important;
        padding: 0 10px !important;
        font-size: 8px !important;
        letter-spacing: 1px !important;
    }


        #portfolio .portfolio-view span {
            margin-left: 5px !important;
            font-size: 12px !important;
        }
}


/* =========================================================
   VERY SMALL MOBILE
   ========================================================= */

@media screen and (max-width: 380px) {

    #portfolio.portfolio-section {
        padding-left: 8px !important;
        padding-right: 8px !important;
    }

    #portfolio .portfolio-grid {
        gap: 8px !important;
    }

    #portfolio .portfolio-card {
        height: 220px !important;
    }

    #portfolio .portfolio-content {
        padding: 9px !important;
    }

    #portfolio .portfolio-number {
        width: 27px !important;
        height: 27px !important;
        font-size: 8px !important;
    }

    #portfolio .portfolio-bottom h3,
    #portfolio .portfolio-info h3 {
        font-size: 9px !important;
    }

    #portfolio .portfolio-view {
        height: 30px !important;
        padding: 0 8px !important;
        font-size: 7px !important;
    }
}
/* =========================================================
   RG PHOTOGRAPHY - HOMEPAGE PORTFOLIO FINAL OVERRIDE
   ONLY PORTFOLIO SECTION
   ========================================================= */

/* ---------- PORTFOLIO SECTION ---------- */

#portfolio {
    width: 100%;
    background: #ffffff;
    box-sizing: border-box;
}

    /* Keep heading professional */
    #portfolio .section-heading {
        width: 100%;
        max-width: 1400px;
        margin: 0 auto 35px;
        display: flex;
        align-items: flex-end;
        justify-content: space-between;
        gap: 30px;
    }

        #portfolio .section-heading h2 {
            margin: 0;
            color: #111111;
            font-size: clamp(32px, 4vw, 54px);
            line-height: 1.05;
            font-weight: 500;
        }

        #portfolio .section-heading .eyebrow {
            margin-bottom: 10px;
            color: #a47b32;
            font-size: 10px;
            font-weight: 800;
            letter-spacing: 3px;
        }

        #portfolio .section-heading .text-link {
            color: #111111;
            text-decoration: none;
            font-size: 10px;
            font-weight: 800;
            letter-spacing: 1.5px;
            white-space: nowrap;
        }

            #portfolio .section-heading .text-link:hover {
                color: #a47b32;
            }


    /* =========================================================
   DESKTOP PORTFOLIO
   PRE-WEDDING | POST-WEDDING | BABY
   PRE-WEDDING | POST-WEDDING | MATERNITY
   ========================================================= */

    #portfolio .portfolio-grid {
        width: 100%;
        max-width: 1400px;
        margin: 0 auto;
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        grid-template-rows: repeat(2, 250px);
        gap: 14px;
        box-sizing: border-box;
    }


    /* ---------- ALL CARDS ---------- */

    #portfolio .portfolio-card {
        position: relative;
        display: block;
        width: 100%;
        height: 100%;
        min-width: 0;
        min-height: 0;
        overflow: hidden;
        background: #111111;
        border: 0;
        text-decoration: none;
        box-sizing: border-box;
    }


        /* ---------- PRE + POST TALL CARDS ---------- */

        #portfolio .portfolio-card.tall {
            grid-row: 1 / span 2;
            height: 514px;
        }


        /* ---------- IMAGE ---------- */

        #portfolio .portfolio-card > div {
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-size: cover;
            background-position: center center;
            background-repeat: no-repeat;
            transform: scale(1);
            transition: transform 0.5s ease;
            z-index: 1;
        }


        /* Image hover */
        #portfolio .portfolio-card:hover > div {
            transform: scale(1.04);
        }


        /* ---------- DARK GRADIENT ---------- */

        #portfolio .portfolio-card::after {
            content: "";
            position: absolute;
            inset: 0;
            background: linear-gradient( to top, rgba(0,0,0,0.78) 0%, rgba(0,0,0,0.35) 35%, rgba(0,0,0,0.05) 65%, rgba(0,0,0,0) 100% );
            pointer-events: none;
            z-index: 2;
        }


        /* ---------- TITLE ---------- */

        #portfolio .portfolio-card > span {
            position: absolute;
            left: 18px;
            bottom: 18px;
            z-index: 5;
            display: inline-flex;
            align-items: center;
            min-height: 38px;
            padding: 0 13px;
            background: rgba(0,0,0,0.90);
            color: #ffffff;
            font-family: Arial, sans-serif;
            font-size: 10px;
            font-weight: 800;
            line-height: 1;
            letter-spacing: 1.8px;
            white-space: nowrap;
            box-sizing: border-box;
        }


        /* ---------- VIEW MORE BUTTON ---------- */

        #portfolio .portfolio-card .card-view-more {
            position: absolute;
            right: 18px;
            bottom: 18px;
            z-index: 5;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-height: 38px;
            padding: 0 14px;
            background: #050505;
            color: #ffffff;
            border: 1px solid #b88a3b;
            font-family: Arial, sans-serif;
            font-size: 9px;
            font-weight: 800;
            line-height: 1;
            letter-spacing: 1.4px;
            white-space: nowrap;
            box-sizing: border-box;
            transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease;
        }


        /* Button hover */
        #portfolio .portfolio-card:hover .card-view-more {
            background: #b88a3b;
            color: #ffffff;
            border-color: #b88a3b;
        }


    /* =========================================================
   BABY + MATERNITY RIGHT SIDE
   ========================================================= */

    #portfolio .portfolio-right {
        grid-column: 3;
        grid-row: 1 / span 2;
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: repeat(2, minmax(0, 1fr));
        gap: 14px;
        width: 100%;
        height: 514px;
        min-width: 0;
        min-height: 0;
    }


        /* Right cards */
        #portfolio .portfolio-right .portfolio-card {
            width: 100%;
            height: 100%;
            min-height: 0;
        }


/* =========================================================
   TABLET
   ========================================================= */

@media screen and (max-width: 900px) {

    #portfolio {
        padding-left: 25px !important;
        padding-right: 25px !important;
    }

        #portfolio .section-heading {
            margin-bottom: 25px;
        }

        #portfolio .portfolio-grid {
            grid-template-columns: repeat(2, minmax(0, 1fr));
            grid-template-rows: repeat(2, 300px);
            gap: 12px;
        }

        /* Disable desktop tall layout */
        #portfolio .portfolio-card.tall {
            grid-row: auto;
            height: 300px;
        }

        /* Make right cards join the 2 x 2 grid */
        #portfolio .portfolio-right {
            display: contents;
        }

            #portfolio .portfolio-right .portfolio-card {
                width: 100%;
                height: 300px;
            }

        #portfolio .portfolio-card > span {
            left: 14px;
            bottom: 14px;
            min-height: 36px;
            padding: 0 11px;
            font-size: 9px;
            letter-spacing: 1.5px;
        }

        #portfolio .portfolio-card .card-view-more {
            right: 14px;
            bottom: 14px;
            min-height: 36px;
            padding: 0 11px;
            font-size: 8px;
            letter-spacing: 1.2px;
        }
}


/* =========================================================
   MOBILE
   ALWAYS 2 x 2
   ========================================================= */

@media screen and (max-width: 600px) {

    #portfolio {
        padding: 45px 12px !important;
    }

        /* Heading */
        #portfolio .section-heading {
            display: block;
            margin-bottom: 22px;
        }

            #portfolio .section-heading .eyebrow {
                margin-bottom: 7px;
                font-size: 8px;
                letter-spacing: 2.2px;
            }

            #portfolio .section-heading h2 {
                font-size: 28px;
                line-height: 1.1;
            }

            #portfolio .section-heading .text-link {
                display: inline-block;
                margin-top: 14px;
                font-size: 8px;
                letter-spacing: 1.2px;
            }


        /* ---------- 2 x 2 GRID ---------- */

        #portfolio .portfolio-grid {
            display: grid !important;
            grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
            grid-template-rows: repeat(2, minmax(0, 1fr)) !important;
            gap: 8px !important;
            width: 100% !important;
            max-width: none !important;
            margin: 0 !important;
        }


            /* ---------- ALL FOUR CARDS ---------- */

            #portfolio .portfolio-grid .portfolio-card,
            #portfolio .portfolio-grid .portfolio-card.tall,
            #portfolio .portfolio-right .portfolio-card {
                width: 100% !important;
                height: auto !important;
                min-height: 0 !important;
                max-height: none !important;
                aspect-ratio: 1 / 1 !important;
                grid-row: auto !important;
                grid-column: auto !important;
            }


        /* Right container disappears from grid */
        #portfolio .portfolio-right {
            display: contents !important;
        }


        /* ---------- IMAGE ---------- */

        #portfolio .portfolio-card > div {
            width: 100%;
            height: 100%;
            background-position: center center;
            background-size: cover;
        }


        /* ---------- DARK OVERLAY ---------- */

        #portfolio .portfolio-card::after {
            background: linear-gradient( to top, rgba(0,0,0,0.82) 0%, rgba(0,0,0,0.32) 42%, rgba(0,0,0,0.02) 75%, transparent 100% );
            z-index: 2;
        }


        /* ---------- MOBILE TITLE ---------- */

        #portfolio .portfolio-card > span {
            left: 8px !important;
            bottom: 8px !important;
            z-index: 5 !important;
            min-height: 29px !important;
            padding: 0 8px !important;
            background: rgba(0,0,0,0.92) !important;
            color: #ffffff !important;
            font-family: Arial, sans-serif !important;
            font-size: 7px !important;
            font-weight: 800 !important;
            line-height: 1 !important;
            letter-spacing: 1px !important;
            white-space: nowrap !important;
            display: inline-flex !important;
            align-items: center !important;
        }


        /* ---------- MOBILE VIEW MORE ---------- */

        #portfolio .portfolio-card .card-view-more {
            right: 8px !important;
            bottom: 8px !important;
            z-index: 5 !important;
            min-height: 29px !important;
            padding: 0 8px !important;
            background: #050505 !important;
            color: #ffffff !important;
            border: 1px solid #b88a3b !important;
            font-family: Arial, sans-serif !important;
            font-size: 6.5px !important;
            font-weight: 800 !important;
            line-height: 1 !important;
            letter-spacing: 0.8px !important;
            display: inline-flex !important;
            align-items: center !important;
            justify-content: center !important;
            white-space: nowrap !important;
        }


        /* Remove old transformations */
        #portfolio .portfolio-card:hover > div {
            transform: none !important;
        }
}


/* =========================================================
   VERY SMALL MOBILE
   ========================================================= */

@media screen and (max-width: 380px) {

    #portfolio {
        padding-left: 8px !important;
        padding-right: 8px !important;
    }

        #portfolio .portfolio-grid {
            gap: 6px !important;
        }

        #portfolio .portfolio-card > span {
            left: 6px !important;
            bottom: 6px !important;
            min-height: 26px !important;
            padding: 0 6px !important;
            font-size: 6px !important;
            letter-spacing: 0.8px !important;
        }

        #portfolio .portfolio-card .card-view-more {
            right: 6px !important;
            bottom: 6px !important;
            min-height: 26px !important;
            padding: 0 6px !important;
            font-size: 5.8px !important;
            letter-spacing: 0.6px !important;
        }
}
/* =========================================================
   FINAL HOMEPAGE PORTFOLIO FIX
   Applies only to #portfolio.
   - 4 equal cards on desktop
   - 2 x 2 on mobile
   - correct image sizing
   - clean white title/button text
   - fixes old conflicting portfolio rules
   ========================================================= */

#portfolio.portfolio-section {
    width: 100%;
    background: #ffffff;
    padding: 90px max(6vw, 24px);
    margin: 0;
    box-sizing: border-box;
}

    #portfolio.portfolio-section .portfolio-heading {
        width: 100%;
        max-width: 1400px;
        margin: 0 auto 34px;
        padding: 0;
        box-sizing: border-box;
    }

        #portfolio.portfolio-section .portfolio-heading p {
            max-width: 850px;
            margin: 0;
            padding: 0;
            color: #555555;
            font-family: Inter, Arial, sans-serif;
            font-size: 16px;
            font-weight: 400;
            line-height: 1.7;
            letter-spacing: .1px;
        }

    #portfolio.portfolio-section .portfolio-grid {
        width: 100%;
        max-width: 1400px;
        margin: 0 auto;
        padding: 0;
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        grid-template-rows: none;
        gap: 16px;
        box-sizing: border-box;
    }

        #portfolio.portfolio-section .portfolio-card,
        #portfolio.portfolio-section .portfolio-grid .portfolio-card,
        #portfolio.portfolio-section .portfolio-card.tall,
        #portfolio.portfolio-section .portfolio-right .portfolio-card {
            position: relative;
            display: block;
            width: 100%;
            height: 390px;
            min-width: 0;
            min-height: 0;
            max-height: none;
            margin: 0;
            padding: 0;
            overflow: hidden;
            background: #111111;
            border: 0;
            border-radius: 0;
            box-sizing: border-box;
            grid-column: auto;
            grid-row: auto;
        }

            #portfolio.portfolio-section .portfolio-card > img {
                position: absolute;
                inset: 0;
                display: block;
                width: 100%;
                height: 100%;
                max-width: none;
                margin: 0;
                padding: 0;
                object-fit: cover;
                object-position: center center;
                border: 0;
                z-index: 1;
                transition: transform .6s ease;
            }

    #portfolio.portfolio-section .portfolio-overlay {
        position: absolute;
        inset: 0;
        display: block;
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 0;
        background: linear-gradient( to top, rgba(0,0,0,.82) 0%, rgba(0,0,0,.38) 42%, rgba(0,0,0,.08) 72%, rgba(0,0,0,0) 100% );
        z-index: 2;
        pointer-events: none;
    }

    #portfolio.portfolio-section .portfolio-content {
        position: absolute;
        inset: 0;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: stretch;
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 20px;
        color: #ffffff;
        box-sizing: border-box;
        z-index: 3;
    }

    #portfolio.portfolio-section .portfolio-number {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 36px;
        height: 36px;
        margin: 0;
        padding: 0;
        background: rgba(0,0,0,.68);
        border: 1px solid rgba(255,255,255,.5);
        color: #ffffff;
        font-family: Inter, Arial, sans-serif;
        font-size: 10px;
        font-weight: 700;
        line-height: 1;
        letter-spacing: 1px;
        box-sizing: border-box;
    }

    #portfolio.portfolio-section .portfolio-bottom {
        position: relative;
        display: flex;
        align-items: flex-end;
        justify-content: space-between;
        width: 100%;
        margin: 0;
        padding: 0;
        gap: 12px;
        box-sizing: border-box;
    }

        #portfolio.portfolio-section .portfolio-bottom h3,
        #portfolio.portfolio-section .portfolio-info h3 {
            display: block;
            flex: 1 1 auto;
            margin: 0;
            padding: 0;
            color: #ffffff;
            background: transparent;
            font-family: Inter, Arial, sans-serif;
            font-size: 15px;
            font-weight: 800;
            line-height: 1.2;
            letter-spacing: 1.6px;
            text-align: left;
            text-shadow: 0 2px 8px rgba(0,0,0,.8);
        }

    #portfolio.portfolio-section .portfolio-view {
        position: relative;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex: 0 0 auto;
        width: auto;
        min-width: 120px;
        height: 40px;
        margin: 0;
        padding: 0 13px;
        background: #050505;
        border: 1px solid #b88a2d;
        color: #ffffff;
        font-family: Inter, Arial, sans-serif;
        font-size: 9px;
        font-weight: 800;
        line-height: 1;
        letter-spacing: 1.2px;
        text-decoration: none;
        text-align: center;
        white-space: nowrap;
        box-sizing: border-box;
        z-index: 4;
        transition: background .25s ease, color .25s ease, border-color .25s ease;
    }

        #portfolio.portfolio-section .portfolio-view span {
            display: inline-block;
            margin-left: 6px;
            color: #ffffff;
            font-size: 13px;
            line-height: 1;
        }

    #portfolio.portfolio-section .portfolio-card:hover > img {
        transform: scale(1.05);
    }

    #portfolio.portfolio-section .portfolio-view:hover {
        background: #b88a2d;
        border-color: #b88a2d;
        color: #ffffff;
    }

        #portfolio.portfolio-section .portfolio-view:hover span {
            color: #ffffff;
        }

/* Tablet: 2 x 2 */
@media screen and (max-width: 900px) {
    #portfolio.portfolio-section {
        padding: 70px 25px;
    }

        #portfolio.portfolio-section .portfolio-grid {
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 14px;
        }

            #portfolio.portfolio-section .portfolio-card,
            #portfolio.portfolio-section .portfolio-grid .portfolio-card,
            #portfolio.portfolio-section .portfolio-card.tall,
            #portfolio.portfolio-section .portfolio-right .portfolio-card {
                height: 320px;
                aspect-ratio: auto;
            }

        #portfolio.portfolio-section .portfolio-content {
            padding: 16px;
        }

        #portfolio.portfolio-section .portfolio-bottom h3,
        #portfolio.portfolio-section .portfolio-info h3 {
            font-size: 13px;
            letter-spacing: 1.3px;
        }

        #portfolio.portfolio-section .portfolio-view {
            min-width: 110px;
            height: 37px;
            padding: 0 10px;
            font-size: 8px;
        }
}

/* Mobile: ALWAYS 2 x 2 */
@media screen and (max-width: 600px) {
    #portfolio.portfolio-section {
        width: 100%;
        padding: 50px 12px;
        margin: 0;
    }

        #portfolio.portfolio-section .portfolio-heading {
            margin-bottom: 22px;
        }

            #portfolio.portfolio-section .portfolio-heading p {
                max-width: none;
                font-size: 14px;
                line-height: 1.65;
                text-align: left;
            }

        #portfolio.portfolio-section .portfolio-grid {
            display: grid !important;
            grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
            grid-template-rows: repeat(2, minmax(0, 1fr)) !important;
            gap: 9px !important;
            width: 100% !important;
            max-width: none !important;
            margin: 0 !important;
            padding: 0 !important;
        }

        #portfolio.portfolio-section .portfolio-right {
            display: contents !important;
        }

            #portfolio.portfolio-section .portfolio-card,
            #portfolio.portfolio-section .portfolio-grid .portfolio-card,
            #portfolio.portfolio-section .portfolio-card.tall,
            #portfolio.portfolio-section .portfolio-right .portfolio-card {
                width: 100% !important;
                height: auto !important;
                min-height: 0 !important;
                max-height: none !important;
                aspect-ratio: 1 / 1 !important;
                grid-column: auto !important;
                grid-row: auto !important;
            }

                #portfolio.portfolio-section .portfolio-card > img {
                    width: 100% !important;
                    height: 100% !important;
                    object-fit: cover !important;
                    object-position: center center !important;
                }

        #portfolio.portfolio-section .portfolio-content {
            padding: 10px !important;
        }

        #portfolio.portfolio-section .portfolio-number {
            width: 28px !important;
            height: 28px !important;
            font-size: 8px !important;
        }

        #portfolio.portfolio-section .portfolio-bottom {
            display: flex !important;
            flex-direction: column !important;
            align-items: flex-start !important;
            justify-content: flex-end !important;
            gap: 7px !important;
            width: 100% !important;
        }

            #portfolio.portfolio-section .portfolio-bottom h3,
            #portfolio.portfolio-section .portfolio-info h3 {
                width: 100% !important;
                margin: 0 !important;
                padding: 0 !important;
                color: #ffffff !important;
                font-family: Inter, Arial, sans-serif !important;
                font-size: 9px !important;
                font-weight: 800 !important;
                line-height: 1.2 !important;
                letter-spacing: 1px !important;
                text-align: left !important;
                white-space: nowrap !important;
                text-shadow: 0 2px 7px rgba(0,0,0,.9) !important;
            }

        #portfolio.portfolio-section .portfolio-view {
            min-width: 0 !important;
            width: auto !important;
            height: 30px !important;
            margin: 0 !important;
            padding: 0 9px !important;
            font-size: 7px !important;
            letter-spacing: .8px !important;
        }

            #portfolio.portfolio-section .portfolio-view span {
                margin-left: 4px !important;
                font-size: 10px !important;
            }

        #portfolio.portfolio-section .portfolio-card:hover > img {
            transform: none !important;
        }
}

/* Very small phones */
@media screen and (max-width: 380px) {
    #portfolio.portfolio-section {
        padding-left: 8px;
        padding-right: 8px;
    }

        #portfolio.portfolio-section .portfolio-grid {
            gap: 6px !important;
        }

        #portfolio.portfolio-section .portfolio-content {
            padding: 8px !important;
        }

        #portfolio.portfolio-section .portfolio-bottom h3,
        #portfolio.portfolio-section .portfolio-info h3 {
            font-size: 8px !important;
            letter-spacing: .8px !important;
        }

        #portfolio.portfolio-section .portfolio-view {
            height: 27px !important;
            padding: 0 7px !important;
            font-size: 6px !important;
        }
}

/* =========================================================
   END FINAL HOMEPAGE PORTFOLIO FIX
   ========================================================= */


/* =========================================================
   RG PHOTOGRAPHY
   HOMEPAGE PORTFOLIO - FINAL PROFESSIONAL OVERRIDE
   ========================================================= */

/* ---------- PORTFOLIO SECTION ---------- */

#portfolio.portfolio-section {
    width: 100%;
    padding: 80px 5%;
    background: #ffffff;
    box-sizing: border-box;
    overflow: hidden;
}

#portfolio .portfolio-container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    box-sizing: border-box;
}


/* =========================================================
   PORTFOLIO INTRO TEXT
   ========================================================= */

#portfolio .portfolio-heading {
    width: 100%;
    max-width: 760px;
    margin: 0 auto 38px;
    text-align: left;
    box-sizing: border-box;
}

    #portfolio .portfolio-heading p {
        margin: 0;
        color: #555555;
        font-family: inherit;
        font-size: 16px;
        font-weight: 400;
        line-height: 1.7;
        letter-spacing: 0.1px;
    }


/* =========================================================
   PORTFOLIO GRID
   DESKTOP = 4 CARDS IN ONE ROW
   ========================================================= */

#portfolio .portfolio-grid {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-template-rows: 360px;
    gap: 18px;
    box-sizing: border-box;
}


/* =========================================================
   PORTFOLIO CARD
   ========================================================= */

#portfolio .portfolio-card {
    position: relative;
    width: 100%;
    height: 360px;
    min-height: 360px;
    display: block;
    overflow: hidden;
    background: #111111;
    border: 1px solid #d9d9d9;
    box-shadow: 0 18px 42px rgba(0, 0, 0, 0.10);
    box-sizing: border-box;
    text-decoration: none;
    isolation: isolate;
}


    /* =========================================================
   INNER GOLD BORDER
   SAME VISUAL LANGUAGE AS WEDDING CARDS
   ========================================================= */

    #portfolio .portfolio-card::before {
        content: "";
        position: absolute;
        inset: 10px;
        border: 1px solid rgba(216, 178, 84, 0.55);
        z-index: 5;
        pointer-events: none;
        transition: border-color 0.4s ease, inset 0.4s ease;
    }


    /* =========================================================
   PORTFOLIO IMAGE
   ========================================================= */

    #portfolio .portfolio-card .portfolio-image {
        position: absolute;
        inset: 0;
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center center;
        opacity: 1;
        visibility: visible;
        filter: grayscale(0.35);
        transform: scale(1);
        transition: transform 0.6s ease, filter 0.6s ease;
        z-index: 1;
    }


    /* =========================================================
   IMAGE HOVER
   ========================================================= */

    #portfolio .portfolio-card:hover .portfolio-image {
        transform: scale(1.06);
        filter: grayscale(0);
    }


    /* =========================================================
   DARK CINEMATIC OVERLAY
   ========================================================= */

    #portfolio .portfolio-card .portfolio-overlay {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        padding: 20px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        box-sizing: border-box;
        background: linear-gradient( to bottom, rgba(0, 0, 0, 0.15) 0%, rgba(0, 0, 0, 0.02) 35%, rgba(0, 0, 0, 0.25) 52%, rgba(0, 0, 0, 0.88) 100% );
        z-index: 2;
        opacity: 1;
        visibility: visible;
        pointer-events: none;
    }


    /* =========================================================
   NUMBER
   ========================================================= */

    #portfolio .portfolio-card .portfolio-number {
        position: relative;
        width: auto;
        height: auto;
        min-width: 34px;
        align-self: flex-start;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 7px 10px;
        background: rgba(0, 0, 0, 0.72);
        border: 1px solid rgba(216, 178, 84, 0.45);
        color: #e2c477;
        font-family: inherit;
        font-size: 10px;
        font-weight: 700;
        letter-spacing: 1.8px;
        line-height: 1;
        box-sizing: border-box;
        z-index: 4;
    }


    /* =========================================================
   BOTTOM CONTENT
   ========================================================= */

    #portfolio .portfolio-card .portfolio-content {
        position: absolute;
        left: 20px;
        right: 20px;
        bottom: 20px;
        width: auto;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 14px;
        z-index: 4;
        pointer-events: auto;
    }


        /* =========================================================
   TITLE
   ========================================================= */

        #portfolio .portfolio-card .portfolio-content h3,
        #portfolio .portfolio-card .portfolio-bottom h3 {
            position: relative;
            margin: 0;
            padding: 0;
            background: transparent;
            color: #ffffff;
            font-family: inherit;
            font-size: 22px;
            font-weight: 600;
            letter-spacing: 2px;
            line-height: 1.15;
            white-space: normal;
            text-transform: uppercase;
            text-shadow: 0 2px 8px rgba(0, 0, 0, 0.55);
            box-sizing: border-box;
        }


    /* =========================================================
   VIEW MORE BUTTON
   ========================================================= */

    #portfolio .portfolio-card .portfolio-view {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-height: 38px;
        padding: 0 14px;
        background: #080808;
        border: 1px solid #d8b254;
        color: #ffffff;
        font-family: inherit;
        font-size: 9px;
        font-weight: 700;
        letter-spacing: 1.7px;
        line-height: 1;
        text-decoration: none;
        white-space: nowrap;
        box-sizing: border-box;
        transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease, transform 0.3s ease;
    }


        /* =========================================================
   VIEW MORE ARROW
   ========================================================= */

        #portfolio .portfolio-card .portfolio-view span {
            margin-left: 7px;
            color: #d8b254;
            font-size: 12px;
            transition: transform 0.3s ease, color 0.3s ease;
        }


    /* =========================================================
   VIEW MORE HOVER
   ========================================================= */

    #portfolio .portfolio-card:hover .portfolio-view {
        background: #d8b254;
        border-color: #d8b254;
        color: #000000;
        transform: translateY(-2px);
    }

        #portfolio .portfolio-card:hover .portfolio-view span {
            color: #000000;
            transform: translateX(3px);
        }


    /* =========================================================
   CARD HOVER BORDER
   ========================================================= */

    #portfolio .portfolio-card:hover {
        border-color: #c9c9c9;
    }

        #portfolio .portfolio-card:hover::before {
            inset: 8px;
            border-color: rgba(216, 178, 84, 0.85);
        }


/* =========================================================
   TABLET
   2 x 2
   ========================================================= */

@media (max-width: 900px) {

    #portfolio.portfolio-section {
        padding: 65px 4%;
    }

    #portfolio .portfolio-heading {
        margin-bottom: 30px;
    }

        #portfolio .portfolio-heading p {
            font-size: 15px;
            line-height: 1.65;
        }

    #portfolio .portfolio-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-template-rows: repeat(2, 330px);
        gap: 14px;
    }

    #portfolio .portfolio-card {
        height: 330px;
        min-height: 330px;
    }

        #portfolio .portfolio-card .portfolio-overlay {
            padding: 16px;
        }

        #portfolio .portfolio-card .portfolio-content {
            left: 16px;
            right: 16px;
            bottom: 16px;
            gap: 11px;
        }

            #portfolio .portfolio-card .portfolio-content h3,
            #portfolio .portfolio-card .portfolio-bottom h3 {
                font-size: 18px;
                letter-spacing: 1.5px;
            }

        #portfolio .portfolio-card .portfolio-view {
            min-height: 36px;
            padding: 0 12px;
            font-size: 8px;
            letter-spacing: 1.4px;
        }
}


/* =========================================================
   MOBILE
   ALWAYS 2 x 2
   ========================================================= */

@media (max-width: 600px) {

    #portfolio.portfolio-section {
        width: 100%;
        padding: 48px 12px;
        background: #ffffff;
    }

    #portfolio .portfolio-container {
        width: 100%;
        max-width: 100%;
    }

    #portfolio .portfolio-heading {
        width: 100%;
        margin: 0 auto 22px;
    }

        #portfolio .portfolio-heading p {
            max-width: 100%;
            font-size: 14px;
            line-height: 1.65;
            color: #555555;
        }


    /* ---------- MOBILE 2 x 2 GRID ---------- */

    #portfolio .portfolio-grid {
        width: 100%;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-template-rows: repeat(2, 210px);
        gap: 8px;
        margin: 0;
    }


    /* ---------- MOBILE CARD ---------- */

    #portfolio .portfolio-card {
        width: 100%;
        height: 210px;
        min-height: 210px;
        max-height: 210px;
        border: 1px solid #d9d9d9;
    }


        /* ---------- MOBILE INNER BORDER ---------- */

        #portfolio .portfolio-card::before {
            inset: 7px;
            border-color: rgba(216, 178, 84, 0.55);
        }


        /* ---------- MOBILE IMAGE ---------- */

        #portfolio .portfolio-card .portfolio-image {
            width: 100%;
            height: 100%;
            object-fit: cover;
            object-position: center;
        }


        /* ---------- MOBILE OVERLAY ---------- */

        #portfolio .portfolio-card .portfolio-overlay {
            padding: 9px;
        }


        /* ---------- MOBILE NUMBER ---------- */

        #portfolio .portfolio-card .portfolio-number {
            min-width: 27px;
            padding: 6px 7px;
            font-size: 7px;
            letter-spacing: 1.2px;
        }


        /* ---------- MOBILE CONTENT ---------- */

        #portfolio .portfolio-card .portfolio-content {
            left: 9px;
            right: 9px;
            bottom: 9px;
            gap: 7px;
        }


            /* ---------- MOBILE TITLE ---------- */

            #portfolio .portfolio-card .portfolio-content h3,
            #portfolio .portfolio-card .portfolio-bottom h3 {
                margin: 0;
                padding: 0;
                color: #ffffff;
                font-size: 11px;
                font-weight: 700;
                letter-spacing: 1px;
                line-height: 1.2;
                white-space: normal;
                text-shadow: 0 2px 6px rgba(0, 0, 0, 0.7);
            }


        /* ---------- MOBILE VIEW MORE ---------- */

        #portfolio .portfolio-card .portfolio-view {
            min-height: 28px;
            padding: 0 8px;
            font-size: 7px;
            font-weight: 700;
            letter-spacing: 0.9px;
        }


            #portfolio .portfolio-card .portfolio-view span {
                margin-left: 4px;
                font-size: 9px;
            }


        /* ---------- MOBILE HOVER ---------- */

        #portfolio .portfolio-card:hover .portfolio-image {
            transform: scale(1.04);
        }
}


/* =========================================================
   SMALL MOBILE
   ========================================================= */

@media (max-width: 380px) {

    #portfolio.portfolio-section {
        padding: 38px 8px;
    }

    #portfolio .portfolio-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-template-rows: repeat(2, 180px);
        gap: 6px;
    }

    #portfolio .portfolio-card {
        height: 180px;
        min-height: 180px;
        max-height: 180px;
    }

        #portfolio .portfolio-card::before {
            inset: 6px;
        }

        #portfolio .portfolio-card .portfolio-overlay {
            padding: 7px;
        }

        #portfolio .portfolio-card .portfolio-number {
            min-width: 24px;
            padding: 5px 6px;
            font-size: 6px;
        }

        #portfolio .portfolio-card .portfolio-content {
            left: 7px;
            right: 7px;
            bottom: 7px;
            gap: 5px;
        }

            #portfolio .portfolio-card .portfolio-content h3,
            #portfolio .portfolio-card .portfolio-bottom h3 {
                font-size: 9px;
                letter-spacing: 0.7px;
            }

        #portfolio .portfolio-card .portfolio-view {
            min-height: 25px;
            padding: 0 6px;
            font-size: 6px;
            letter-spacing: 0.7px;
        }
}


/* =========================================================
   SAFETY FIXES
   ONLY PORTFOLIO SECTION
   ========================================================= */

#portfolio .portfolio-card img {
    max-width: none;
}

#portfolio .portfolio-card a {
    cursor: pointer;
}

#portfolio .portfolio-card .portfolio-overlay,
#portfolio .portfolio-card .portfolio-number,
#portfolio .portfolio-card .portfolio-content,
#portfolio .portfolio-card .portfolio-view {
    opacity: 1;
    visibility: visible;
}

    #portfolio .portfolio-card .portfolio-content h3 {
        overflow: visible;
    }
/* =========================================================
   RG PHOTOGRAPHY
   HOMEPAGE PORTFOLIO - FINAL OVERRIDE
   ========================================================= */

/* Portfolio section */
#portfolio.portfolio-section {
    width: 100%;
    padding: 70px 5%;
    background: #ffffff;
    box-sizing: border-box;
    overflow: hidden;
}

/* Portfolio container */
#portfolio .portfolio-container {
    width: 100%;
    max-width: 1340px;
    margin: 0 auto;
    box-sizing: border-box;
}

/* Portfolio intro text */
#portfolio .portfolio-heading,
#portfolio .portfolio-intro,
#portfolio .portfolio-description {
    width: 100%;
    max-width: 1000px;
    margin: 0 auto 35px;
    text-align: center;
    box-sizing: border-box;
}

    #portfolio .portfolio-heading h2 {
        margin: 0 0 15px;
        font-family: Georgia, "Times New Roman", serif;
        font-size: clamp(32px, 4vw, 52px);
        line-height: 1.15;
        font-weight: 400;
        color: #111111;
    }

    #portfolio .portfolio-intro p,
    #portfolio .portfolio-description p {
        margin: 0;
        font-family: Arial, Helvetica, sans-serif;
        font-size: 17px;
        line-height: 1.7;
        color: #555555;
    }

/* =========================================================
   PORTFOLIO GRID
   ========================================================= */

#portfolio .portfolio-grid,
#portfolio .portfolio-cards,
#portfolio .portfolio-list {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
    box-sizing: border-box;
}

/* =========================================================
   PORTFOLIO CARD
   Works with the existing portfolio/category-card markup
   ========================================================= */

#portfolio .portfolio-card,
#portfolio .category-card {
    position: relative;
    width: 100%;
    height: 380px;
    min-width: 0;
    overflow: hidden;
    border: 1px solid #d8d0c5;
    background: #111111;
    box-sizing: border-box;
    isolation: isolate;
}

    /* Image */
    #portfolio .portfolio-card img,
    #portfolio .category-card img {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        display: block;
        object-fit: cover;
        object-position: center;
        margin: 0;
        padding: 0;
        border: 0;
        transform: scale(1);
        transition: transform 0.6s ease;
    }

    /* Image hover */
    #portfolio .portfolio-card:hover img,
    #portfolio .category-card:hover img {
        transform: scale(1.04);
    }

    /* =========================================================
   DARK GRADIENT OVERLAY
   ========================================================= */

    #portfolio .portfolio-card::after,
    #portfolio .category-card::after {
        content: "";
        position: absolute;
        inset: 0;
        z-index: 1;
        pointer-events: none;
        background: linear-gradient( to bottom, rgba(0, 0, 0, 0.08) 0%, rgba(0, 0, 0, 0.03) 35%, rgba(0, 0, 0, 0.18) 55%, rgba(0, 0, 0, 0.78) 100% );
    }

    /* =========================================================
   CARD CONTENT
   ========================================================= */

    #portfolio .portfolio-card .portfolio-content,
    #portfolio .category-card .category-content,
    #portfolio .category-card .category-overlay,
    #portfolio .category-card .category-info {
        position: absolute;
        inset: 0;
        z-index: 2;
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        align-items: flex-start;
        padding: 28px;
        box-sizing: border-box;
    }

/* =========================================================
   NUMBER
   ========================================================= */

#portfolio .portfolio-number,
#portfolio .category-number {
    position: absolute;
    top: 20px;
    left: 22px;
    z-index: 3;
    margin: 0;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    line-height: 1;
    font-weight: 600;
    letter-spacing: 2px;
    color: rgba(255, 255, 255, 0.85);
}

/* =========================================================
   LOGO
   ========================================================= */

#portfolio .portfolio-card .card-logo,
#portfolio .category-card .card-logo {
    position: absolute;
    top: 16px;
    right: 16px;
    z-index: 3;
    max-width: 48px;
    max-height: 48px;
    object-fit: contain;
}

/* =========================================================
   TITLE
   ========================================================= */

#portfolio .portfolio-card h3,
#portfolio .portfolio-card .card-title,
#portfolio .category-card h3,
#portfolio .category-card .category-title {
    position: relative;
    z-index: 3;
    margin: 0 0 16px;
    padding: 0;
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(25px, 2.4vw, 38px);
    line-height: 1.1;
    font-weight: 400;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: #ffffff !important;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.55);
}

/* =========================================================
   VIEW MORE BUTTON
   ========================================================= */

#portfolio .portfolio-card a,
#portfolio .portfolio-card .portfolio-view,
#portfolio .portfolio-card button,
#portfolio .category-card a,
#portfolio .category-card .category-view,
#portfolio .category-card button {
    position: relative;
    z-index: 4;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: auto;
    min-width: 135px;
    height: 46px;
    margin: 0;
    padding: 0 20px;
    border: 1px solid rgba(255, 255, 255, 0.75);
    border-radius: 0;
    background: rgba(10, 10, 10, 0.88);
    color: #ffffff !important;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 11px;
    line-height: 1;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-decoration: none;
    text-transform: uppercase;
    box-sizing: border-box;
    cursor: pointer;
    transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease, transform 0.3s ease;
}

    #portfolio .portfolio-card a:hover,
    #portfolio .portfolio-card .portfolio-view:hover,
    #portfolio .portfolio-card button:hover,
    #portfolio .category-card a:hover,
    #portfolio .category-card .category-view:hover,
    #portfolio .category-card button:hover {
        background: #ffffff;
        color: #111111 !important;
        border-color: #ffffff;
        transform: translateY(-2px);
    }

/* =========================================================
   REMOVE OLD BROKEN OVERRIDES
   ========================================================= */

#portfolio .category-card::before,
#portfolio .portfolio-card::before {
    content: none !important;
}

#portfolio .category-card:hover::before,
#portfolio .category-card:hover::after,
#portfolio .portfolio-card:hover::before {
    opacity: 1;
}

#portfolio .category-card h3,
#portfolio .category-card .category-title,
#portfolio .portfolio-card h3,
#portfolio .portfolio-card .card-title {
    opacity: 1 !important;
    visibility: visible !important;
    display: block !important;
}

#portfolio .category-card a,
#portfolio .category-card button,
#portfolio .portfolio-card a,
#portfolio .portfolio-card button {
    opacity: 1 !important;
    visibility: visible !important;
    display: inline-flex !important;
}

/* =========================================================
   DESKTOP CARD HEIGHT
   ========================================================= */

@media (min-width: 1200px) {
    #portfolio .portfolio-card,
    #portfolio .category-card {
        height: 400px;
    }
}

/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 991px) {

    #portfolio.portfolio-section {
        padding: 55px 4%;
    }

    #portfolio .portfolio-grid,
    #portfolio .portfolio-cards,
    #portfolio .portfolio-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 14px;
    }

    #portfolio .portfolio-card,
    #portfolio .category-card {
        height: 350px;
    }

        #portfolio .portfolio-card .portfolio-content,
        #portfolio .category-card .category-content,
        #portfolio .category-card .category-overlay,
        #portfolio .category-card .category-info {
            padding: 22px;
        }

        #portfolio .portfolio-card h3,
        #portfolio .portfolio-card .card-title,
        #portfolio .category-card h3,
        #portfolio .category-card .category-title {
            font-size: 27px;
        }
}

/* =========================================================
   MOBILE
   2 x 2 PORTFOLIO GRID
   ========================================================= */

@media (max-width: 600px) {

    #portfolio.portfolio-section {
        width: 100%;
        padding: 42px 14px;
        overflow: hidden;
    }

    #portfolio .portfolio-container {
        width: 100%;
    }

    #portfolio .portfolio-heading,
    #portfolio .portfolio-intro,
    #portfolio .portfolio-description {
        margin-bottom: 24px;
        text-align: left;
    }

        #portfolio .portfolio-heading h2 {
            font-size: 30px;
            margin-bottom: 10px;
        }

        #portfolio .portfolio-intro p,
        #portfolio .portfolio-description p {
            font-size: 14px;
            line-height: 1.65;
        }

    /* EXACTLY 2 COLUMNS ON MOBILE */
    #portfolio .portfolio-grid,
    #portfolio .portfolio-cards,
    #portfolio .portfolio-list {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 10px !important;
        width: 100%;
    }

    #portfolio .portfolio-card,
    #portfolio .category-card {
        width: 100% !important;
        height: 235px !important;
        min-height: 235px !important;
        max-height: 235px !important;
        border: 1px solid #cfc6b9 !important;
        overflow: hidden !important;
    }

        #portfolio .portfolio-card .portfolio-content,
        #portfolio .category-card .category-content,
        #portfolio .category-card .category-overlay,
        #portfolio .category-card .category-info {
            padding: 14px !important;
        }

    #portfolio .portfolio-number,
    #portfolio .category-number {
        top: 12px;
        left: 13px;
        font-size: 9px;
        letter-spacing: 1.5px;
    }

    #portfolio .portfolio-card .card-logo,
    #portfolio .category-card .card-logo {
        top: 10px;
        right: 10px;
        max-width: 34px;
        max-height: 34px;
    }

    #portfolio .portfolio-card h3,
    #portfolio .portfolio-card .card-title,
    #portfolio .category-card h3,
    #portfolio .category-card .category-title {
        margin-bottom: 10px !important;
        font-size: 18px !important;
        line-height: 1.1 !important;
        letter-spacing: 0.3px;
        color: #ffffff !important;
    }

    #portfolio .portfolio-card a,
    #portfolio .portfolio-card .portfolio-view,
    #portfolio .portfolio-card button,
    #portfolio .category-card a,
    #portfolio .category-card .category-view,
    #portfolio .category-card button {
        min-width: 0 !important;
        width: auto !important;
        height: 34px !important;
        padding: 0 11px !important;
        font-size: 8px !important;
        letter-spacing: 1px !important;
        color: #ffffff !important;
        background: rgba(0, 0, 0, 0.9) !important;
    }
}

/* =========================================================
   SMALL MOBILE
   ========================================================= */

@media (max-width: 380px) {

    #portfolio.portfolio-section {
        padding-left: 10px;
        padding-right: 10px;
    }

    #portfolio .portfolio-grid,
    #portfolio .portfolio-cards,
    #portfolio .portfolio-list {
        gap: 8px !important;
    }

    #portfolio .portfolio-card,
    #portfolio .category-card {
        height: 205px !important;
        min-height: 205px !important;
        max-height: 205px !important;
    }

        #portfolio .portfolio-card h3,
        #portfolio .portfolio-card .card-title,
        #portfolio .category-card h3,
        #portfolio .category-card .category-title {
            font-size: 16px !important;
        }

        #portfolio .portfolio-card a,
        #portfolio .category-card a {
            height: 31px !important;
            padding: 0 9px !important;
            font-size: 7px !important;
        }
}
/* =========================================================
   RG PHOTOGRAPHY
   HOMEPAGE PORTFOLIO - FINAL WEDDING STYLE
   ========================================================= */


/* ---------------------------------------------------------
   PORTFOLIO SECTION
   --------------------------------------------------------- */

#portfolio.portfolio-section,
#portfolio .portfolio-section {
    width: 100%;
    background: #ffffff;
    padding: 80px 5%;
    box-sizing: border-box;
    overflow: hidden;
}

#portfolio .portfolio-container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    box-sizing: border-box;
}


/* ---------------------------------------------------------
   PORTFOLIO INTRO
   Make it look like the wedding section introduction
   --------------------------------------------------------- */

#portfolio .portfolio-heading,
#portfolio .portfolio-intro,
#portfolio .portfolio-header {
    text-align: center;
    margin: 0 auto 45px;
    max-width: 850px;
}

    #portfolio .portfolio-heading h2,
    #portfolio .portfolio-intro h2,
    #portfolio .portfolio-header h2 {
        margin: 0 0 15px;
        font-family: Georgia, "Times New Roman", serif;
        font-size: clamp(32px, 4vw, 52px);
        font-weight: 400;
        line-height: 1.15;
        letter-spacing: 1px;
        color: #171717;
    }

    #portfolio .portfolio-heading p,
    #portfolio .portfolio-intro p,
    #portfolio .portfolio-header p {
        margin: 0 auto;
        font-family: Arial, Helvetica, sans-serif;
        font-size: 16px;
        line-height: 1.8;
        letter-spacing: 0.3px;
        color: #555555;
    }


/* ---------------------------------------------------------
   IF THE INTRO IS A DIRECT PARAGRAPH
   --------------------------------------------------------- */

#portfolio > p:first-child,
#portfolio .portfolio-container > p:first-child {
    max-width: 850px;
    margin: 0 auto 45px;
    text-align: center;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 16px;
    line-height: 1.8;
    letter-spacing: 0.3px;
    color: #555555;
}


/* ---------------------------------------------------------
   PORTFOLIO GRID
   --------------------------------------------------------- */

#portfolio .portfolio-grid,
#portfolio .categories-grid,
#portfolio .portfolio-categories {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}


/* ---------------------------------------------------------
   PORTFOLIO CARD
   Wedding-style clean border
   --------------------------------------------------------- */

#portfolio .category-card {
    position: relative;
    width: 100%;
    min-width: 0;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background: #111111;
    border: 1px solid #d8d8d8;
    box-sizing: border-box;
    cursor: pointer;
}


    /* ---------------------------------------------------------
   REMOVE ALL OLD OVERLAY EFFECTS
   --------------------------------------------------------- */

    #portfolio .category-card::before,
    #portfolio .category-card::after,
    #portfolio .category-card:hover::before,
    #portfolio .category-card:hover::after,
    #portfolio .category-card .category-overlay,
    #portfolio .category-card:hover .category-overlay {
        background: transparent !important;
        background-image: none !important;
        opacity: 0 !important;
        visibility: hidden !important;
        display: none !important;
        content: none !important;
    }


    /* ---------------------------------------------------------
   IMAGE - NATURAL / NO DARK EFFECT
   --------------------------------------------------------- */

    #portfolio .category-card img,
    #portfolio .category-card > img,
    #portfolio .category-card .category-image img {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        display: block;
        object-fit: cover;
        opacity: 1 !important;
        visibility: visible !important;
        filter: none !important;
        -webkit-filter: none !important;
        transform: none;
        transition: transform 0.6s ease;
    }


    /* Small elegant zoom only on hover */
    #portfolio .category-card:hover img,
    #portfolio .category-card:hover > img,
    #portfolio .category-card:hover .category-image img {
        filter: none !important;
        -webkit-filter: none !important;
        opacity: 1 !important;
        transform: scale(1.03);
    }


    /* ---------------------------------------------------------
   PORTFOLIO CONTENT
   Move text to bottom like WEDDING section
   --------------------------------------------------------- */

    #portfolio .category-content,
    #portfolio .category-card .category-content,
    #portfolio .category-card .portfolio-info {
        position: absolute !important;
        left: 0;
        right: 0;
        bottom: 0;
        top: auto !important;
        width: 100%;
        padding: 70px 28px 25px;
        box-sizing: border-box;
        z-index: 5;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-end;
        background: transparent !important;
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: none;
    }


    /* ---------------------------------------------------------
   NUMBER - WEDDING STYLE
   --------------------------------------------------------- */

    #portfolio .category-card .category-number,
    #portfolio .category-card .portfolio-number,
    #portfolio .category-card .number {
        position: absolute;
        top: 18px;
        left: 18px;
        z-index: 6;
        width: 32px;
        height: 32px;
        display: flex;
        align-items: center;
        justify-content: center;
        border: 1px solid rgba(255,255,255,0.8);
        background: rgba(0,0,0,0.45);
        color: #ffffff;
        font-family: Arial, Helvetica, sans-serif;
        font-size: 11px;
        font-weight: 600;
        letter-spacing: 1px;
    }


    /* ---------------------------------------------------------
   TITLE
   --------------------------------------------------------- */

    #portfolio .category-card h3,
    #portfolio .category-card .category-title,
    #portfolio .category-card .card-title,
    #portfolio .category-card .portfolio-title {
        position: relative;
        margin: 0 0 12px;
        color: #ffffff !important;
        font-family: Arial, Helvetica, sans-serif;
        font-size: clamp(14px, 1.4vw, 18px);
        font-weight: 700;
        line-height: 1.2;
        letter-spacing: 1.2px;
        text-transform: uppercase;
        text-shadow: 0 1px 3px rgba(0,0,0,0.9), 0 2px 8px rgba(0,0,0,0.7);
        opacity: 1 !important;
        visibility: visible !important;
    }


    /* ---------------------------------------------------------
   VIEW MORE / MORE BUTTON
   Wedding-style button
   --------------------------------------------------------- */

    #portfolio .category-card a,
    #portfolio .category-card .category-button,
    #portfolio .category-card .portfolio-view,
    #portfolio .category-card .view-more {
        position: relative;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 105px;
        min-height: 38px;
        padding: 10px 15px;
        box-sizing: border-box;
        border: 1px solid rgba(255,255,255,0.9);
        background: rgba(0,0,0,0.55);
        color: #ffffff !important;
        font-family: Arial, Helvetica, sans-serif;
        font-size: 10px;
        font-weight: 700;
        line-height: 1;
        letter-spacing: 1.5px;
        text-transform: uppercase;
        text-decoration: none;
        opacity: 1 !important;
        visibility: visible !important;
        transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease;
    }


    /* Button hover */
    #portfolio .category-card:hover a,
    #portfolio .category-card:hover .category-button,
    #portfolio .category-card:hover .portfolio-view,
    #portfolio .category-card:hover .view-more {
        background: #ffffff;
        border-color: #ffffff;
        color: #111111 !important;
    }


    /* ---------------------------------------------------------
   REMOVE OLD BLACK TEXT FROM TOP
   --------------------------------------------------------- */

    #portfolio .category-card > h3,
    #portfolio .category-card > .category-title,
    #portfolio .category-card > .card-title {
        position: absolute !important;
        top: auto !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 25px !important;
        margin: 0 28px !important;
        color: #ffffff !important;
        z-index: 10;
    }


    /* ---------------------------------------------------------
   KEEP TEXT VISIBLE
   --------------------------------------------------------- */

    #portfolio .category-card h3,
    #portfolio .category-card h3 *,
    #portfolio .category-card .category-title,
    #portfolio .category-card .category-title *,
    #portfolio .category-card .category-content,
    #portfolio .category-card .category-content * {
        opacity: 1 !important;
        visibility: visible !important;
    }


/* ---------------------------------------------------------
   DESKTOP
   --------------------------------------------------------- */

@media (min-width: 901px) {

    #portfolio.portfolio-section {
        padding: 85px 5%;
    }

    #portfolio .portfolio-grid,
    #portfolio .categories-grid,
    #portfolio .portfolio-categories {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 18px;
    }

    #portfolio .category-card {
        aspect-ratio: 16 / 10;
    }
}


/* ---------------------------------------------------------
   TABLET
   --------------------------------------------------------- */

@media (max-width: 900px) and (min-width: 601px) {

    #portfolio.portfolio-section {
        padding: 65px 4%;
    }

    #portfolio .portfolio-grid,
    #portfolio .categories-grid,
    #portfolio .portfolio-categories {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
    }

    #portfolio .category-card {
        aspect-ratio: 1 / 1;
    }

        #portfolio .category-content,
        #portfolio .category-card .category-content {
            padding: 55px 20px 20px;
        }
}


/* ---------------------------------------------------------
   MOBILE
   EXACTLY 2 x 2
   --------------------------------------------------------- */

@media (max-width: 600px) {

    #portfolio.portfolio-section,
    #portfolio .portfolio-section {
        padding: 50px 14px 55px;
    }

    #portfolio .portfolio-container {
        width: 100%;
    }


    /* Intro */
    #portfolio .portfolio-heading,
    #portfolio .portfolio-intro,
    #portfolio .portfolio-header {
        margin-bottom: 28px;
        padding: 0 8px;
    }

        #portfolio .portfolio-heading h2,
        #portfolio .portfolio-intro h2,
        #portfolio .portfolio-header h2 {
            font-size: 30px;
            letter-spacing: 0.5px;
        }

        #portfolio .portfolio-heading p,
        #portfolio .portfolio-intro p,
        #portfolio .portfolio-header p,
        #portfolio > p:first-child,
        #portfolio .portfolio-container > p:first-child {
            font-size: 14px;
            line-height: 1.7;
        }


    /* EXACT 2 x 2 */
    #portfolio .portfolio-grid,
    #portfolio .categories-grid,
    #portfolio .portfolio-categories {
        width: 100%;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }


    /* Square cards */
    #portfolio .category-card {
        width: 100%;
        aspect-ratio: 1 / 1;
        border: 1px solid #d5d5d5;
    }


        /* Natural image */
        #portfolio .category-card img,
        #portfolio .category-card > img,
        #portfolio .category-card .category-image img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            filter: none !important;
            -webkit-filter: none !important;
            opacity: 1 !important;
        }


        /* Text bottom */
        #portfolio .category-content,
        #portfolio .category-card .category-content,
        #portfolio .category-card .portfolio-info {
            padding: 45px 10px 10px;
            bottom: 0;
        }


        /* Number */
        #portfolio .category-card .category-number,
        #portfolio .category-card .portfolio-number,
        #portfolio .category-card .number {
            top: 10px;
            left: 10px;
            width: 28px;
            height: 28px;
            font-size: 9px;
        }


        /* Title */
        #portfolio .category-card h3,
        #portfolio .category-card .category-title,
        #portfolio .category-card .card-title,
        #portfolio .category-card .portfolio-title {
            margin-bottom: 7px;
            font-size: 11px;
            line-height: 1.2;
            letter-spacing: 0.7px;
        }


        /* Button */
        #portfolio .category-card a,
        #portfolio .category-card .category-button,
        #portfolio .category-card .portfolio-view,
        #portfolio .category-card .view-more {
            min-width: 78px;
            min-height: 29px;
            padding: 7px 9px;
            font-size: 8px;
            letter-spacing: 1px;
        }


        /* Direct title fix */
        #portfolio .category-card > h3,
        #portfolio .category-card > .category-title,
        #portfolio .category-card > .card-title {
            bottom: 10px !important;
            margin: 0 10px !important;
        }
}


/* ---------------------------------------------------------
   VERY SMALL MOBILE
   --------------------------------------------------------- */

@media (max-width: 380px) {

    #portfolio.portfolio-section {
        padding-left: 10px;
        padding-right: 10px;
    }

    #portfolio .portfolio-grid,
    #portfolio .categories-grid,
    #portfolio .portfolio-categories {
        gap: 6px;
    }

    #portfolio .category-card h3,
    #portfolio .category-card .category-title,
    #portfolio .category-card .card-title,
    #portfolio .category-card .portfolio-title {
        font-size: 9px;
    }

    #portfolio .category-card a,
    #portfolio .category-card .category-button,
    #portfolio .category-card .portfolio-view,
    #portfolio .category-card .view-more {
        min-width: 65px;
        min-height: 26px;
        padding: 6px 7px;
        font-size: 7px;
    }
}


/* ---------------------------------------------------------
   FINAL OVERRIDE
   Prevent old portfolio CSS from adding image effects
   --------------------------------------------------------- */

#portfolio .category-card,
#portfolio .category-card:hover {
    filter: none !important;
}

    #portfolio .category-card img,
    #portfolio .category-card:hover img {
        filter: none !important;
        -webkit-filter: none !important;
    }

    #portfolio .category-card::before,
    #portfolio .category-card::after,
    #portfolio .category-card:hover::before,
    #portfolio .category-card:hover::after {
        display: none !important;
        opacity: 0 !important;
        visibility: hidden !important;
    }
/* ============================================================
   RG PHOTOGRAPHY - FINAL PORTFOLIO CSS FIX
   CSS ONLY - ADD AT VERY END OF style.css
   ============================================================ */


/* ============================================================
   1. PORTFOLIO SECTION
   ============================================================ */

#portfolio .portfolio-section,
#portfolio.portfolio-section {
    width: 100%;
    background: #fff;
    padding: 80px 5%;
    box-sizing: border-box;
    overflow: hidden;
}

#portfolio .portfolio-container,
#portfolio .portfolio-grid {
    width: 100%;
    max-width: 1360px;
    margin: 0 auto;
    box-sizing: border-box;
}


/* ============================================================
   2. PORTFOLIO INTRO TEXT - PROFESSIONAL STYLE
   ============================================================ */

#portfolio .portfolio-heading,
#portfolio .portfolio-intro,
#portfolio .portfolio-description {
    max-width: 850px;
    margin: 0 auto 55px auto;
    text-align: center;
    font-family: "Montserrat", Arial, sans-serif !important;
    font-size: 18px !important;
    font-weight: 400 !important;
    line-height: 1.8 !important;
    letter-spacing: 0.4px !important;
    color: #555 !important;
}


/* ============================================================
   3. PORTFOLIO CARDS
   ============================================================ */

#portfolio .category-card,
#portfolio .portfolio-card {
    position: relative !important;
    width: 100%;
    overflow: hidden !important;
    background: #111;
    border: 1px solid #d6b45a !important;
    box-sizing: border-box;
    isolation: isolate;
}


    /* ============================================================
   4. PORTFOLIO IMAGES - NO DARK EFFECT
   ============================================================ */

    #portfolio .category-card img,
    #portfolio .portfolio-card img {
        width: 100% !important;
        height: 100% !important;
        display: block !important;
        object-fit: cover !important;
        opacity: 1 !important;
        filter: none !important;
        transform: none !important;
        transition: transform 0.5s ease !important;
    }


    /* Keep image normal on hover */

    #portfolio .category-card:hover img,
    #portfolio .portfolio-card:hover img {
        opacity: 1 !important;
        filter: none !important;
        transform: scale(1.02) !important;
    }


    /* ============================================================
   5. REMOVE OLD PORTFOLIO OVERLAY
   ============================================================ */

    #portfolio .category-card::before,
    #portfolio .category-card::after,
    #portfolio .portfolio-card::before,
    #portfolio .portfolio-card::after {
        background: transparent !important;
        opacity: 0 !important;
        visibility: hidden !important;
        display: none !important;
    }


    /* ============================================================
   6. PORTFOLIO TEXT
   ============================================================ */

    #portfolio .category-card h3,
    #portfolio .category-card h2,
    #portfolio .category-card .card-title,
    #portfolio .category-card .category-title,
    #portfolio .portfolio-card h3,
    #portfolio .portfolio-card h2,
    #portfolio .portfolio-card .card-title {
        position: relative;
        z-index: 5;
        margin: 0 !important;
        font-family: "Montserrat", Arial, sans-serif !important;
        font-size: 15px !important;
        font-weight: 700 !important;
        line-height: 1.3 !important;
        letter-spacing: 1.8px !important;
        text-transform: uppercase !important;
        color: #fff !important;
        text-shadow: 0 2px 8px rgba(0,0,0,.65) !important;
    }


    /* ============================================================
   7. PORTFOLIO CARD CONTENT POSITION
   ============================================================ */

    #portfolio .category-card .category-content,
    #portfolio .category-card .card-content,
    #portfolio .portfolio-card .card-content {
        position: absolute !important;
        left: 20px !important;
        right: 20px !important;
        bottom: 20px !important;
        z-index: 10 !important;
    }


    /* ============================================================
   8. PORTFOLIO NUMBER BOX
   ============================================================ */

    #portfolio .category-number,
    #portfolio .card-number,
    #portfolio .category-card .number {
        position: absolute !important;
        top: 20px !important;
        left: 20px !important;
        z-index: 20 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        min-width: 42px !important;
        height: 42px !important;
        padding: 0 10px !important;
        box-sizing: border-box;
        background: rgba(10,10,10,.82) !important;
        border: 1px solid rgba(255,255,255,.8) !important;
        color: #fff !important;
        font-family: "Montserrat", Arial, sans-serif !important;
        font-size: 10px !important;
        font-weight: 700 !important;
        letter-spacing: 1px !important;
    }


/* ============================================================
   9. REMOVE "VIEW MORE" FROM INNER PORTFOLIO/GALLERY IMAGES
   ============================================================ */

/* Common inner gallery classes */

#portfolio .gallery-item .view-more,
#portfolio .gallery-card .view-more,
#portfolio .gallery-image .view-more,
#portfolio .photo-card .view-more,
#portfolio .portfolio-gallery .view-more,
#portfolio .portfolio-grid .view-more,
#portfolio .portfolio-inner .view-more,
#portfolio .gallery-item .view-more-btn,
#portfolio .gallery-card .view-more-btn,
#portfolio .gallery-image .view-more-btn,
#portfolio .photo-card .view-more-btn,
#portfolio .portfolio-gallery .view-more-btn,
#portfolio .portfolio-grid .view-more-btn,
#portfolio .portfolio-inner .view-more-btn {
    display: none !important;
}


/* ============================================================
   10. INNER GALLERY BUTTONS
   Hide links/buttons that contain "VIEW MORE"
   when they are inside gallery/image containers.
   ============================================================ */

.gallery-item a,
.gallery-card a,
.gallery-image a,
.photo-card a,
.portfolio-gallery a,
.portfolio-inner a {
    /* Do not hide the entire link here.
       Only the selectors above are hidden. */
}


/* ============================================================
   11. WEDDING INNER GALLERY
   ============================================================ */

.wedding-gallery .view-more,
.wedding-gallery .view-more-btn,
.wedding-gallery .gallery-button,
.wedding-gallery .gallery-btn {
    display: none !important;
}


/* ============================================================
   12. PRE-WEDDING INNER GALLERY
   ============================================================ */

.pre-wedding-gallery .view-more,
.pre-wedding-gallery .view-more-btn,
.pre-wedding-gallery .gallery-button,
.pre-wedding-gallery .gallery-btn {
    display: none !important;
}


/* ============================================================
   13. MATERNITY INNER GALLERY
   ============================================================ */

.maternity-gallery .view-more,
.maternity-gallery .view-more-btn,
.maternity-gallery .gallery-button,
.maternity-gallery .gallery-btn {
    display: none !important;
}


/* ============================================================
   14. BABY INNER GALLERY
   ============================================================ */

.baby-gallery .view-more,
.baby-gallery .view-more-btn,
.baby-gallery .gallery-button,
.baby-gallery .gallery-btn {
    display: none !important;
}


/* ============================================================
   15. GENERAL DETAIL-PAGE IMAGE BUTTONS
   ============================================================ */

.gallery-item .view-btn,
.gallery-card .view-btn,
.photo-card .view-btn,
.portfolio-inner .view-btn,
.portfolio-gallery .view-btn {
    display: none !important;
}


/* ============================================================
   16. MOBILE PORTFOLIO - EXACT 2 x 2
   ============================================================ */

@media (max-width: 600px) {

    #portfolio .portfolio-grid,
    #portfolio .category-grid,
    #portfolio .categories-grid {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 6px !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }


    #portfolio .category-card,
    #portfolio .portfolio-card {
        width: 100% !important;
        min-width: 0 !important;
        aspect-ratio: 1 / 1 !important;
        height: auto !important;
        margin: 0 !important;
    }


        #portfolio .category-card img,
        #portfolio .portfolio-card img {
            width: 100% !important;
            height: 100% !important;
            object-fit: cover !important;
        }


        #portfolio .category-card .category-content,
        #portfolio .category-card .card-content,
        #portfolio .portfolio-card .card-content {
            left: 10px !important;
            right: 10px !important;
            bottom: 10px !important;
        }


        #portfolio .category-card h3,
        #portfolio .category-card h2,
        #portfolio .category-card .card-title,
        #portfolio .category-card .category-title {
            font-size: 9px !important;
            letter-spacing: 1px !important;
            line-height: 1.3 !important;
        }


        #portfolio .category-number,
        #portfolio .card-number,
        #portfolio .category-card .number {
            top: 10px !important;
            left: 10px !important;
            min-width: 32px !important;
            height: 32px !important;
            font-size: 8px !important;
        }


    #portfolio .portfolio-heading,
    #portfolio .portfolio-intro,
    #portfolio .portfolio-description {
        font-size: 13px !important;
        line-height: 1.7 !important;
        margin-bottom: 30px !important;
        padding: 0 10px !important;
    }


    #portfolio .portfolio-section,
    #portfolio.portfolio-section {
        padding: 45px 10px !important;
    }
}


/* ============================================================
   17. SMALL MOBILE
   ============================================================ */

@media (max-width: 400px) {

    #portfolio .portfolio-grid,
    #portfolio .category-grid,
    #portfolio .categories-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 5px !important;
    }


    #portfolio .category-card h3,
    #portfolio .category-card h2,
    #portfolio .category-card .card-title,
    #portfolio .category-card .category-title {
        font-size: 8px !important;
        letter-spacing: .8px !important;
    }
}


/* ============================================================
   END FINAL CSS FIX
   ============================================================ */

/* ============================================================
   RG PHOTOGRAPHY — FINAL VIEW MORE REMOVAL
   IMPORTANT: Keep all existing website features.
   This block only removes unwanted VIEW MORE buttons from
   image cards / portfolio cards / gallery cards.
   ============================================================ */

/* Actual VIEW MORE elements */
.card-view-more,
.portfolio-view {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

/* Portfolio / wedding / gallery card variants */
.gallery-item .view-more,
.gallery-item .view-more-btn,
.gallery-item .gallery-button,
.gallery-item .gallery-btn,
.gallery-item .view-btn,
.gallery-card .view-more,
.gallery-card .view-more-btn,
.gallery-card .gallery-button,
.gallery-card .gallery-btn,
.gallery-card .view-btn,
.photo-card .view-more,
.photo-card .view-more-btn,
.photo-card .gallery-button,
.photo-card .gallery-btn,
.photo-card .view-btn,
.wedding-gallery .view-more,
.wedding-gallery .view-more-btn,
.wedding-gallery .gallery-button,
.wedding-gallery .gallery-btn,
.wedding-gallery .view-btn,
.pre-wedding-gallery .view-more,
.pre-wedding-gallery .view-more-btn,
.pre-wedding-gallery .gallery-button,
.pre-wedding-gallery .gallery-btn,
.pre-wedding-gallery .view-btn,
.post-wedding-gallery .view-more,
.post-wedding-gallery .view-more-btn,
.post-wedding-gallery .gallery-button,
.post-wedding-gallery .gallery-btn,
.post-wedding-gallery .view-btn,
.baby-gallery .view-more,
.baby-gallery .view-more-btn,
.baby-gallery .gallery-button,
.baby-gallery .gallery-btn,
.baby-gallery .view-btn,
.maternity-gallery .view-more,
.maternity-gallery .view-more-btn,
.maternity-gallery .gallery-button,
.maternity-gallery .gallery-btn,
.maternity-gallery .view-btn {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

/* Remove CSS-generated VIEW MORE buttons from portfolio gallery cards */
.gallery-grid .gallery-item::after,
.gallery-grid .gallery-item:hover::after,
.gallery-item::after,
.gallery-item:hover::after {
    content: none !important;
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
}

/* Keep the image and category title fully visible */
.gallery-item > span,
.portfolio-card > span {
    visibility: visible !important;
    opacity: 1 !important;
}

/* Do NOT hide section-level links such as:
   VIEW ALL PORTFOLIO / VIEW MORE VIDEOS */
.text-link {
    visibility: visible;
    opacity: 1;
}

/* =========================================================
   FINAL PORTFOLIO TITLE POSITION FIX
   Keep portfolio titles at the bottom-left of each image,
   matching the wedding-card presentation.
   ========================================================= */

#portfolio .portfolio-card {
    position: relative !important;
    overflow: hidden !important;
}

    #portfolio .portfolio-card .portfolio-overlay {
        position: absolute !important;
        inset: 0 !important;
        width: 100% !important;
        height: 100% !important;
        display: block !important;
        padding: 0 !important;
        box-sizing: border-box !important;
    }

    #portfolio .portfolio-card .portfolio-content {
        position: absolute !important;
        top: auto !important;
        left: 28px !important;
        right: 28px !important;
        bottom: 28px !important;
        width: auto !important;
        height: auto !important;
        margin: 0 !important;
        padding: 0 !important;
        display: block !important;
        transform: none !important;
        z-index: 20 !important;
    }

        #portfolio .portfolio-card .portfolio-content h3 {
            position: relative !important;
            top: auto !important;
            left: auto !important;
            bottom: auto !important;
            margin: 0 !important;
            padding: 14px 18px !important;
            display: inline-block !important;
            width: auto !important;
            max-width: calc(100% - 10px) !important;
            background: rgba(0, 0, 0, 0.92) !important;
            color: #ffffff !important;
            font-family: "Inter", Arial, sans-serif !important;
            font-size: 14px !important;
            font-weight: 800 !important;
            line-height: 1.1 !important;
            letter-spacing: 1.8px !important;
            text-transform: uppercase !important;
            white-space: nowrap !important;
            text-shadow: none !important;
            border-left: 2px solid #c9a227 !important;
            box-sizing: border-box !important;
        }

    /* The number remains in the top-left corner. */
    #portfolio .portfolio-card .portfolio-number {
        position: absolute !important;
        top: 20px !important;
        left: 22px !important;
        z-index: 21 !important;
    }

    /* Keep unwanted View More buttons completely removed. */
    #portfolio .portfolio-card .portfolio-view,
    #portfolio .portfolio-card .card-view-more,
    #portfolio .portfolio-card .portfolio-content > a,
    #portfolio .portfolio-card::after {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        content: none !important;
    }

/* Responsive title position */
@media (max-width: 900px) {
    #portfolio .portfolio-card .portfolio-content {
        left: 16px !important;
        right: 16px !important;
        bottom: 16px !important;
    }

        #portfolio .portfolio-card .portfolio-content h3 {
            padding: 11px 14px !important;
            font-size: 12px !important;
            letter-spacing: 1.4px !important;
        }

    #portfolio .portfolio-card .portfolio-number {
        top: 14px !important;
        left: 15px !important;
    }
}

@media (max-width: 600px) {
    #portfolio .portfolio-card .portfolio-content {
        left: 9px !important;
        right: 9px !important;
        bottom: 9px !important;
    }

        #portfolio .portfolio-card .portfolio-content h3 {
            padding: 8px 10px !important;
            font-size: 9px !important;
            letter-spacing: 1px !important;
        }

    #portfolio .portfolio-card .portfolio-number {
        top: 9px !important;
        left: 9px !important;
    }
}
/* =========================================================
   FINAL PORTFOLIO IMAGE TITLE FIX
   Make Portfolio titles look like Wedding image titles
   No VIEW MORE changes
   ========================================================= */

#portfolio .portfolio-card > span {
    position: absolute !important;
    left: 24px !important;
    bottom: 28px !important;
    top: auto !important;
    right: auto !important;
    z-index: 10 !important;
    display: block !important;
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    color: #ffffff !important;
    font-family: "Cormorant Garamond", Georgia, serif !important;
    font-size: 42px !important;
    font-weight: 500 !important;
    line-height: 1 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    white-space: nowrap !important;
    text-shadow: 0 2px 10px rgba(0,0,0,.65) !important;
}

/* Keep portfolio number at top-left */
#portfolio .portfolio-card .portfolio-number {
    position: absolute !important;
    top: 20px !important;
    left: 22px !important;
    bottom: auto !important;
    z-index: 11 !important;
}

/* Make sure the title stays above the image */
#portfolio .portfolio-card {
    position: relative !important;
    overflow: hidden !important;
}

/* Tablet */
@media (max-width: 900px) {
    #portfolio .portfolio-card > span {
        left: 16px !important;
        bottom: 20px !important;
        font-size: 32px !important;
    }

    #portfolio .portfolio-card .portfolio-number {
        top: 14px !important;
        left: 15px !important;
    }
}

/* Mobile */
@media (max-width: 600px) {
    #portfolio .portfolio-card > span {
        left: 10px !important;
        bottom: 14px !important;
        font-size: 22px !important;
        letter-spacing: 0 !important;
    }

    #portfolio .portfolio-card .portfolio-number {
        top: 10px !important;
        left: 10px !important;
    }
}
/* =========================================================
   HOMEPAGE PORTFOLIO TITLE - FINAL POSITION FIX
   ========================================================= */

/* Desktop */
#portfolio {
    position: relative;
    overflow: visible !important;
}

    #portfolio .portfolio-container {
        position: relative;
        overflow: visible !important;
    }

    /* Portfolio heading/title area */
    #portfolio .portfolio-heading,
    #portfolio .portfolio-header,
    #portfolio .portfolio-title,
    #portfolio .portfolio-intro {
        position: relative !important;
        top: auto !important;
        transform: none !important;
        margin-top: 0 !important;
    }

        /* Main "the wedding day." title */
        #portfolio h1,
        #portfolio .portfolio-heading h1,
        #portfolio .portfolio-title h1 {
            position: relative !important;
            top: auto !important;
            transform: none !important;
            margin-top: 0 !important;
            margin-bottom: 30px !important;
            padding-top: 0 !important;
            font-family: Georgia, "Times New Roman", serif !important;
            font-size: clamp(42px, 5vw, 76px) !important;
            font-weight: 400 !important;
            font-style: italic !important;
            line-height: 1.05 !important;
            color: #14263f !important;
            opacity: 1 !important;
            visibility: visible !important;
        }

        /* Make sure the portfolio introduction stays beside/below
   the title instead of overlapping it */
        #portfolio .portfolio-intro p,
        #portfolio .portfolio-description,
        #portfolio .portfolio-info p {
            position: relative !important;
            top: auto !important;
            transform: none !important;
            margin: 0 !important;
            padding: 0 !important;
            color: #4d5661 !important;
            font-size: 16px !important;
            line-height: 1.6 !important;
        }

    /* =========================================================
   PORTFOLIO HEADER LAYOUT
   ========================================================= */

    #portfolio .portfolio-heading,
    #portfolio .portfolio-header {
        display: flex !important;
        align-items: flex-end !important;
        justify-content: space-between !important;
        gap: 40px !important;
        width: 100% !important;
        margin-bottom: 38px !important;
    }

        /* Title side */
        #portfolio .portfolio-heading h1,
        #portfolio .portfolio-header h1 {
            flex: 1 1 55% !important;
        }

        /* Description side */
        #portfolio .portfolio-heading p,
        #portfolio .portfolio-header p {
            flex: 0 1 400px !important;
            max-width: 400px !important;
        }

    /* =========================================================
   IMPORTANT:
   REMOVE ANY OLD NEGATIVE POSITIONING
   ========================================================= */

    #portfolio h1 {
        margin-top: 0 !important;
    }

    #portfolio .portfolio-heading {
        margin-top: 0 !important;
    }

    #portfolio .portfolio-header {
        margin-top: 0 !important;
    }


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 700px) {

    #portfolio {
        padding-top: 25px !important;
        overflow: visible !important;
    }

        #portfolio .portfolio-container {
            padding-left: 14px !important;
            padding-right: 14px !important;
            overflow: visible !important;
        }

        #portfolio .portfolio-heading,
        #portfolio .portfolio-header {
            display: block !important;
            width: 100% !important;
            margin-top: 0 !important;
            margin-bottom: 25px !important;
            padding: 0 !important;
            transform: none !important;
            position: relative !important;
        }

            #portfolio h1,
            #portfolio .portfolio-heading h1,
            #portfolio .portfolio-title h1,
            #portfolio .portfolio-header h1 {
                display: block !important;
                position: relative !important;
                top: auto !important;
                left: auto !important;
                transform: none !important;
                margin: 0 0 14px 0 !important;
                padding: 0 !important;
                font-size: 42px !important;
                line-height: 1.05 !important;
                text-align: left !important;
                white-space: normal !important;
                color: #14263f !important;
                opacity: 1 !important;
                visibility: visible !important;
            }

            #portfolio .portfolio-heading p,
            #portfolio .portfolio-header p,
            #portfolio .portfolio-intro p {
                display: block !important;
                position: relative !important;
                top: auto !important;
                left: auto !important;
                transform: none !important;
                width: 100% !important;
                max-width: 100% !important;
                margin: 0 0 24px 0 !important;
                padding: 0 !important;
                font-size: 14px !important;
                line-height: 1.6 !important;
                text-align: left !important;
                color: #4d5661 !important;
            }
}


/* =========================================================
   VERY SMALL MOBILE
   ========================================================= */

@media (max-width: 400px) {

    #portfolio {
        padding-top: 20px !important;
    }

        #portfolio h1,
        #portfolio .portfolio-heading h1,
        #portfolio .portfolio-title h1,
        #portfolio .portfolio-header h1 {
            font-size: 36px !important;
            margin-bottom: 12px !important;
        }

        #portfolio .portfolio-heading p,
        #portfolio .portfolio-header p {
            font-size: 13px !important;
        }
}

/* =========================================================
   RG PHOTOGRAPHY — HOMEPAGE PORTFOLIO FINAL FIX
   Added at the VERY END so it overrides older portfolio rules.
   Fixes heading position, prevents header overlap, and keeps
   portfolio images clean without dark image effects.
   ========================================================= */

/* Portfolio section must create enough space below fixed header */
#portfolio.portfolio-section {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 135px 6% 80px !important;
    background: #ffffff !important;
    box-sizing: border-box !important;
    overflow: visible !important;
    isolation: isolate !important;
    scroll-margin-top: 110px !important;
}

    /* Main portfolio container */
    #portfolio.portfolio-section .portfolio-container {
        position: relative !important;
        display: block !important;
        width: 100% !important;
        max-width: 1400px !important;
        margin: 0 auto !important;
        padding: 0 !important;
        box-sizing: border-box !important;
    }

    /* Correct homepage portfolio heading */
    #portfolio.portfolio-section .portfolio-section-heading {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        right: auto !important;
        bottom: auto !important;
        transform: none !important;
        display: flex !important;
        width: 100% !important;
        max-width: 1400px !important;
        margin: 0 auto 45px !important;
        padding: 0 !important;
        align-items: flex-end !important;
        justify-content: space-between !important;
        gap: 50px !important;
        box-sizing: border-box !important;
        overflow: visible !important;
        opacity: 1 !important;
        visibility: visible !important;
    }

        /* Left side of heading */
        #portfolio.portfolio-section .portfolio-section-heading > div:first-child {
            position: relative !important;
            display: block !important;
            width: auto !important;
            max-width: 750px !important;
            margin: 0 !important;
            padding: 0 !important;
            transform: none !important;
            overflow: visible !important;
        }

        /* Portfolio eyebrow */
        #portfolio.portfolio-section .portfolio-section-heading .eyebrow {
            display: block !important;
            position: relative !important;
            top: auto !important;
            left: auto !important;
            margin: 0 0 12px !important;
            padding: 0 !important;
            color: #a47b32 !important;
            background: transparent !important;
            font-family: Arial, Helvetica, sans-serif !important;
            font-size: 10px !important;
            font-weight: 700 !important;
            line-height: 1 !important;
            letter-spacing: 3px !important;
            text-align: left !important;
            transform: none !important;
            opacity: 1 !important;
            visibility: visible !important;
        }

        /* Main portfolio title — this is the important selector */
        #portfolio.portfolio-section .portfolio-section-heading h2,
        #portfolio.portfolio-section .portfolio-section-heading > div > h2 {
            display: block !important;
            position: relative !important;
            top: auto !important;
            left: auto !important;
            right: auto !important;
            bottom: auto !important;
            width: auto !important;
            max-width: 800px !important;
            margin: 0 !important;
            padding: 0 !important;
            color: #14263f !important;
            background: transparent !important;
            font-family: Georgia, "Times New Roman", serif !important;
            font-size: clamp(42px, 5vw, 68px) !important;
            font-weight: 400 !important;
            line-height: 1.05 !important;
            letter-spacing: -1.5px !important;
            text-align: left !important;
            white-space: normal !important;
            transform: none !important;
            opacity: 1 !important;
            visibility: visible !important;
        }

            /* Italic part of title */
            #portfolio.portfolio-section .portfolio-section-heading h2 em {
                display: inline !important;
                margin: 0 !important;
                padding: 0 !important;
                color: #14263f !important;
                font-family: Georgia, "Times New Roman", serif !important;
                font-style: italic !important;
                font-weight: 400 !important;
            }

        /* Description on right */
        #portfolio.portfolio-section .portfolio-section-heading > p {
            display: block !important;
            position: relative !important;
            top: auto !important;
            left: auto !important;
            right: auto !important;
            bottom: auto !important;
            flex: 0 0 390px !important;
            width: 390px !important;
            max-width: 390px !important;
            margin: 0 0 5px !important;
            padding: 0 !important;
            color: #555555 !important;
            background: transparent !important;
            font-family: Arial, Helvetica, sans-serif !important;
            font-size: 16px !important;
            font-weight: 400 !important;
            line-height: 1.7 !important;
            letter-spacing: .2px !important;
            text-align: left !important;
            transform: none !important;
            opacity: 1 !important;
            visibility: visible !important;
        }

    /* Portfolio grid */
    #portfolio.portfolio-section .portfolio-grid {
        position: relative !important;
        display: grid !important;
        width: 100% !important;
        max-width: 1400px !important;
        margin: 0 auto !important;
        padding: 0 !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 22px !important;
        box-sizing: border-box !important;
    }

    /* Portfolio cards */
    #portfolio.portfolio-section .portfolio-card {
        position: relative !important;
        display: block !important;
        width: 100% !important;
        height: 430px !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
        border: 0 !important;
        border-radius: 0 !important;
        background: #111111 !important;
        filter: none !important;
        box-sizing: border-box !important;
    }

        /* Images: no darkening/filter */
        #portfolio.portfolio-section .portfolio-card > img,
        #portfolio.portfolio-section .portfolio-card img {
            position: absolute !important;
            inset: 0 !important;
            display: block !important;
            width: 100% !important;
            height: 100% !important;
            margin: 0 !important;
            padding: 0 !important;
            object-fit: cover !important;
            object-position: center !important;
            border: 0 !important;
            filter: none !important;
            -webkit-filter: none !important;
            opacity: 1 !important;
            transform: none !important;
            transition: none !important;
            z-index: 1 !important;
        }

        /* Remove old pseudo overlays */
        #portfolio.portfolio-section .portfolio-card::before,
        #portfolio.portfolio-section .portfolio-card::after,
        #portfolio.portfolio-section .portfolio-card:hover::before,
        #portfolio.portfolio-section .portfolio-card:hover::after {
            content: none !important;
            display: none !important;
            opacity: 0 !important;
            visibility: hidden !important;
            background: transparent !important;
        }

    /* Keep card text readable without darkening image */
    #portfolio.portfolio-section .portfolio-overlay {
        position: absolute !important;
        inset: 0 !important;
        z-index: 3 !important;
        background: transparent !important;
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: none !important;
    }

    #portfolio.portfolio-section .portfolio-number,
    #portfolio.portfolio-section .portfolio-bottom,
    #portfolio.portfolio-section .portfolio-bottom h3 {
        position: relative !important;
        z-index: 4 !important;
    }

    /* Remove VIEW MORE buttons if any old markup/CSS remains */
    #portfolio.portfolio-section .portfolio-view,
    #portfolio.portfolio-section .card-view-more,
    #portfolio.portfolio-section .view-more,
    #portfolio.portfolio-section .portfolio-card a[class*="view"],
    #portfolio.portfolio-section .portfolio-card button[class*="view"] {
        display: none !important;
    }

/* Tablet */
@media screen and (max-width: 900px) {
    #portfolio.portfolio-section {
        padding: 105px 25px 60px !important;
    }

        #portfolio.portfolio-section .portfolio-section-heading {
            display: flex !important;
            flex-direction: column !important;
            align-items: flex-start !important;
            justify-content: flex-start !important;
            gap: 20px !important;
            margin-bottom: 30px !important;
        }

            #portfolio.portfolio-section .portfolio-section-heading h2,
            #portfolio.portfolio-section .portfolio-section-heading > div > h2 {
                font-size: clamp(38px, 7vw, 54px) !important;
                line-height: 1.08 !important;
            }

            #portfolio.portfolio-section .portfolio-section-heading > p {
                flex: none !important;
                width: 100% !important;
                max-width: 650px !important;
                margin: 0 !important;
            }

        #portfolio.portfolio-section .portfolio-grid {
            grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
            gap: 12px !important;
        }

        #portfolio.portfolio-section .portfolio-card {
            height: 300px !important;
        }
}

/* Mobile */
@media screen and (max-width: 600px) {
    #portfolio.portfolio-section {
        padding: 80px 12px 50px !important;
    }

        #portfolio.portfolio-section .portfolio-section-heading {
            display: block !important;
            width: 100% !important;
            margin-bottom: 28px !important;
        }

            #portfolio.portfolio-section .portfolio-section-heading .eyebrow {
                margin-bottom: 10px !important;
            }

            #portfolio.portfolio-section .portfolio-section-heading h2,
            #portfolio.portfolio-section .portfolio-section-heading > div > h2 {
                max-width: 100% !important;
                font-size: 38px !important;
                line-height: 1.08 !important;
                letter-spacing: -.8px !important;
            }

            #portfolio.portfolio-section .portfolio-section-heading > p {
                width: 100% !important;
                max-width: 100% !important;
                margin-top: 20px !important;
                font-size: 14px !important;
                line-height: 1.7 !important;
            }

        #portfolio.portfolio-section .portfolio-grid {
            grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
            gap: 10px !important;
        }

        #portfolio.portfolio-section .portfolio-card {
            height: 240px !important;
        }
}

@media screen and (max-width: 400px) {
    #portfolio.portfolio-section {
        padding: 75px 10px 45px !important;
    }

        #portfolio.portfolio-section .portfolio-section-heading h2,
        #portfolio.portfolio-section .portfolio-section-heading > div > h2 {
            font-size: 34px !important;
        }

        #portfolio.portfolio-section .portfolio-card {
            height: 210px !important;
        }
}

/* =========================================================
   END — HOMEPAGE PORTFOLIO FINAL FIX
   ========================================================= */
/* ============================================================
   RG PHOTOGRAPHY
   FINAL HOME PORTFOLIO CARD DESIGN
   ============================================================ */


/* ------------------------------------------------------------
   PORTFOLIO SECTION
   ------------------------------------------------------------ */

#portfolio.portfolio-section {
    width: 100%;
    padding: 80px 6%;
    background: #ffffff;
    box-sizing: border-box;
    overflow: hidden;
}

#portfolio .portfolio-container {
    width: 100%;
    max-width: 1380px;
    margin: 0 auto;
}


/* ------------------------------------------------------------
   PORTFOLIO GRID
   ------------------------------------------------------------ */

#portfolio .portfolio-grid {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}


/* ------------------------------------------------------------
   PORTFOLIO CARD
   ------------------------------------------------------------ */

#portfolio .portfolio-card {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    height: 480px !important;
    min-height: 480px !important;
    overflow: hidden !important;
    background: #111111;
    border: 1px solid #d6b45a !important;
    text-decoration: none !important;
    box-sizing: border-box;
    isolation: isolate;
}


    /* ------------------------------------------------------------
   IMAGE
   ------------------------------------------------------------ */

    #portfolio .portfolio-card .portfolio-image {
        position: absolute !important;
        inset: 0 !important;
        width: 100% !important;
        height: 100% !important;
        display: block !important;
        object-fit: cover !important;
        object-position: center !important;
        margin: 0 !important;
        opacity: 1 !important;
        filter: none !important;
        -webkit-filter: none !important;
        transform: scale(1) !important;
        transition: transform 0.6s ease !important;
        z-index: 1 !important;
    }


    /* Image hover */

    #portfolio .portfolio-card:hover .portfolio-image {
        transform: scale(1.035) !important;
        opacity: 1 !important;
        filter: none !important;
        -webkit-filter: none !important;
    }


    /* ------------------------------------------------------------
   REMOVE OLD CARD EFFECTS
   ------------------------------------------------------------ */

    #portfolio .portfolio-card::before,
    #portfolio .portfolio-card::after {
        content: none !important;
        display: none !important;
        opacity: 0 !important;
        visibility: hidden !important;
    }


    /* ------------------------------------------------------------
   OVERLAY
   ------------------------------------------------------------ */

    #portfolio .portfolio-card .portfolio-overlay {
        position: absolute !important;
        inset: 0 !important;
        width: 100% !important;
        height: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
        display: block !important;
        background: transparent !important;
        z-index: 5 !important;
        pointer-events: none !important;
    }


    /* ------------------------------------------------------------
   NUMBER
   Modern wedding-page style
   ------------------------------------------------------------ */

    #portfolio .portfolio-card .portfolio-number {
        position: absolute !important;
        top: 18px !important;
        left: 18px !important;
        width: 44px !important;
        height: 44px !important;
        padding: 0 !important;
        margin: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        box-sizing: border-box !important;
        background: rgba(8, 8, 8, 0.82) !important;
        border: 1px solid rgba(255, 255, 255, 0.75) !important;
        color: #ffffff !important;
        font-family: "Montserrat", Arial, sans-serif !important;
        font-size: 11px !important;
        font-weight: 700 !important;
        line-height: 1 !important;
        letter-spacing: 1px !important;
        z-index: 10 !important;
    }


    /* ------------------------------------------------------------
   TITLE
   ------------------------------------------------------------ */

    #portfolio .portfolio-card .portfolio-title {
        position: absolute !important;
        top: 18px !important;
        left: 18px !important;
        right: 18px !important;
        padding: 0 !important;
        margin: 0 !important;
        z-index: 9 !important;
        pointer-events: none !important;
    }


        /* Title itself */

        #portfolio .portfolio-card .portfolio-title h3 {
            position: absolute !important;
            top: 0 !important;
            left: 0 !important;
            margin: 0 !important;
            padding: 0 !important;
            color: #ffffff !important;
            font-family: "Montserrat", Arial, sans-serif !important;
            font-size: 18px !important;
            font-weight: 700 !important;
            line-height: 1.2 !important;
            letter-spacing: 1.8px !important;
            text-transform: uppercase !important;
            white-space: nowrap !important;
            text-shadow: 0 2px 5px rgba(0, 0, 0, 0.65) !important;
            z-index: 11 !important;
        }


    /*
   Move title ABOVE number,
   exactly like the modern wedding cards.
*/

    #portfolio .portfolio-card .portfolio-title {
        top: 18px !important;
    }


    /* Number sits below title */

    #portfolio .portfolio-card .portfolio-number {
        top: 52px !important;
    }


    /* ------------------------------------------------------------
   COMPLETELY REMOVE VIEW MORE
   ------------------------------------------------------------ */

    #portfolio .portfolio-view,
    #portfolio .portfolio-card .portfolio-view,
    #portfolio .portfolio-card .view-more,
    #portfolio .portfolio-card .card-view-more,
    #portfolio .portfolio-card a.portfolio-view,
    #portfolio .portfolio-card .portfolio-bottom a,
    #portfolio .portfolio-card .portfolio-content a {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        width: 0 !important;
        height: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
    }


    /* ------------------------------------------------------------
   REMOVE OLD CONTENT LAYOUTS
   ------------------------------------------------------------ */

    #portfolio .portfolio-card .portfolio-bottom,
    #portfolio .portfolio-card .portfolio-content {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
    }


/* ------------------------------------------------------------
   TABLET
   ------------------------------------------------------------ */

@media (max-width: 900px) {

    #portfolio.portfolio-section {
        padding: 60px 4%;
    }

    #portfolio .portfolio-grid {
        grid-template-columns: 1fr 1fr;
        gap: 12px;
    }

    #portfolio .portfolio-card {
        height: 400px !important;
        min-height: 400px !important;
    }

        #portfolio .portfolio-card .portfolio-title h3 {
            font-size: 15px !important;
            letter-spacing: 1.5px !important;
        }

        #portfolio .portfolio-card .portfolio-number {
            width: 40px !important;
            height: 40px !important;
            font-size: 10px !important;
        }
}


/* ------------------------------------------------------------
   MOBILE
   ------------------------------------------------------------ */

@media (max-width: 600px) {

    #portfolio.portfolio-section {
        padding: 50px 14px;
    }

    #portfolio .portfolio-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    #portfolio .portfolio-card {
        height: 330px !important;
        min-height: 330px !important;
    }

        #portfolio .portfolio-card .portfolio-title {
            top: 14px !important;
            left: 14px !important;
            right: 14px !important;
        }

            #portfolio .portfolio-card .portfolio-title h3 {
                font-size: 14px !important;
                letter-spacing: 1.3px !important;
            }

        #portfolio .portfolio-card .portfolio-number {
            top: 45px !important;
            left: 14px !important;
            width: 36px !important;
            height: 36px !important;
            font-size: 9px !important;
        }
}


/* ------------------------------------------------------------
   VERY SMALL MOBILE
   ------------------------------------------------------------ */

@media (max-width: 380px) {

    #portfolio.portfolio-section {
        padding-left: 10px;
        padding-right: 10px;
    }

    #portfolio .portfolio-grid {
        gap: 8px;
    }

    #portfolio .portfolio-card {
        height: 290px !important;
        min-height: 290px !important;
    }

        #portfolio .portfolio-card .portfolio-title h3 {
            font-size: 12px !important;
            letter-spacing: 1px !important;
        }

        #portfolio .portfolio-card .portfolio-number {
            width: 32px !important;
            height: 32px !important;
            font-size: 8px !important;
        }
}
/* =========================================================
   WHATSAPP FLOATING BUTTON - MOBILE FIX
   ========================================================= */

.floating-whatsapp {
    position: fixed;
    right: 24px;
    bottom: 24px;
    width: auto !important;
    min-width: 108px !important;
    height: 56px !important;
    padding: 0 20px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 30px !important;
    background: #25D366 !important;
    color: #ffffff !important;
    font-family: Arial, sans-serif !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    z-index: 99999 !important;
    box-sizing: border-box !important;
}


/* MOBILE */
@media (max-width: 700px) {

    .floating-whatsapp {
        position: fixed !important;
        right: 16px !important;
        bottom: 16px !important;
        width: 108px !important;
        min-width: 108px !important;
        max-width: 108px !important;
        height: 50px !important;
        min-height: 50px !important;
        max-height: 50px !important;
        padding: 0 16px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        border-radius: 28px !important;
        font-size: 13px !important;
        line-height: 1 !important;
        opacity: 1 !important;
        visibility: visible !important;
        overflow: visible !important;
    }
}


/* SMALL PHONES */
@media (max-width: 400px) {

    .floating-whatsapp {
        right: 12px !important;
        bottom: 12px !important;
        width: 100px !important;
        min-width: 100px !important;
        max-width: 100px !important;
        height: 46px !important;
        min-height: 46px !important;
        max-height: 46px !important;
        font-size: 12px !important;
    }
}
/* =========================================================
   FINAL WHATSAPP BUTTON FIX
   ========================================================= */

a.floating-whatsapp {
    position: fixed !important;
    right: 24px !important;
    bottom: 24px !important;
    width: 108px !important;
    min-width: 108px !important;
    max-width: 108px !important;
    height: 56px !important;
    min-height: 56px !important;
    max-height: 56px !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: #25D366 !important;
    color: #ffffff !important;
    border-radius: 30px !important;
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    letter-spacing: 0 !important;
    text-align: center !important;
    text-indent: 0 !important;
    text-transform: none !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    opacity: 1 !important;
    visibility: visible !important;
    overflow: visible !important;
    z-index: 999999 !important;
    box-sizing: border-box !important;
}


    /* FORCE WHATSAPP TEXT TO SHOW */
    a.floating-whatsapp span {
        display: block !important;
        width: auto !important;
        height: auto !important;
        color: #ffffff !important;
        font-family: Arial, Helvetica, sans-serif !important;
        font-size: 14px !important;
        font-weight: 700 !important;
        line-height: 1 !important;
        letter-spacing: 0 !important;
        opacity: 1 !important;
        visibility: visible !important;
        text-indent: 0 !important;
        white-space: nowrap !important;
        overflow: visible !important;
    }


    /* REMOVE ANY OLD ICON/PSEUDO CONTENT */
    a.floating-whatsapp::before,
    a.floating-whatsapp::after {
        content: none !important;
        display: none !important;
    }


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 700px) {

    a.floating-whatsapp {
        right: 16px !important;
        bottom: 16px !important;
        width: 108px !important;
        min-width: 108px !important;
        max-width: 108px !important;
        height: 50px !important;
        min-height: 50px !important;
        max-height: 50px !important;
        padding: 0 !important;
        border-radius: 28px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: 13px !important;
    }

        a.floating-whatsapp span {
            display: block !important;
            color: #ffffff !important;
            font-size: 13px !important;
            font-weight: 700 !important;
            line-height: 1 !important;
            opacity: 1 !important;
            visibility: visible !important;
        }
}


/* =========================================================
   SMALL MOBILE
   ========================================================= */

@media (max-width: 400px) {

    a.floating-whatsapp {
        right: 12px !important;
        bottom: 12px !important;
        width: 100px !important;
        min-width: 100px !important;
        max-width: 100px !important;
        height: 46px !important;
        min-height: 46px !important;
        max-height: 46px !important;
        border-radius: 25px !important;
    }

        a.floating-whatsapp span {
            font-size: 12px !important;
        }
}
/* =========================================================
   RG PHOTOGRAPHY — HOME PAGE REFINEMENT
   Reference-inspired structure only. Existing RG colour palette preserved.
   ========================================================= */

/* Header: cleaner reference-style alignment without changing colours */
.site-header {
    height: 92px;
    padding: 0 clamp(28px, 5vw, 72px);
    gap: 32px;
}

.brand {
    flex: 0 0 auto;
    min-width: 220px;
}

.brand img {
    width: 52px;
    height: 44px;
}

.brand span {
    font-size: 11px;
    letter-spacing: 3.2px;
}

.main-nav {
    flex: 1 1 auto;
    justify-content: flex-end;
    gap: clamp(16px, 1.7vw, 28px);
    white-space: nowrap;
}

.main-nav > a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 46px;
}

.nav-instagram,
.nav-book {
    padding: 0 20px;
    min-width: 118px;
}

/* Hero: reference-like composition, while retaining RG's typography/colours */
.hero {
    min-height: 100svh;
    padding: 92px clamp(28px, 7vw, 100px) 72px;
    align-items: center;
    justify-content: flex-end;
    background: #fff;
}

.hero-slider::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg,
        rgba(255,255,255,.04) 0%,
        rgba(255,255,255,.08) 42%,
        rgba(255,255,255,.72) 73%,
        rgba(255,255,255,.92) 100%);
    pointer-events: none;
}

.hero-slide img {
    filter: grayscale(.08) contrast(1.02);
}

.hero-content {
    width: min(560px, 43vw);
    max-width: 560px;
    margin-right: clamp(20px, 4vw, 70px);
    margin-left: auto;
    padding: 30px 0 30px 34px;
    text-align: left;
    text-shadow: none;
}

.hero-content .eyebrow {
    margin-bottom: 22px;
}

.hero-content h1 {
    font-size: clamp(58px, 6.2vw, 102px);
    line-height: .86;
    letter-spacing: -2.5px;
    max-width: 560px;
}

.hero-content h1 em {
    color: var(--royal);
}

.hero-copy {
    max-width: 490px;
    margin: 28px 0 30px;
    color: #333;
    font-size: 15px;
    line-height: 1.75;
}

.hero-actions {
    gap: 12px;
}

.hero-actions .btn {
    min-height: 50px;
    padding: 0 23px;
}

.hero-arrow {
    position: absolute;
    z-index: 4;
    top: 50%;
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    border: 1px solid rgba(8,8,8,.55);
    border-radius: 50%;
    background: rgba(255,255,255,.5);
    color: var(--black);
    font-family: Georgia, serif;
    font-size: 28px;
    line-height: 1;
    display: grid;
    place-items: center;
    cursor: pointer;
    transition: .25s ease;
}

.hero-arrow:hover {
    background: #fff;
    border-color: var(--black);
    transform: translateY(-50%) scale(1.04);
}

.hero-prev { left: clamp(18px, 3vw, 46px); }
.hero-next { right: clamp(18px, 3vw, 46px); }

.hero-dots {
    position: absolute;
    z-index: 4;
    left: 50%;
    bottom: 28px;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 9px;
}

.hero-dot {
    width: 8px;
    height: 8px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(8,8,8,.45);
    cursor: pointer;
    transition: .25s ease;
}

.hero-dot.active {
    width: 10px;
    height: 10px;
    background: var(--black);
}

.hero-scroll {
    right: clamp(16px, 2.5vw, 38px);
    bottom: 76px;
    color: var(--black);
}

/* Keep all later home sections visually intact; improve only the page rhythm. */
.intro {
    padding-top: 100px;
    padding-bottom: 100px;
}

@media (max-width: 1100px) {
    .site-header {
        padding: 0 28px;
    }
    .brand { min-width: 185px; }
    .main-nav { gap: 14px; }
    .nav-instagram, .nav-book { min-width: 100px; padding: 0 13px; }
    .hero-content {
        width: min(520px, 48vw);
        margin-right: 20px;
    }
}

@media (max-width: 900px) {
    .site-header {
        height: 82px;
    }

    .brand {
        min-width: 0;
    }

    .main-nav {
        position: absolute;
        top: 82px;
        left: 18px;
        right: 18px;
        padding: 18px;
        display: none;
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-start;
        gap: 4px;
        background: rgba(255,255,255,.98);
        border: 1px solid var(--line);
        box-shadow: 0 18px 40px rgba(0,0,0,.10);
    }

    .main-nav.open { display: flex; }

    .main-nav > a {
        width: 100%;
        min-height: 44px;
        justify-content: center;
    }

    .menu-toggle {
        display: inline-flex;
        width: 42px;
        height: 42px;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 5px;
        border: 1px solid var(--line);
        cursor: pointer;
    }

    .menu-toggle span {
        display: block;
        width: 19px;
        height: 1px;
        background: var(--black);
    }

    .hero {
        padding: 82px 28px 70px;
        align-items: flex-end;
    }

    .hero-slider::after {
        background: linear-gradient(90deg,
            rgba(255,255,255,.05),
            rgba(255,255,255,.16) 38%,
            rgba(255,255,255,.86) 100%);
    }

    .hero-content {
        width: min(620px, 68vw);
        margin-right: 2vw;
        padding-left: 24px;
    }

    .hero-content h1 {
        font-size: clamp(54px, 8vw, 78px);
    }
}

@media (max-width: 600px) {
    .site-header {
        padding: 0 18px;
    }

    .brand img {
        width: 48px;
        height: 40px;
    }

    .brand span {
        font-size: 10px;
        letter-spacing: 2.5px;
    }

    .hero {
        min-height: 760px;
        padding: 82px 20px 76px;
        align-items: flex-end;
    }

    .hero-slider::after {
        background: linear-gradient(180deg,
            rgba(255,255,255,.02) 25%,
            rgba(255,255,255,.35) 55%,
            rgba(255,255,255,.96) 100%);
    }

    .hero-content {
        width: 100%;
        max-width: 100%;
        margin: 0;
        padding: 24px 18px 18px;
        background: rgba(255,255,255,.78);
    }

    .hero-content .eyebrow {
        font-size: 8px;
        letter-spacing: 2px;
        margin-bottom: 15px;
    }

    .hero-content h1 {
        font-size: clamp(48px, 14vw, 68px);
        line-height: .88;
    }

    .hero-copy {
        font-size: 14px;
        margin: 20px 0 22px;
    }

    .hero-actions {
        width: 100%;
        flex-direction: column;
    }

    .hero-actions .btn {
        width: 100%;
    }

    .hero-arrow {
        width: 38px;
        height: 38px;
        font-size: 24px;
    }

    .hero-prev { left: 14px; }
    .hero-next { right: 14px; }

    .hero-scroll {
        display: none;
    }
}


/* =========================================================
   RG PHOTOGRAPHY — PREMIUM TYPE + CONTRAST REFINEMENT
   Design-only update. Existing RG colour palette preserved.
   ========================================================= */

/* Premium typography hierarchy */
html, body {
    font-family: "Inter", Arial, sans-serif;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6,
.category-card h3,
.video-card h3,
.signature,
.footer strong {
    font-family: "Cormorant Garamond", Georgia, serif !important;
    font-weight: 600;
    text-rendering: optimizeLegibility;
}

h1, h2 {
    letter-spacing: -1.8px;
}

h3, h4 {
    letter-spacing: -0.4px;
}

p, li, blockquote, cite,
.section-heading > p,
.intro-text,
.hero-copy,
.page-hero p,
.about-copy p,
.service-list p,
.location-copy p,
.booking p {
    font-family: "Inter", Arial, sans-serif;
}

.eyebrow,
.main-nav,
.btn,
.text-link,
.page-back,
.card-view-more,
.footer-links,
.footer-socials,
.category-card small,
.portfolio-card span {
    font-family: "Inter", Arial, sans-serif;
}

/* ---------------------------------------------------------
   HOME HERO — remove the old white image wash completely
   --------------------------------------------------------- */
.hero-slider::after {
    content: none !important;
    display: none !important;
    background: transparent !important;
    opacity: 0 !important;
}

.hero-slide img {
    filter: grayscale(.08) contrast(1.02) !important;
}

/* Hero typography is bright and readable directly over photography */
.hero-content {
    text-shadow: 0 3px 24px rgba(0,0,0,.34) !important;
}

.hero-content h1,
.hero-content h1 em,
.hero-content .hero-copy,
.hero-content .eyebrow,
.hero-scroll,
.hero-scroll span {
    color: #fff !important;
}

.hero-content .eyebrow {
    color: var(--gold-light) !important;
    text-shadow: 0 2px 12px rgba(0,0,0,.35);
}

.hero-copy {
    font-weight: 400;
    letter-spacing: .1px;
}

/* Hero buttons stay premium and visible over all three images */
.hero .btn-gold {
    background: rgba(8,8,8,.94) !important;
    color: #fff !important;
    border-color: rgba(255,255,255,.72) !important;
}

.hero .btn-outline {
    background: rgba(8,8,8,.48) !important;
    color: #fff !important;
    border-color: rgba(255,255,255,.78) !important;
}

.hero .btn-gold:hover,
.hero .btn-outline:hover {
    background: var(--gold) !important;
    border-color: var(--gold) !important;
    color: #fff !important;
}

.hero-arrow {
    background: rgba(8,8,8,.35) !important;
    color: #fff !important;
    border-color: rgba(255,255,255,.72) !important;
    backdrop-filter: blur(4px);
}

.hero-arrow:hover {
    background: rgba(8,8,8,.72) !important;
    color: #fff !important;
    border-color: #fff !important;
}

.hero-dot {
    background: rgba(255,255,255,.55) !important;
}

.hero-dot.active {
    background: #fff !important;
}

/* Mobile: never put a white content panel over the hero image */
@media (max-width: 600px) {
    .hero-slider::after {
        content: none !important;
        display: none !important;
    }

    .hero-content {
        background: transparent !important;
        padding: 24px 18px 18px !important;
        text-shadow: 0 3px 22px rgba(0,0,0,.42) !important;
    }
}

/* ---------------------------------------------------------
   DARK / BLACK SECTIONS — force strong readable typography
   --------------------------------------------------------- */
.dark-section,
.about-cta,
.team-lead {
    color: #fff;
}

.dark-section h1,
.dark-section h2,
.dark-section h3,
.dark-section h4,
.dark-section h5,
.dark-section h6,
.dark-section h1 em,
.dark-section h2 em,
.dark-section h3 em,
.about-cta h1,
.about-cta h2,
.about-cta h3,
.about-cta h1 em,
.about-cta h2 em,
.about-cta h3 em,
.team-lead h3 {
    color: #fff !important;
}

.dark-section p:not(.eyebrow),
.dark-section li,
.dark-section .service-list p,
.about-cta p:not(.eyebrow),
.team-lead p {
    color: rgba(255,255,255,.84) !important;
}

.dark-section .eyebrow,
.about-cta .eyebrow,
.team-lead span {
    color: var(--gold-light) !important;
}

.dark-section .text-link,
.dark-section a {
    color: #fff;
}

.dark-section .text-link:hover,
.dark-section a:hover {
    color: var(--gold-light);
}

/* Black image cards: premium white text, never dark-blue-on-black */
.portfolio-card .portfolio-content,
.portfolio-card .portfolio-content h3,
.portfolio-card .portfolio-content p,
.category-card h3,
.category-card small,
.category-card span,
.card-view-more {
    text-shadow: 0 2px 14px rgba(0,0,0,.48);
}

.portfolio-card .portfolio-content h3,
.category-card h3 {
    color: #fff !important;
}

/* ---------------------------------------------------------
   Premium body text / controls across every page
   --------------------------------------------------------- */
body {
    font-size: 15px;
}

.section-heading > p,
.intro-text,
.about-copy p:not(.eyebrow):not(.signature),
.page-hero p,
.location-copy p,
.booking p:not(.eyebrow),
blockquote p,
.video-card p {
    line-height: 1.8;
}

.btn,
.nav-instagram,
.nav-book,
.text-link,
.card-view-more,
.footer-links a {
    font-weight: 700;
    letter-spacing: 1.6px;
}

.btn {
    border-radius: 0;
}

/* Footer social row */
.footer-socials {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin: 22px 0 8px;
}

.footer-socials a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    padding: 0 17px;
    border: 1px solid rgba(255,255,255,.45);
    color: #fff;
    background: transparent;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1.6px;
    transition: .25s ease;
}

.footer-socials a:hover {
    background: var(--gold);
    border-color: var(--gold);
    color: #fff;
    transform: translateY(-2px);
}

.footer-socials .facebook-button::before {
    content: "f";
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    margin-right: 8px;
    border: 1px solid rgba(255,255,255,.75);
    border-radius: 50%;
    font-family: Arial, sans-serif;
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
}

.footer-socials .facebook-button:hover::before {
    border-color: #fff;
}

@media (max-width: 600px) {
    .footer-socials {
        flex-direction: column;
        width: 100%;
    }

    .footer-socials a {
        width: min(220px, 100%);
    }
}

/* =========================================================
   RG PHOTOGRAPHY — FINAL PREMIUM TYPE + REVIEW VISIBILITY
   Design-only refinement. Existing colour palette and content kept.
   ========================================================= */

/* Make browser text selection feel intentional instead of default blue. */
::selection {
    background: var(--gold);
    color: #fff;
}

::-moz-selection {
    background: var(--gold);
    color: #fff;
}

/* Refined editorial typography across the site. */
body {
    font-family: "Inter", Arial, sans-serif !important;
    font-weight: 400;
    letter-spacing: 0.01em;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
    font-family: "Cormorant Garamond", Georgia, serif !important;
    font-weight: 600 !important;
    text-rendering: optimizeLegibility;
}

h1 em, h2 em, h3 em,
.page-hero h1 em,
.section-heading h2 em {
    font-family: "Cormorant Garamond", Georgia, serif !important;
    font-style: italic !important;
    font-weight: 600 !important;
    letter-spacing: -0.02em;
}

/* Premium readable supporting copy — no colour replacement. */
.section-heading > p,
.section-note,
.intro-text,
.hero-copy,
.page-hero p,
.about-copy p,
.service-list p,
.location p,
.location-address,
.booking p,
.gallery-category-head > p,
.gallery-category-head div > p:not(.eyebrow),
.video-card p,
.footer > p,
.footer small {
    font-family: "Inter", Arial, sans-serif !important;
    font-weight: 400;
    line-height: 1.82;
    letter-spacing: 0.015em;
}

/* Small labels/buttons: crisp luxury editorial treatment. */
.eyebrow,
.main-nav a,
.nav-instagram,
.nav-book,
.btn,
.text-link,
.page-back,
.card-view-more,
.footer-links a,
.footer-socials a,
.gallery-item span,
.category-card small,
.portfolio-card span {
    font-family: "Inter", Arial, sans-serif !important;
    font-weight: 700 !important;
    letter-spacing: 1.8px !important;
    text-transform: uppercase;
}

/* =========================================================
   REVIEWS — white cards need dark text, not dark-section white text
   ========================================================= */
.reviews .review-grid blockquote {
    background: #fff !important;
    color: #111 !important;
    border: 1px solid #dedede !important;
    box-shadow: 0 16px 40px rgba(0,0,0,.08) !important;
}

.reviews .review-grid blockquote p,
.dark-section .review-grid blockquote p {
    color: #111111 !important;
    font-family: "Inter", Arial, sans-serif !important;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.85;
    letter-spacing: 0.01em;
}

.reviews .review-grid blockquote cite,
.dark-section .review-grid blockquote cite {
    color: #222222 !important;
    font-family: "Inter", Arial, sans-serif !important;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.7px;
    text-transform: uppercase;
}

.reviews .stars {
    color: var(--gold) !important;
    font-size: 15px;
    letter-spacing: 3px;
    margin-bottom: 18px;
}

/* Keep the black review section heading premium and bright. */
.reviews > .section-heading h2,
.reviews > .section-heading h2 em {
    color: #fff !important;
}

/* Remove accidental browser/default-looking emphasis treatment. */
main em,
footer em {
    text-decoration: none;
}

/* Better spacing and rhythm for normal text on large screens. */
@media (min-width: 901px) {
    .section-heading > p,
    .section-note,
    .intro-text,
    .page-hero p,
    .location p:not(.eyebrow),
    .booking p:not(.eyebrow) {
        max-width: 620px;
    }
}

/* Mobile typography remains elegant and readable. */
@media (max-width: 700px) {
    .reviews .review-grid blockquote p {
        font-size: 15px;
        line-height: 1.78;
    }

    h1, h2 {
        letter-spacing: -1px;
    }

    .section-heading > p,
    .section-note,
    .intro-text,
    .page-hero p,
    .location p:not(.eyebrow) {
        line-height: 1.75;
    }
}
/* =========================================================
   RG PHOTOGRAPHY — PREMIUM MOBILE UPGRADE
   DESIGN ONLY — KEEP EXISTING COLOURS & ASSETS
   ========================================================= */

html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
}

body {
    overflow-x: hidden;
    font-family: "Inter", Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
}

/* ---------- PREMIUM TYPOGRAPHY ---------- */

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: "Cormorant Garamond", Georgia, serif;
    font-weight: 600;
    letter-spacing: -0.5px;
}

    h1 em,
    h2 em,
    h3 em {
        font-family: "Cormorant Garamond", Georgia, serif;
        font-style: italic;
        font-weight: 600;
    }

.eyebrow,
button,
.btn,
a.btn,
.nav-book,
.nav-instagram,
.footer-links a,
.card-view-more,
.category-card small,
.portfolio-card span {
    font-family: "Inter", Arial, sans-serif;
    font-weight: 700;
    letter-spacing: 1.6px;
}

/* ---------- SECTION HEADINGS ---------- */

.section-heading h2 {
    font-size: clamp(44px, 6vw, 82px);
    line-height: .92;
    margin: 0;
}

.section-heading > p {
    font-size: 14px;
    line-height: 1.75;
    max-width: 520px;
}

/* ---------- HERO ---------- */

.hero {
    overflow: hidden;
}

.hero-content {
    position: relative;
    z-index: 5;
    max-width: 760px;
}

    .hero-content h1 {
        font-size: clamp(54px, 8vw, 110px);
        line-height: .86;
        letter-spacing: -2px;
    }

    .hero-content .eyebrow {
        font-size: 10px;
        letter-spacing: 3px;
        line-height: 1.4;
    }

.hero-copy {
    max-width: 560px;
    font-size: 16px;
    line-height: 1.7;
}

/* ---------- PREMIUM BUTTONS ---------- */

.btn,
.nav-book,
.nav-instagram,
.facebook-button {
    min-height: 50px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 23px;
    border-radius: 0;
    text-decoration: none;
    transition: transform .25s ease, box-shadow .25s ease, opacity .25s ease;
}

    .btn:hover,
    .nav-book:hover,
    .nav-instagram:hover,
    .facebook-button:hover {
        transform: translateY(-2px);
    }

.hero-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
}

/* ---------- WEDDING CARDS ---------- */

.category-card h3 {
    font-family: "Cormorant Garamond", Georgia, serif;
    font-size: clamp(30px, 4vw, 48px);
    line-height: .9;
    letter-spacing: -0.5px;
}

.category-card small {
    font-size: 9px;
    letter-spacing: 1.7px;
}

/* ---------- PORTFOLIO ---------- */
/* Portfolio cards styled like the Wedding category cards:
   PRE-WEDDING | POST-WEDDING
   BABY SHOOT  | MATERNITY SHOOT */

.portfolio-grid {
    max-width: var(--max);
    margin: auto;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(2, 340px);
    gap: 18px;
    align-items: stretch;
}

.portfolio-card,
.portfolio-card.tall {
    position: relative;
    display: block;
    width: 100%;
    height: 340px;
    min-height: 340px;
    overflow: hidden;
    background: #111;
    text-decoration: none;
    border: 1px solid #d9d9d9;
    box-shadow: 0 18px 42px rgba(0,0,0,.10);
    grid-column: auto;
    grid-row: auto;
}

    .portfolio-card > div {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        filter: grayscale(.55);
        transition: transform .6s ease, filter .6s ease;
        z-index: 1;
    }

    .portfolio-card:hover > div {
        transform: scale(1.05);
        filter: grayscale(.1);
    }

    .portfolio-card::after {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient( 0deg, rgba(0,0,0,.88), rgba(0,0,0,.02) 68% );
        pointer-events: none;
        z-index: 2;
    }

    .portfolio-card::before {
        content: "";
        position: absolute;
        inset: 10px;
        border: 1px solid rgba(216,178,84,.45);
        z-index: 3;
        pointer-events: none;
    }

    .portfolio-card span {
        position: absolute;
        left: 24px;
        bottom: 50px;
        z-index: 4;
        padding: 0;
        background: transparent;
        color: #fff;
        font-family: "Cormorant Garamond", Georgia, serif;
        font-size: 42px;
        font-weight: 600;
        letter-spacing: 0;
        white-space: nowrap;
    }

    .portfolio-card .card-view-more {
        position: absolute;
        left: 24px;
        right: auto;
        bottom: 22px;
        z-index: 4;
        padding: 0;
        background: transparent;
        color: #fff;
        border: 0;
        font-size: 9px;
        font-weight: 800;
        letter-spacing: 2px;
        white-space: nowrap;
        transition: color .3s ease, transform .3s ease;
    }

        .portfolio-card .card-view-more::after {
            content: " →";
        }

    .portfolio-card:hover .card-view-more {
        background: transparent;
        color: var(--gold-light);
        transform: translateX(3px);
    }

/* Existing portfolio-right wrapper */
.portfolio-right {
    display: contents;
}

    .portfolio-right .portfolio-card {
        width: 100%;
        height: 340px;
        min-height: 340px;
    }


/* ---------- TABLET ---------- */

@media (max-width:900px) {

    .portfolio-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-template-rows: repeat(2, 300px);
        gap: 14px;
    }

    .portfolio-card,
    .portfolio-card.tall,
    .portfolio-right .portfolio-card {
        height: 300px;
        min-height: 300px;
    }

        .portfolio-card span {
            left: 18px;
            bottom: 42px;
            font-size: 34px;
        }

        .portfolio-card .card-view-more {
            left: 18px;
            bottom: 18px;
        }
}


/* ---------- MOBILE ---------- */

@media (max-width:600px) {

    .portfolio-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-template-rows: repeat(2, 210px);
        gap: 10px;
    }

    .portfolio-card,
    .portfolio-card.tall,
    .portfolio-right .portfolio-card {
        width: 100%;
        height: 210px;
        min-height: 210px;
        max-height: 210px;
        grid-column: auto;
        grid-row: auto;
    }

        .portfolio-card > div {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            background-size: cover;
            background-position: center;
        }

        .portfolio-card::before {
            inset: 7px;
        }

        .portfolio-card span {
            left: 10px;
            bottom: 34px;
            font-size: 25px;
            line-height: 1;
        }

        .portfolio-card .card-view-more {
            left: 10px;
            bottom: 10px;
            font-size: 7px;
            letter-spacing: 1.4px;
        }
}


/* ---------- VIDEO ---------- */

/* =========================================================
   ROUND FLOATING SOCIAL BUTTONS
   ========================================================= */

.floating-whatsapp,
.floating-instagram {
    position: fixed !important;
    width: 54px !important;
    height: 54px !important;
    min-height: 54px !important;
    padding: 0 !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 9999 !important;
    box-shadow: 0 8px 25px rgba(0,0,0,.22), 0 2px 8px rgba(0,0,0,.12);
    transition: transform .25s ease, box-shadow .25s ease;
}

.floating-whatsapp {
    right: 22px !important;
    bottom: 22px !important;
}

.floating-instagram {
    right: 22px !important;
    bottom: 88px !important;
}

    .floating-whatsapp:hover,
    .floating-instagram:hover {
        transform: translateY(-4px) scale(1.04);
        box-shadow: 0 12px 32px rgba(0,0,0,.28);
    }

    .floating-whatsapp svg,
    .floating-instagram svg {
        width: 23px;
        height: 23px;
    }

/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 900px) {

    /* HEADER */

    .site-header {
        height: 68px !important;
        padding: 0 16px !important;
    }

    .brand {
        gap: 8px !important;
    }

        .brand img {
            width: 42px !important;
            height: auto !important;
        }

        .brand span {
            font-size: 9px !important;
            letter-spacing: 2px !important;
        }

    /* MOBILE NAV */

    .menu-toggle {
        width: 42px !important;
        height: 42px !important;
        display: flex !important;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        gap: 5px;
        padding: 0 !important;
    }

        .menu-toggle span {
            display: block;
            width: 19px;
            height: 1.5px;
        }

    .main-nav {
        top: 68px !important;
        left: 10px !important;
        right: 10px !important;
        padding: 7px !important;
        display: none;
        flex-direction: column !important;
        gap: 2px !important;
        box-shadow: 0 15px 40px rgba(0,0,0,.15);
    }

        .main-nav.open {
            display: flex !important;
        }

        .main-nav a {
            width: 100% !important;
            min-height: 43px !important;
            display: flex !important;
            align-items: center;
            padding: 0 13px !important;
        }

    /* SECTIONS */

    .section-pad,
    .portfolio-section {
        padding: 55px 17px !important;
    }

    .section-heading {
        margin-bottom: 27px !important;
        gap: 16px !important;
    }

        .section-heading h2 {
            font-size: clamp(43px, 12vw, 65px) !important;
            line-height: .9 !important;
        }

        .section-heading > p {
            font-size: 13px !important;
            line-height: 1.65 !important;
        }

    /* HERO */

    .hero {
        min-height: calc(100svh - 68px) !important;
        padding: 0 17px 52px !important;
        align-items: flex-end !important;
    }

    .hero-content {
        width: 100% !important;
        max-width: 100% !important;
    }

        .hero-content .eyebrow {
            font-size: 8px !important;
            letter-spacing: 2px !important;
            margin-bottom: 13px !important;
        }

        .hero-content h1 {
            font-size: clamp(49px, 14vw, 76px) !important;
            line-height: .87 !important;
            letter-spacing: -1.5px !important;
            margin-bottom: 17px !important;
        }

    .hero-copy {
        font-size: 13px !important;
        line-height: 1.65 !important;
        max-width: 100% !important;
    }

    /* HERO BUTTONS */

    .hero-actions {
        display: grid !important;
        grid-template-columns: 1fr 1fr;
        gap: 8px !important;
        width: 100%;
        margin-top: 20px;
    }

        .hero-actions .btn {
            width: 100% !important;
            min-height: 48px !important;
            padding: 0 8px !important;
            font-size: 8px !important;
            letter-spacing: 1.1px !important;
        }

    /* WEDDING */

    .category-grid {
        grid-template-columns: repeat(2, minmax(0,1fr)) !important;
        gap: 8px !important;
    }

    .category-card {
        min-height: 235px !important;
    }

        .category-card h3 {
            font-size: 29px !important;
            bottom: 39px !important;
            left: 13px !important;
        }

        .category-card small {
            left: 13px !important;
            bottom: 14px !important;
            font-size: 7px !important;
        }

    /* PORTFOLIO */

    .portfolio-grid {
        grid-template-columns: repeat(2,minmax(0,1fr)) !important;
        gap: 8px !important;
    }

    .portfolio-card,
    .portfolio-card.tall {
        height: 235px !important;
        min-height: 0 !important;
    }

    .portfolio-right {
        grid-column: 1 / -1 !important;
        grid-template-columns: repeat(2,minmax(0,1fr)) !important;
        gap: 8px !important;
        height: 235px !important;
    }

        .portfolio-right .portfolio-card {
            height: 235px !important;
        }

    /* VIDEOS */

    .video-grid {
        grid-template-columns: 1fr !important;
        gap: 13px !important;
    }

    .video-card h3 {
        font-size: 27px !important;
        margin: 12px 13px 3px !important;
    }

    .video-card p {
        font-size: 10px !important;
        margin: 0 13px !important;
    }

    /* SERVICES */

    .service-list > div {
        grid-template-columns: 36px 1fr !important;
        gap: 8px 11px !important;
        padding: 19px 0 !important;
    }

    .service-list h3 {
        font-size: 27px !important;
    }

    .service-list p {
        grid-column: 2 !important;
        font-size: 12px !important;
        line-height: 1.6 !important;
    }

    /* ABOUT */

    .about {
        grid-template-columns: 1fr !important;
        gap: 32px !important;
    }

    .about-copy p {
        font-size: 13px !important;
        line-height: 1.75 !important;
    }

    /* REVIEWS */

    .review-grid {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }

        .review-grid blockquote {
            padding: 20px !important;
        }

            .review-grid blockquote p {
                font-size: 13px !important;
                line-height: 1.7 !important;
            }

    /* LOCATION */

    .location {
        grid-template-columns: 1fr !important;
        gap: 25px !important;
    }

    .map-frame,
    .map-frame iframe {
        min-height: 270px !important;
        height: 270px !important;
    }

    /* BOOKING */

    .booking {
        padding: 50px 17px !important;
    }

    .booking-actions {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 8px !important;
    }

        .booking-actions .btn {
            width: 100% !important;
        }

    /* FOOTER */

    .footer {
        padding: 45px 17px 27px !important;
    }

    .footer-links {
        display: flex !important;
        justify-content: center !important;
        align-items: center;
        flex-wrap: wrap;
        gap: 8px 15px !important;
    }

    /* ROUND FLOATING BUTTONS */

    .floating-whatsapp,
    .floating-instagram {
        width: 50px !important;
        height: 50px !important;
        min-height: 50px !important;
        right: 13px !important;
    }

    .floating-whatsapp {
        bottom: 13px !important;
    }

    .floating-instagram {
        bottom: 73px !important;
    }
}

/* =========================================================
   SMALL PHONES
   ========================================================= */

@media (max-width: 380px) {

    .section-pad,
    .portfolio-section {
        padding: 47px 13px !important;
    }

    .hero {
        padding-left: 13px !important;
        padding-right: 13px !important;
        padding-bottom: 43px !important;
    }

    .hero-actions {
        grid-template-columns: 1fr !important;
    }

    .category-card {
        min-height: 210px !important;
    }

        .category-card h3 {
            font-size: 26px !important;
        }

    .portfolio-card,
    .portfolio-card.tall,
    .portfolio-right,
    .portfolio-right .portfolio-card {
        height: 210px !important;
    }

    .floating-whatsapp,
    .floating-instagram {
        width: 47px !important;
        height: 47px !important;
        min-height: 47px !important;
        right: 10px !important;
    }

    .floating-whatsapp {
        bottom: 10px !important;
    }

    .floating-instagram {
        bottom: 66px !important;
    }
}

/* ---------- ACCESSIBILITY ---------- */

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
}
/* =========================================================
   RG PHOTOGRAPHY
   PREMIUM EDITORIAL TYPOGRAPHY SYSTEM
   ========================================================= */

/* ---------- GLOBAL ---------- */

html,
body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

body {
    font-family: "Inter", Arial, sans-serif !important;
    font-weight: 400;
    letter-spacing: 0;
}


/* =========================================================
   HEADINGS
   ========================================================= */

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: "Cormorant Garamond", Georgia, serif !important;
    font-weight: 500;
    letter-spacing: -0.035em;
    line-height: 0.95;
    text-rendering: optimizeLegibility;
}


/* Large premium headings */

h1 {
    font-size: clamp(52px, 7vw, 105px);
}

h2 {
    font-size: clamp(44px, 6vw, 82px);
}

h3 {
    font-size: clamp(30px, 4vw, 52px);
}


    /* Italic premium words */

    h1 em,
    h2 em,
    h3 em,
    h4 em,
    .heading-italic,
    .italic {
        font-family: "Cormorant Garamond", Georgia, serif !important;
        font-style: italic;
        font-weight: 500;
        letter-spacing: -0.045em;
    }


/* =========================================================
   NORMAL WEBSITE TEXT
   ========================================================= */

p,
.description,
.section-description,
.hero-description,
.about-description,
.service-description,
.review-text,
.location-description,
.booking-description {
    font-family: "Inter", Arial, sans-serif !important;
    font-size: 15px;
    font-weight: 400;
    line-height: 1.8;
    letter-spacing: 0.005em;
    color: inherit;
}


/* Premium long-form paragraph */

.about-copy p,
.hero-copy p,
.section-heading p,
.intro-text,
.story-text {
    max-width: 620px;
    line-height: 1.85;
}


/* =========================================================
   PREMIUM INTRO / LEAD TEXT
   ========================================================= */

.lead-text,
.intro-copy,
.hero-copy,
.section-intro {
    font-family: "Cormorant Garamond", Georgia, serif !important;
    font-size: clamp(21px, 2vw, 29px);
    line-height: 1.35;
    font-weight: 500;
    letter-spacing: -0.01em;
}


    /* Normal supporting text underneath */

    .lead-text + p,
    .intro-copy + p {
        font-family: "Inter", Arial, sans-serif !important;
        font-size: 14px;
        line-height: 1.8;
    }


/* =========================================================
   SMALL PREMIUM LABELS
   ========================================================= */

.eyebrow,
.section-label,
.section-kicker,
.category-label,
.small-label,
.overline,
.label {
    font-family: "Inter", Arial, sans-serif !important;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 3px;
    line-height: 1.3;
    text-transform: uppercase;
}


/* =========================================================
   NAVIGATION
   ========================================================= */

.site-header a,
.main-nav a,
.nav-links a {
    font-family: "Inter", Arial, sans-serif !important;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 1.7px;
    text-transform: uppercase;
}


/* =========================================================
   BUTTONS
   ========================================================= */

button,
.btn,
.nav-book,
.nav-instagram,
.book-now,
.view-more,
.view-portfolio,
.cta,
a.button {
    font-family: "Inter", Arial, sans-serif !important;
    font-size: 10px;
    font-weight: 700 !important;
    letter-spacing: 1.7px;
    text-transform: uppercase;
}


/* Premium button feel */

.btn,
.book-now,
.view-more,
.view-portfolio,
.cta {
    min-height: 48px;
    padding: 0 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: transform .25s ease, box-shadow .25s ease, background .25s ease;
}

    .btn:hover,
    .book-now:hover,
    .view-more:hover,
    .view-portfolio:hover,
    .cta:hover {
        transform: translateY(-2px);
    }


/* =========================================================
   WEDDING / PORTFOLIO CARDS
   ========================================================= */

.category-card h3,
.portfolio-card h3,
.wedding-card h3,
.gallery-card h3 {
    font-family: "Cormorant Garamond", Georgia, serif !important;
    font-weight: 500;
    letter-spacing: -0.025em;
    line-height: .95;
}

.category-card p,
.portfolio-card p,
.wedding-card p,
.gallery-card p {
    font-family: "Inter", Arial, sans-serif !important;
    font-size: 11px;
    line-height: 1.6;
}


/* =========================================================
   SERVICES
   ========================================================= */

.service-list h3,
.service-card h3 {
    font-family: "Cormorant Garamond", Georgia, serif !important;
    font-size: clamp(28px, 3vw, 42px);
    font-weight: 500;
    line-height: 1;
}

.service-list p,
.service-card p {
    font-family: "Inter", Arial, sans-serif !important;
    font-size: 13px;
    line-height: 1.75;
}


/* =========================================================
   REVIEWS
   ========================================================= */

.review-grid blockquote,
.review-card blockquote {
    font-family: "Cormorant Garamond", Georgia, serif !important;
    font-size: clamp(22px, 2.4vw, 32px);
    font-weight: 500;
    line-height: 1.25;
    letter-spacing: -0.015em;
}

.review-grid cite,
.review-card cite,
.review-author {
    font-family: "Inter", Arial, sans-serif !important;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}


/* =========================================================
   ABOUT SECTION
   ========================================================= */

.about-copy h2,
.about-content h2 {
    font-family: "Cormorant Garamond", Georgia, serif !important;
    font-size: clamp(48px, 6vw, 82px);
    line-height: .9;
}

.about-copy p,
.about-content p {
    font-family: "Inter", Arial, sans-serif !important;
    font-size: 14px;
    line-height: 1.85;
}


/* =========================================================
   LOCATION / CONTACT
   ========================================================= */

.contact h2,
.location h2 {
    font-family: "Cormorant Garamond", Georgia, serif !important;
}

.contact p,
.location p,
.contact-info,
.location-info {
    font-family: "Inter", Arial, sans-serif !important;
    font-size: 13px;
    line-height: 1.75;
}


/* =========================================================
   FOOTER
   ========================================================= */

footer,
.footer {
    font-family: "Inter", Arial, sans-serif !important;
}

    .footer h3,
    .footer h4 {
        font-family: "Cormorant Garamond", Georgia, serif !important;
    }

    .footer p,
    .footer a {
        font-family: "Inter", Arial, sans-serif !important;
        font-size: 11px;
        line-height: 1.7;
    }


/* =========================================================
   NUMBERS
   ========================================================= */

.number,
.card-number,
.category-number,
.portfolio-number {
    font-family: "Cormorant Garamond", Georgia, serif !important;
    font-size: 18px;
    font-weight: 500;
}


/* =========================================================
   GOLD/ACCENT LABELS
   Keep your existing colour — typography only.
   ========================================================= */

.eyebrow,
.section-label,
.category-label,
.overline {
    font-family: "Inter", Arial, sans-serif !important;
    font-weight: 700;
    letter-spacing: 3px;
}


/* =========================================================
   MOBILE TYPOGRAPHY
   ========================================================= */

@media (max-width: 768px) {

    h1 {
        font-size: clamp(46px, 13vw, 70px);
        line-height: .9;
    }

    h2 {
        font-size: clamp(40px, 11vw, 60px);
        line-height: .92;
    }

    h3 {
        font-size: clamp(28px, 8vw, 40px);
    }

    p,
    .description,
    .section-description,
    .about-description,
    .service-description {
        font-size: 13px !important;
        line-height: 1.75 !important;
    }

    .lead-text,
    .intro-copy,
    .hero-copy,
    .section-intro {
        font-size: 20px !important;
        line-height: 1.35 !important;
    }

    .eyebrow,
    .section-label,
    .category-label,
    .overline {
        font-size: 8px !important;
        letter-spacing: 2.4px !important;
    }

    .site-header a,
    .main-nav a {
        font-size: 9px !important;
        letter-spacing: 1.3px !important;
    }

    button,
    .btn,
    .view-more,
    .view-portfolio,
    .book-now {
        font-size: 8px !important;
        letter-spacing: 1.2px !important;
    }

    .review-grid blockquote,
    .review-card blockquote {
        font-size: 23px !important;
        line-height: 1.3 !important;
    }
}


/* =========================================================
   REMOVE UGLY TEXT SELECTION / BLUE LOOK
   ========================================================= */

::selection {
    background: rgba(190, 145, 55, .20);
    color: inherit;
}


/* =========================================================
   IMPORTANT:
   Do NOT force every text element to the serif font.
   Premium design comes from contrast between serif + sans.
   ========================================================= */
/* =========================================================
   RG PHOTOGRAPHY
   PREMIUM EDITORIAL TYPOGRAPHY SYSTEM
   ========================================================= */

/* ---------- GLOBAL ---------- */

html,
body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

body {
    font-family: "Inter", Arial, sans-serif !important;
    font-weight: 400;
    letter-spacing: 0;
}


/* =========================================================
   HEADINGS
   ========================================================= */

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: "Cormorant Garamond", Georgia, serif !important;
    font-weight: 500;
    letter-spacing: -0.035em;
    line-height: 0.95;
    text-rendering: optimizeLegibility;
}


/* Large premium headings */

h1 {
    font-size: clamp(52px, 7vw, 105px);
}

h2 {
    font-size: clamp(44px, 6vw, 82px);
}

h3 {
    font-size: clamp(30px, 4vw, 52px);
}


    /* Italic premium words */

    h1 em,
    h2 em,
    h3 em,
    h4 em,
    .heading-italic,
    .italic {
        font-family: "Cormorant Garamond", Georgia, serif !important;
        font-style: italic;
        font-weight: 500;
        letter-spacing: -0.045em;
    }


/* =========================================================
   NORMAL WEBSITE TEXT
   ========================================================= */

p,
.description,
.section-description,
.hero-description,
.about-description,
.service-description,
.review-text,
.location-description,
.booking-description {
    font-family: "Inter", Arial, sans-serif !important;
    font-size: 15px;
    font-weight: 400;
    line-height: 1.8;
    letter-spacing: 0.005em;
    color: inherit;
}


/* Premium long-form paragraph */

.about-copy p,
.hero-copy p,
.section-heading p,
.intro-text,
.story-text {
    max-width: 620px;
    line-height: 1.85;
}


/* =========================================================
   PREMIUM INTRO / LEAD TEXT
   ========================================================= */

.lead-text,
.intro-copy,
.hero-copy,
.section-intro {
    font-family: "Cormorant Garamond", Georgia, serif !important;
    font-size: clamp(21px, 2vw, 29px);
    line-height: 1.35;
    font-weight: 500;
    letter-spacing: -0.01em;
}


    /* Normal supporting text underneath */

    .lead-text + p,
    .intro-copy + p {
        font-family: "Inter", Arial, sans-serif !important;
        font-size: 14px;
        line-height: 1.8;
    }


/* =========================================================
   SMALL PREMIUM LABELS
   ========================================================= */

.eyebrow,
.section-label,
.section-kicker,
.category-label,
.small-label,
.overline,
.label {
    font-family: "Inter", Arial, sans-serif !important;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 3px;
    line-height: 1.3;
    text-transform: uppercase;
}


/* =========================================================
   NAVIGATION
   ========================================================= */

.site-header a,
.main-nav a,
.nav-links a {
    font-family: "Inter", Arial, sans-serif !important;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 1.7px;
    text-transform: uppercase;
}


/* =========================================================
   BUTTONS
   ========================================================= */

button,
.btn,
.nav-book,
.nav-instagram,
.book-now,
.view-more,
.view-portfolio,
.cta,
a.button {
    font-family: "Inter", Arial, sans-serif !important;
    font-size: 10px;
    font-weight: 700 !important;
    letter-spacing: 1.7px;
    text-transform: uppercase;
}


/* Premium button feel */

.btn,
.book-now,
.view-more,
.view-portfolio,
.cta {
    min-height: 48px;
    padding: 0 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: transform .25s ease, box-shadow .25s ease, background .25s ease;
}

    .btn:hover,
    .book-now:hover,
    .view-more:hover,
    .view-portfolio:hover,
    .cta:hover {
        transform: translateY(-2px);
    }


/* =========================================================
   WEDDING / PORTFOLIO CARDS
   ========================================================= */

.category-card h3,
.portfolio-card h3,
.wedding-card h3,
.gallery-card h3 {
    font-family: "Cormorant Garamond", Georgia, serif !important;
    font-weight: 500;
    letter-spacing: -0.025em;
    line-height: .95;
}

.category-card p,
.portfolio-card p,
.wedding-card p,
.gallery-card p {
    font-family: "Inter", Arial, sans-serif !important;
    font-size: 11px;
    line-height: 1.6;
}


/* =========================================================
   SERVICES
   ========================================================= */

.service-list h3,
.service-card h3 {
    font-family: "Cormorant Garamond", Georgia, serif !important;
    font-size: clamp(28px, 3vw, 42px);
    font-weight: 500;
    line-height: 1;
}

.service-list p,
.service-card p {
    font-family: "Inter", Arial, sans-serif !important;
    font-size: 13px;
    line-height: 1.75;
}


/* =========================================================
   REVIEWS
   ========================================================= */

.review-grid blockquote,
.review-card blockquote {
    font-family: "Cormorant Garamond", Georgia, serif !important;
    font-size: clamp(22px, 2.4vw, 32px);
    font-weight: 500;
    line-height: 1.25;
    letter-spacing: -0.015em;
}

.review-grid cite,
.review-card cite,
.review-author {
    font-family: "Inter", Arial, sans-serif !important;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}


/* =========================================================
   ABOUT SECTION
   ========================================================= */

.about-copy h2,
.about-content h2 {
    font-family: "Cormorant Garamond", Georgia, serif !important;
    font-size: clamp(48px, 6vw, 82px);
    line-height: .9;
}

.about-copy p,
.about-content p {
    font-family: "Inter", Arial, sans-serif !important;
    font-size: 14px;
    line-height: 1.85;
}


/* =========================================================
   LOCATION / CONTACT
   ========================================================= */

.contact h2,
.location h2 {
    font-family: "Cormorant Garamond", Georgia, serif !important;
}

.contact p,
.location p,
.contact-info,
.location-info {
    font-family: "Inter", Arial, sans-serif !important;
    font-size: 13px;
    line-height: 1.75;
}


/* =========================================================
   FOOTER
   ========================================================= */

footer,
.footer {
    font-family: "Inter", Arial, sans-serif !important;
}

    .footer h3,
    .footer h4 {
        font-family: "Cormorant Garamond", Georgia, serif !important;
    }

    .footer p,
    .footer a {
        font-family: "Inter", Arial, sans-serif !important;
        font-size: 11px;
        line-height: 1.7;
    }


/* =========================================================
   NUMBERS
   ========================================================= */

.number,
.card-number,
.category-number,
.portfolio-number {
    font-family: "Cormorant Garamond", Georgia, serif !important;
    font-size: 18px;
    font-weight: 500;
}


/* =========================================================
   GOLD/ACCENT LABELS
   Keep your existing colour — typography only.
   ========================================================= */

.eyebrow,
.section-label,
.category-label,
.overline {
    font-family: "Inter", Arial, sans-serif !important;
    font-weight: 700;
    letter-spacing: 3px;
}


/* =========================================================
   MOBILE TYPOGRAPHY
   ========================================================= */

@media (max-width: 768px) {

    h1 {
        font-size: clamp(46px, 13vw, 70px);
        line-height: .9;
    }

    h2 {
        font-size: clamp(40px, 11vw, 60px);
        line-height: .92;
    }

    h3 {
        font-size: clamp(28px, 8vw, 40px);
    }

    p,
    .description,
    .section-description,
    .about-description,
    .service-description {
        font-size: 13px !important;
        line-height: 1.75 !important;
    }

    .lead-text,
    .intro-copy,
    .hero-copy,
    .section-intro {
        font-size: 20px !important;
        line-height: 1.35 !important;
    }

    .eyebrow,
    .section-label,
    .category-label,
    .overline {
        font-size: 8px !important;
        letter-spacing: 2.4px !important;
    }

    .site-header a,
    .main-nav a {
        font-size: 9px !important;
        letter-spacing: 1.3px !important;
    }

    button,
    .btn,
    .view-more,
    .view-portfolio,
    .book-now {
        font-size: 8px !important;
        letter-spacing: 1.2px !important;
    }

    .review-grid blockquote,
    .review-card blockquote {
        font-size: 23px !important;
        line-height: 1.3 !important;
    }
}


/* =========================================================
   REMOVE UGLY TEXT SELECTION / BLUE LOOK
   ========================================================= */

::selection {
    background: rgba(190, 145, 55, .20);
    color: inherit;
}


/* =========================================================
   IMPORTANT:
   Do NOT force every text element to the serif font.
   Premium design comes from contrast between serif + sans.
   ========================================================= */
/* =========================================================
   RG PHOTOGRAPHY — FINAL PREMIUM TYPOGRAPHY OVERRIDE
   PASTE THIS AT THE VERY BOTTOM OF style.css
   ========================================================= */

/* ---------- FONT LOADING ---------- */

html,
body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    -webkit-text-size-adjust: 100%;
}

/* ---------- NORMAL WEBSITE TEXT ---------- */

body,
p,
li,
span,
small,
label,
input,
textarea,
select {
    font-family: "Inter", Arial, sans-serif !important;
}

/* Elegant readable paragraph typography */

p,
.description,
.section-description,
.section-note,
.intro-copy,
.hero-sub,
.hero-description,
.about-description,
.service-description,
.location-description,
.booking-description,
.story-text {
    font-family: "Inter", Arial, sans-serif !important;
    font-size: 15px !important;
    font-weight: 400 !important;
    line-height: 1.8 !important;
    letter-spacing: 0.01em !important;
    text-rendering: optimizeLegibility;
}

/* ---------- PREMIUM HEADINGS ---------- */

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: "Cormorant Garamond", Georgia, serif !important;
    font-weight: 500 !important;
    letter-spacing: -0.035em !important;
    line-height: 0.95 !important;
    text-rendering: optimizeLegibility;
}

    /* Elegant italic words */

    h1 em,
    h2 em,
    h3 em,
    h4 em,
    h5 em,
    h6 em,
    .heading-italic,
    .italic {
        font-family: "Cormorant Garamond", Georgia, serif !important;
        font-style: italic !important;
        font-weight: 500 !important;
        letter-spacing: -0.045em !important;
    }

/* ---------- PREMIUM SECTION LABELS ---------- */

.eyebrow,
.section-label,
.category-label,
.overline {
    font-family: "Inter", Arial, sans-serif !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    letter-spacing: 3px !important;
    text-transform: uppercase;
}

/* ---------- NAVIGATION ---------- */

.site-header a,
.main-nav a,
.brand span,
.nav-instagram,
.nav-book {
    font-family: "Inter", Arial, sans-serif !important;
    font-weight: 600 !important;
    letter-spacing: 1.5px !important;
}

/* ---------- BUTTONS ---------- */

button,
.btn,
.button,
.view-more,
.view-portfolio,
.book-now,
.card-view-more {
    font-family: "Inter", Arial, sans-serif !important;
    font-weight: 700 !important;
    letter-spacing: 1.4px !important;
    text-transform: uppercase;
}

/* ---------- REVIEW TEXT ---------- */

.review-grid blockquote,
.review-card blockquote {
    font-family: "Cormorant Garamond", Georgia, serif !important;
    font-size: clamp(24px, 2.5vw, 34px) !important;
    font-weight: 500 !important;
    line-height: 1.25 !important;
    letter-spacing: -0.015em !important;
}

    .review-grid blockquote p,
    .review-card blockquote p,
    .reviews .review-grid blockquote p {
        font-family: "Inter", Arial, sans-serif !important;
        font-size: 15px !important;
        font-weight: 500 !important;
        line-height: 1.8 !important;
        letter-spacing: 0.01em !important;
        color: #111 !important;
    }

.review-grid cite,
.review-card cite,
.review-author {
    font-family: "Inter", Arial, sans-serif !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    letter-spacing: 1.7px !important;
    text-transform: uppercase;
    color: #222 !important;
}

/* ---------- ABOUT ---------- */

.about-copy h2,
.about-content h2 {
    font-family: "Cormorant Garamond", Georgia, serif !important;
}

.about-copy p,
.about-content p {
    font-family: "Inter", Arial, sans-serif !important;
    font-size: 15px !important;
    line-height: 1.85 !important;
}

/* ---------- LOCATION / CONTACT ---------- */

.location h2,
.contact h2 {
    font-family: "Cormorant Garamond", Georgia, serif !important;
}

.location p,
.contact p,
.location-info,
.contact-info {
    font-family: "Inter", Arial, sans-serif !important;
    font-size: 14px !important;
    line-height: 1.8 !important;
}

/* ---------- CARDS ---------- */

.category-card h3,
.wedding-category-card h3,
.service-card h3,
.portfolio-card h3 {
    font-family: "Cormorant Garamond", Georgia, serif !important;
    font-weight: 500 !important;
}

.category-card p,
.wedding-category-card p,
.service-card p,
.portfolio-card p {
    font-family: "Inter", Arial, sans-serif !important;
    font-size: 14px !important;
    line-height: 1.7 !important;
}

/* ---------- CARD NUMBERS ---------- */

.number,
.card-number,
.category-number,
.portfolio-number {
    font-family: "Cormorant Garamond", Georgia, serif !important;
    font-weight: 500 !important;
}

/* ---------- FOOTER ---------- */

.footer,
.footer p,
.footer a,
.footer small {
    font-family: "Inter", Arial, sans-serif !important;
}

    .footer h3,
    .footer h4 {
        font-family: "Cormorant Garamond", Georgia, serif !important;
    }

/* ---------- REMOVE DEFAULT UNDERLINES FROM EDITORIAL TEXT ---------- */

main em,
footer em,
h1 em,
h2 em,
h3 em {
    text-decoration: none !important;
}

/* ---------- BEAUTIFUL TEXT SELECTION ---------- */

::selection {
    background: rgba(190, 145, 55, 0.22) !important;
    color: inherit !important;
}

::-moz-selection {
    background: rgba(190, 145, 55, 0.22) !important;
    color: inherit !important;
}

/* =========================================================
   MOBILE PREMIUM TYPOGRAPHY
   ========================================================= */

@media (max-width: 768px) {

    h1 {
        font-family: "Cormorant Garamond", Georgia, serif !important;
        font-size: clamp(44px, 12vw, 64px) !important;
        line-height: 0.92 !important;
        letter-spacing: -0.035em !important;
    }

    h2 {
        font-family: "Cormorant Garamond", Georgia, serif !important;
        font-size: clamp(38px, 10vw, 56px) !important;
        line-height: 0.94 !important;
        letter-spacing: -0.03em !important;
    }

    h3 {
        font-family: "Cormorant Garamond", Georgia, serif !important;
        font-size: clamp(27px, 7vw, 38px) !important;
        line-height: 1 !important;
    }

    p,
    .description,
    .section-description,
    .section-note,
    .intro-copy,
    .hero-sub,
    .hero-description,
    .about-description,
    .service-description,
    .location-description,
    .booking-description,
    .story-text {
        font-family: "Inter", Arial, sans-serif !important;
        font-size: 14px !important;
        line-height: 1.72 !important;
        letter-spacing: 0.005em !important;
    }

    .eyebrow,
    .section-label,
    .category-label,
    .overline {
        font-family: "Inter", Arial, sans-serif !important;
        font-size: 9px !important;
        letter-spacing: 2.4px !important;
    }

    .review-grid blockquote,
    .review-card blockquote {
        font-family: "Cormorant Garamond", Georgia, serif !important;
        font-size: 24px !important;
        line-height: 1.25 !important;
    }

        .review-grid blockquote p,
        .review-card blockquote p {
            font-family: "Inter", Arial, sans-serif !important;
            font-size: 14px !important;
            line-height: 1.75 !important;
        }

    button,
    .btn,
    .button,
    .view-more,
    .view-portfolio,
    .book-now {
        font-family: "Inter", Arial, sans-serif !important;
        font-size: 10px !important;
        font-weight: 700 !important;
        letter-spacing: 1.2px !important;
    }
}

/* ---------- EXTRA SMALL PHONES ---------- */

@media (max-width: 420px) {

    h1 {
        font-size: 45px !important;
    }

    h2 {
        font-size: 39px !important;
    }

    h3 {
        font-size: 28px !important;
    }

    p,
    .description,
    .section-description,
    .section-note,
    .intro-copy,
    .hero-sub,
    .about-description,
    .service-description {
        font-size: 13.5px !important;
        line-height: 1.7 !important;
    }
}
/* =========================================================
   RG PHOTOGRAPHY — PREMIUM TYPOGRAPHY ONLY
   DO NOT CHANGE LAYOUT / IMAGES / COLOURS
   ========================================================= */

/* Premium fonts */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,400;1,500;1,600&family=Inter:wght@400;500;600;700&display=swap');


/* ---------------------------------------------------------
   NORMAL WEBSITE TEXT
   --------------------------------------------------------- */

body,
p,
li,
td,
th,
label,
input,
textarea,
select,
option {
    font-family: "Inter", Arial, sans-serif !important;
    font-weight: 400;
    letter-spacing: 0.01em;
    line-height: 1.7;
}


/* ---------------------------------------------------------
   PREMIUM HEADINGS
   --------------------------------------------------------- */

h1,
h2,
h3,
h4,
h5,
h6,
.hero-title,
.section-title,
.display-title,
.main-title,
.heading,
.title {
    font-family: "Cormorant Garamond", Georgia, serif !important;
    font-weight: 500 !important;
    letter-spacing: -0.025em;
    line-height: 0.98;
}


    /* Elegant italic words already used in headings */
    h1 em,
    h2 em,
    h3 em,
    h4 em,
    h5 em,
    h6 em,
    .hero-title em,
    .section-title em,
    .display-title em,
    .main-title em,
    .heading em,
    .title em {
        font-family: "Cormorant Garamond", Georgia, serif !important;
        font-style: italic !important;
        font-weight: 500 !important;
    }


/* ---------------------------------------------------------
   SMALL PREMIUM LABELS
   --------------------------------------------------------- */

.eyebrow,
.section-label,
.label,
.kicker,
.overline,
.category-label,
.small-label {
    font-family: "Inter", Arial, sans-serif !important;
    font-weight: 600 !important;
    letter-spacing: 0.22em !important;
    text-transform: uppercase;
}


/* ---------------------------------------------------------
   NAVIGATION
   --------------------------------------------------------- */

nav,
nav a,
.site-header a,
.header a,
.menu a,
.nav-link {
    font-family: "Inter", Arial, sans-serif !important;
    font-weight: 500 !important;
    letter-spacing: 0.12em;
}


/* ---------------------------------------------------------
   BUTTONS
   --------------------------------------------------------- */

button,
.btn,
.button,
.cta,
.cta-button,
a.btn,
a.button {
    font-family: "Inter", Arial, sans-serif !important;
    font-weight: 600 !important;
    letter-spacing: 0.08em;
}


/* ---------------------------------------------------------
   IMAGE / PORTFOLIO TEXT
   --------------------------------------------------------- */

.card-title,
.portfolio-title,
.wedding-title,
.collection-title,
.gallery-title {
    font-family: "Cormorant Garamond", Georgia, serif !important;
    font-weight: 500 !important;
    letter-spacing: -0.015em;
}


/* ---------------------------------------------------------
   REVIEW TEXT
   --------------------------------------------------------- */

.review,
.review p,
.testimonial,
.testimonial p,
.review-text,
.testimonial-text {
    font-family: "Inter", Arial, sans-serif !important;
    font-weight: 400 !important;
    line-height: 1.75;
}


/* Review names */
.review-name,
.client-name,
.testimonial-name {
    font-family: "Inter", Arial, sans-serif !important;
    font-weight: 600 !important;
    letter-spacing: 0.05em;
}


/* ---------------------------------------------------------
   FOOTER
   --------------------------------------------------------- */

footer,
footer p,
footer a,
.footer,
.footer p,
.footer a {
    font-family: "Inter", Arial, sans-serif !important;
}


/* ---------------------------------------------------------
   MOBILE TYPOGRAPHY
   --------------------------------------------------------- */

@media (max-width: 768px) {

    h1,
    .hero-title,
    .main-title,
    .display-title {
        line-height: 0.98 !important;
        letter-spacing: -0.02em !important;
    }

    h2,
    .section-title {
        line-height: 1 !important;
        letter-spacing: -0.015em !important;
    }

    body,
    p {
        line-height: 1.65 !important;
    }

    nav a,
    .nav-link,
    button,
    .btn,
    .button {
        letter-spacing: 0.07em !important;
    }
}
/* =========================================================
   RG PHOTOGRAPHY — FINAL TYPOGRAPHY OVERRIDE
   KEEP EXISTING DESIGN / COLORS / IMAGES
   ONLY CHANGES TEXT TYPOGRAPHY
   ========================================================= */

/* ---------- GLOBAL TEXT ---------- */

html,
body {
    font-family: "Inter", Arial, sans-serif !important;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

/* Normal website text */
body,
p,
li,
span,
small,
label,
input,
textarea,
select,
button {
    font-family: "Inter", Arial, sans-serif !important;
}

/* ---------- PREMIUM HEADINGS ---------- */

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: "Cormorant Garamond", Georgia, serif !important;
    font-weight: 500 !important;
    letter-spacing: -0.025em;
    line-height: 0.95;
    text-rendering: optimizeLegibility;
}

/* ---------- MAIN HERO / LARGE TITLES ---------- */

.hero h1,
.hero-title,
.hero-heading,
.page-title,
.section-title,
.display-title,
.intro-title {
    font-family: "Cormorant Garamond", Georgia, serif !important;
    font-weight: 500 !important;
    letter-spacing: -0.035em;
    line-height: 0.92;
}

/* ---------- NORMAL PARAGRAPHS ---------- */

p,
.description,
.intro-text,
.section-description,
.about-text,
.service-description,
.card-description {
    font-family: "Inter", Arial, sans-serif !important;
    font-weight: 400 !important;
    letter-spacing: 0.005em;
    line-height: 1.75;
}

/* ---------- NAVIGATION ---------- */

.site-header a,
.main-nav a,
nav a,
.menu a {
    font-family: "Inter", Arial, sans-serif !important;
    font-weight: 500 !important;
    letter-spacing: 0.12em;
}

/* ---------- SMALL LABELS ---------- */

.eyebrow,
.section-label,
.category-label,
.overline,
.kicker,
.label {
    font-family: "Inter", Arial, sans-serif !important;
    font-weight: 600 !important;
    letter-spacing: 0.22em;
    text-transform: uppercase;
}

/* ---------- BUTTONS ---------- */

button,
.btn,
.button,
a.btn,
a.button {
    font-family: "Inter", Arial, sans-serif !important;
    font-weight: 600 !important;
    letter-spacing: 0.08em;
}

/* ---------- WEDDING / PORTFOLIO TITLES ---------- */

.wedding-card h2,
.wedding-card h3,
.portfolio-card h2,
.portfolio-card h3,
.collection-title,
.card-title {
    font-family: "Cormorant Garamond", Georgia, serif !important;
    font-weight: 500 !important;
    letter-spacing: -0.025em;
    line-height: 1;
}

/* ---------- REVIEW TEXT ---------- */

.review,
.review p,
.review-text,
.testimonial,
.testimonial p,
.testimonial-text,
.client-review {
    font-family: "Inter", Arial, sans-serif !important;
    font-weight: 400 !important;
    letter-spacing: 0.01em;
    line-height: 1.7;
}

/* Review names */
.review-name,
.client-name,
.testimonial-name {
    font-family: "Inter", Arial, sans-serif !important;
    font-weight: 600 !important;
    letter-spacing: 0.08em;
}

/* ---------- FOOTER ---------- */

footer,
footer p,
footer a,
footer span,
.footer-text {
    font-family: "Inter", Arial, sans-serif !important;
}

/* ---------- FORM TEXT ---------- */

input,
textarea,
select,
option {
    font-family: "Inter", Arial, sans-serif !important;
}

/* ---------- MOBILE TYPOGRAPHY ---------- */

@media (max-width: 768px) {

    body {
        font-family: "Inter", Arial, sans-serif !important;
        font-size: 15px;
    }

    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
        font-family: "Cormorant Garamond", Georgia, serif !important;
    }

    p,
    li,
    span {
        font-family: "Inter", Arial, sans-serif !important;
    }

    .hero h1,
    .hero-title,
    .hero-heading,
    .page-title {
        letter-spacing: -0.025em;
        line-height: 0.95;
    }

    .section-title,
    .display-title,
    .intro-title {
        letter-spacing: -0.025em;
        line-height: 0.95;
    }

    .section-label,
    .eyebrow,
    .category-label,
    .overline,
    .kicker {
        letter-spacing: 0.16em;
    }

    .review,
    .review p,
    .review-text,
    .testimonial,
    .testimonial p {
        line-height: 1.65;
    }

    button,
    .btn,
    .button {
        letter-spacing: 0.06em;
    }
}

/* ---------- REMOVE BLUE TEXT SELECTION LOOK ---------- */

::selection {
    background: rgba(190, 145, 55, 0.20);
    color: inherit;
}
/* =========================================================
   RG PHOTOGRAPHY - FINAL FONT OVERRIDE
   ONLY CHANGES TEXT FONTS
   DOES NOT CHANGE LAYOUT, COLORS, IMAGES OR DESIGN
   ========================================================= */

/* Normal website text */
html body p,
html body li,
html body span,
html body a,
html body button,
html body label,
html body input,
html body textarea,
html body select {
    font-family: "Inter", Arial, sans-serif !important;
}

/* Main headings */
html body h1,
html body h2,
html body h3,
html body h4,
html body h5,
html body h6 {
    font-family: "Cormorant Garamond", Georgia, serif !important;
}

/* Make the main hero / large display headings premium serif */
html body .hero h1,
html body .hero h2,
html body .hero-title,
html body .section-title,
html body .display-title {
    font-family: "Cormorant Garamond", Georgia, serif !important;
}

/* Small labels remain clean sans-serif */
html body small,
html body .eyebrow,
html body .label,
html body .section-label {
    font-family: "Inter", Arial, sans-serif !important;
}
/* =========================================================
   RG PHOTOGRAPHY
   FINAL FONT CHANGE
   FONT ONLY - DO NOT CHANGE DESIGN
   ========================================================= */

/* ALL WEBSITE TEXT */
html,
body,
body * {
    font-family: "Cormorant Garamond", Georgia, serif !important;
}

/* HEADINGS */
h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: "Cormorant Garamond", Georgia, serif !important;
    font-weight: 500 !important;
}

/* PARAGRAPHS */
p,
li,
span,
small,
label {
    font-family: "Cormorant Garamond", Georgia, serif !important;
}

/* LINKS */
a,
a span {
    font-family: "Cormorant Garamond", Georgia, serif !important;
}

/* BUTTONS */
button,
.btn,
.button,
.nav-book,
.nav-instagram,
.card-view-more,
.view-more,
.view-portfolio {
    font-family: "Cormorant Garamond", Georgia, serif !important;
}

/* FORM TEXT */
input,
textarea,
select,
option {
    font-family: "Cormorant Garamond", Georgia, serif !important;
}

/* ITALIC WORDS */
em,
i,
h1 em,
h2 em,
h3 em,
h4 em,
h5 em,
h6 em {
    font-family: "Cormorant Garamond", Georgia, serif !important;
    font-style: italic !important;
}

/* CARD TITLES */
.category-card h3,
.portfolio-card h3,
.service-list h3,
.service-card h3,
.video-card h3,
.team-card h3 {
    font-family: "Cormorant Garamond", Georgia, serif !important;
}

/* SIGNATURE */
.signature {
    font-family: "Cormorant Garamond", Georgia, serif !important;
}

/* =========================================================
   END FONT CHANGE
   ========================================================= */
/* =========================================================
   INTRO PARAGRAPH - FORCE CORMORANT GARAMOND
   ========================================================= */

.intro-text {
    font-family: "Cormorant Garamond", Georgia, serif !important;
    font-size: 22px !important;
    font-weight: 500 !important;
    line-height: 1.45 !important;
    letter-spacing: 0 !important;
}

    .intro-text p {
        font-family: "Cormorant Garamond", Georgia, serif !important;
        font-size: 22px !important;
        font-weight: 500 !important;
        line-height: 1.45 !important;
        letter-spacing: 0 !important;
    }

.intro p {
    font-family: "Cormorant Garamond", Georgia, serif !important;
    font-size: 22px !important;
    font-weight: 500 !important;
    line-height: 1.45 !important;
    letter-spacing: 0 !important;
}
/* =========================================================
   RG PHOTOGRAPHY - GLOBAL TEXT FONT
   ========================================================= */

/* All normal website text */
body,
p,
li,
span,
div,
section,
article,
blockquote,
figcaption,
label,
small,
strong,
em {
    font-family: "Cormorant Garamond", Georgia, serif !important;
}

/* Headings */
h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: "Cormorant Garamond", Georgia, serif !important;
}

/* Paragraphs */
p {
    font-family: "Cormorant Garamond", Georgia, serif !important;
    font-weight: 500 !important;
}

/* Links */
a {
    font-family: "Cormorant Garamond", Georgia, serif !important;
}

/* Form fields */
input,
textarea,
select {
    font-family: "Cormorant Garamond", Georgia, serif !important;
}

/* =========================================================
   KEEP NAVIGATION AND BUTTONS AS CLEAN SANS-SERIF
   ========================================================= */

.site-header,
.site-header *,
.main-nav,
.main-nav *,
nav,
nav *,
button,
.btn,
.btn-primary,
.btn-outline,
.menu-toggle {
    font-family: "Inter", Arial, sans-serif !important;
}
/* =========================================================
   RG PHOTOGRAPHY
   FLOATING SOCIAL BUTTONS
   ARUN PHOTOGRAPHY STYLE
========================================================= */

.floating-social-buttons {
    position: fixed;
    right: 24px;
    bottom: 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    z-index: 99999;
    pointer-events: none;
}


/* =========================================================
   COMMON CIRCULAR BUTTON
========================================================= */

.floating-social {
    width: 58px;
    height: 58px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    box-sizing: border-box;
    pointer-events: auto;
    transition: transform 0.25s ease, box-shadow 0.25s ease, opacity 0.25s ease;
}


/* =========================================================
   INSTAGRAM BUTTON
========================================================= */

.instagram-float {
    background: linear-gradient( 135deg, #feda75 0%, #fa7e1e 25%, #d62976 50%, #962fbf 75%, #4f5bd5 100% );
    box-shadow: 0 5px 18px rgba(0, 0, 0, 0.22);
}


    /* Instagram SVG */

    .instagram-float svg {
        width: 31px;
        height: 31px;
        fill: none;
        stroke: #ffffff;
        stroke-width: 1.8;
        stroke-linecap: round;
        stroke-linejoin: round;
    }


        /* Instagram small dot */

        .instagram-float svg .instagram-dot {
            fill: #ffffff;
            stroke: none;
        }


    /* Instagram hover */

    .instagram-float:hover {
        transform: translateY(-3px) scale(1.05);
        box-shadow: 0 8px 22px rgba(0, 0, 0, 0.28);
    }


/* =========================================================
   WHATSAPP BUTTON
========================================================= */

.whatsapp-float {
    background: #25D366;
    box-shadow: 0 5px 18px rgba(0, 0, 0, 0.22);
}


    /* WhatsApp SVG */

    .whatsapp-float svg {
        width: 32px;
        height: 32px;
        fill: #ffffff;
        display: block;
    }


    /* WhatsApp hover */

    .whatsapp-float:hover {
        transform: translateY(-3px) scale(1.05);
        box-shadow: 0 8px 22px rgba(0, 0, 0, 0.28);
    }


/* =========================================================
   REMOVE OLD LARGE WHATSAPP PILL
========================================================= */

/*
   If the old WhatsApp button uses these classes,
   hide the old version.
*/

body > .whatsapp-float:not(.floating-social) {
    display: none !important;
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 768px) {

    .floating-social-buttons {
        right: 14px;
        bottom: 16px;
        gap: 10px;
    }


    .floating-social {
        width: 54px;
        height: 54px;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.22);
    }


    .instagram-float svg {
        width: 28px;
        height: 28px;
    }


    .whatsapp-float svg {
        width: 29px;
        height: 29px;
    }
}


/* =========================================================
   SMALL MOBILE PHONES
========================================================= */

@media (max-width: 480px) {

    .floating-social-buttons {
        right: 12px;
        bottom: 14px;
        gap: 9px;
    }


    .floating-social {
        width: 52px;
        height: 52px;
    }


    .instagram-float svg {
        width: 27px;
        height: 27px;
    }


    .whatsapp-float svg {
        width: 28px;
        height: 28px;
    }
}


/* =========================================================
   PREVENT BUTTON FROM BEING AFFECTED BY GLOBAL LINK CSS
========================================================= */

.floating-social-buttons a {
    border: none !important;
    outline: none !important;
    text-decoration: none !important;
    padding: 0 !important;
    margin: 0 !important;
}


    /* =========================================================
   ACCESSIBILITY
========================================================= */

    .floating-social-buttons a:focus-visible {
        outline: 3px solid rgba(255, 255, 255, 0.9) !important;
        outline-offset: 3px;
    }
/* =========================================================
   PREMIUM CTA BUTTONS
   RG PHOTOGRAPHY - BOOK / CALL / FACEBOOK
   ========================================================= */


/* ---------------------------------------------------------
   COMMON PREMIUM BUTTON STYLE
   --------------------------------------------------------- */

.booking-whatsapp,
.call-button,
.facebook-button {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 58px;
    padding: 16px 26px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 4px;
    box-sizing: border-box;
    font-family: "Inter", Arial, sans-serif !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    letter-spacing: 2px !important;
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease, background 0.3s ease, border-color 0.3s ease;
}


    /* ---------------------------------------------------------
   PREMIUM SHINE EFFECT
   --------------------------------------------------------- */

    .booking-whatsapp::before,
    .call-button::before,
    .facebook-button::before {
        content: "";
        position: absolute;
        top: 0;
        left: -120%;
        width: 80%;
        height: 100%;
        background: linear-gradient( 90deg, transparent, rgba(255,255,255,0.25), transparent );
        transform: skewX(-20deg);
        transition: left 0.7s ease;
    }


    .booking-whatsapp:hover::before,
    .call-button:hover::before,
    .facebook-button:hover::before {
        left: 140%;
    }


/* ---------------------------------------------------------
   BOOK VIA WHATSAPP
   --------------------------------------------------------- */

.booking-whatsapp {
    background: linear-gradient( 135deg, #20c866, #25d366 );
    color: #ffffff !important;
    border-color: rgba(255,255,255,0.25);
    box-shadow: 0 8px 25px rgba(37, 211, 102, 0.18);
}


    .booking-whatsapp:hover {
        transform: translateY(-3px);
        background: linear-gradient( 135deg, #25d366, #20bd5a );
        border-color: rgba(255,255,255,0.45);
        box-shadow: 0 14px 35px rgba(37, 211, 102, 0.28);
    }


/* ---------------------------------------------------------
   CALL NOW
   --------------------------------------------------------- */

.call-button {
    margin-top: 12px;
    background: linear-gradient( 135deg, #b98b18, #d2aa28 );
    color: #ffffff !important;
    border-color: rgba(255, 255, 255, 0.22);
    box-shadow: 0 8px 25px rgba(190, 150, 30, 0.16);
}


    .call-button:hover {
        transform: translateY(-3px);
        background: linear-gradient( 135deg, #d2aa28, #b98b18 );
        border-color: rgba(255, 255, 255, 0.45);
        box-shadow: 0 14px 35px rgba(190, 150, 30, 0.28);
    }


/* ---------------------------------------------------------
   FACEBOOK
   --------------------------------------------------------- */

.facebook-button {
    background: linear-gradient( 135deg, #a87913, #d2a72a );
    color: #ffffff !important;
    border-color: rgba(255, 255, 255, 0.20);
    box-shadow: 0 8px 25px rgba(190, 150, 30, 0.14);
}


    .facebook-button:hover {
        transform: translateY(-3px);
        background: linear-gradient( 135deg, #d2a72a, #b58217 );
        border-color: rgba(255, 255, 255, 0.45);
        box-shadow: 0 14px 35px rgba(190, 150, 30, 0.25);
    }


    /* ---------------------------------------------------------
   BUTTON ACTIVE
   --------------------------------------------------------- */

    .booking-whatsapp:active,
    .call-button:active,
    .facebook-button:active {
        transform: translateY(-1px) scale(0.99);
    }


    /* ---------------------------------------------------------
   BUTTON TEXT
   --------------------------------------------------------- */

    .booking-whatsapp span,
    .call-button span,
    .facebook-button span {
        position: relative;
        z-index: 2;
        font-family: "Inter", Arial, sans-serif !important;
        font-size: 12px !important;
        font-weight: 700 !important;
        letter-spacing: 2px !important;
        line-height: 1.2;
    }


/* ---------------------------------------------------------
   IF BUTTON DOES NOT HAVE SPAN
   --------------------------------------------------------- */

.booking-whatsapp,
.call-button,
.facebook-button {
    text-align: center;
}


/* ---------------------------------------------------------
   BOTTOM CTA CONTAINER
   --------------------------------------------------------- */

.booking-actions {
    display: flex;
    flex-direction: column;
    gap: 12px;
}


/* ---------------------------------------------------------
   MOBILE
   --------------------------------------------------------- */

@media (max-width: 768px) {

    .booking-whatsapp,
    .call-button,
    .facebook-button {
        min-height: 56px;
        padding: 15px 20px;
        font-size: 11px !important;
        letter-spacing: 1.8px !important;
    }
}


/* ---------------------------------------------------------
   SMALL MOBILE
   --------------------------------------------------------- */

@media (max-width: 480px) {

    .booking-whatsapp,
    .call-button,
    .facebook-button {
        min-height: 54px;
        padding: 14px 18px;
        font-size: 10px !important;
        letter-spacing: 1.6px !important;
        border-radius: 3px;
    }
}
/* =========================================================
   FACEBOOK BUTTON — SIZE FIX ONLY
   ========================================================= */

.footer-socials .facebook-button,
.facebook-button {
    width: 240px !important;
    max-width: 240px !important;
    min-width: 240px !important;
    height: 50px !important;
    min-height: 50px !important;
    padding: 0 20px !important;
    margin: 0 auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
    border-radius: 0 !important;
    font-size: 12px !important;
    letter-spacing: 0.16em !important;
}
/* =========================================================
   RG PHOTOGRAPHY - ABOUT DESCRIPTION FONT
   ========================================================= */

.about-description {
    font-family: Georgia, "Times New Roman", serif !important;
    font-size: 20px !important;
    font-weight: 400 !important;
    font-style: italic !important;
    line-height: 1.75 !important;
    letter-spacing: 0.2px !important;
    color: #333333 !important;
}
/* =========================================================
   PORTFOLIO CARD DESIGN - FINAL OVERRIDE
   Pre-Wedding / Post-Wedding / Baby Shoot / Maternity Shoot
   ========================================================= */

.portfolio-grid {
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-template-rows: repeat(2, 340px) !important;
    gap: 18px !important;
    align-items: stretch !important;
}

    /* Remove old tall/right positioning */
    .portfolio-grid .portfolio-card,
    .portfolio-grid .portfolio-card.tall,
    .portfolio-grid .portfolio-right,
    .portfolio-grid .portfolio-right .portfolio-card {
        position: relative !important;
        width: 100% !important;
        height: 340px !important;
        min-height: 340px !important;
        grid-column: auto !important;
        grid-row: auto !important;
        margin: 0 !important;
    }

    /* Card */
    .portfolio-grid .portfolio-card {
        display: block !important;
        overflow: hidden !important;
        background: #111 !important;
        border: 1px solid #d9d9d9 !important;
        box-shadow: 0 18px 42px rgba(0, 0, 0, 0.10) !important;
        text-decoration: none !important;
    }

        /* Image/background */
        .portfolio-grid .portfolio-card > div {
            position: absolute !important;
            inset: 0 !important;
            width: 100% !important;
            height: 100% !important;
            background-size: cover !important;
            background-position: center !important;
            background-repeat: no-repeat !important;
            filter: grayscale(0.25) !important;
            transition: transform 0.7s ease, filter 0.7s ease !important;
        }

        /* Dark cinematic overlay */
        .portfolio-grid .portfolio-card::after {
            content: "" !important;
            position: absolute !important;
            inset: 0 !important;
            background: linear-gradient( to top, rgba(0, 0, 0, 0.78) 0%, rgba(0, 0, 0, 0.20) 48%, rgba(0, 0, 0, 0.02) 100% ) !important;
            z-index: 2 !important;
            pointer-events: none !important;
        }

        /* Hover image */
        .portfolio-grid .portfolio-card:hover > div {
            transform: scale(1.06) !important;
            filter: grayscale(0) !important;
        }

        /* Portfolio card content */
        .portfolio-grid .portfolio-card .portfolio-content,
        .portfolio-grid .portfolio-card .card-content,
        .portfolio-grid .portfolio-card > span,
        .portfolio-grid .portfolio-card > h3,
        .portfolio-grid .portfolio-card > p {
            position: relative;
            z-index: 3;
        }

        /* Make title sit at bottom */
        .portfolio-grid .portfolio-card h3 {
            position: absolute !important;
            left: 24px !important;
            bottom: 48px !important;
            z-index: 4 !important;
            margin: 0 !important;
            color: #fff !important;
            font-family: Georgia, "Times New Roman", serif !important;
            font-size: clamp(28px, 3vw, 42px) !important;
            font-weight: 400 !important;
            line-height: 1 !important;
            text-transform: none !important;
        }

        /* Number */
        .portfolio-grid .portfolio-card .portfolio-number,
        .portfolio-grid .portfolio-card .number,
        .portfolio-grid .portfolio-card .card-number {
            position: absolute !important;
            top: 18px !important;
            left: 18px !important;
            z-index: 4 !important;
            width: 38px !important;
            height: 38px !important;
            display: flex !important;
            align-items: center !important;
            justify-content: center !important;
            color: #fff !important;
            border: 1px solid rgba(255,255,255,0.7) !important;
            background: rgba(0,0,0,0.35) !important;
            font-size: 12px !important;
            letter-spacing: 1px !important;
        }

        /* View story / view more */
        .portfolio-grid .portfolio-card .portfolio-link,
        .portfolio-grid .portfolio-card .view-link,
        .portfolio-grid .portfolio-card a {
            position: absolute !important;
            left: 24px !important;
            bottom: 20px !important;
            z-index: 5 !important;
            color: #fff !important;
            font-size: 10px !important;
            font-weight: 700 !important;
            letter-spacing: 1.8px !important;
            text-decoration: none !important;
            text-transform: uppercase !important;
        }

            /* Arrow */
            .portfolio-grid .portfolio-card .portfolio-link::after,
            .portfolio-grid .portfolio-card .view-link::after {
                content: " →" !important;
            }

/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 900px) {

    .portfolio-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        grid-template-rows: repeat(2, 300px) !important;
        gap: 14px !important;
    }

        .portfolio-grid .portfolio-card,
        .portfolio-grid .portfolio-card.tall,
        .portfolio-grid .portfolio-right,
        .portfolio-grid .portfolio-right .portfolio-card {
            height: 300px !important;
            min-height: 300px !important;
        }

            .portfolio-grid .portfolio-card h3 {
                left: 18px !important;
                bottom: 44px !important;
                font-size: 32px !important;
            }

            .portfolio-grid .portfolio-card .portfolio-link,
            .portfolio-grid .portfolio-card .view-link,
            .portfolio-grid .portfolio-card a {
                left: 18px !important;
                bottom: 17px !important;
            }
}

/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 600px) {

    .portfolio-grid {
        width: 100% !important;
        grid-template-columns: 1fr !important;
        grid-template-rows: repeat(4, 330px) !important;
        gap: 12px !important;
    }

        .portfolio-grid .portfolio-card,
        .portfolio-grid .portfolio-card.tall,
        .portfolio-grid .portfolio-right,
        .portfolio-grid .portfolio-right .portfolio-card {
            height: 330px !important;
            min-height: 330px !important;
        }

            .portfolio-grid .portfolio-card h3 {
                left: 18px !important;
                bottom: 45px !important;
                font-size: 30px !important;
            }

            .portfolio-grid .portfolio-card .portfolio-link,
            .portfolio-grid .portfolio-card .view-link,
            .portfolio-grid .portfolio-card a {
                left: 18px !important;
                bottom: 18px !important;
            }
}
/* =========================================================
   RG PHOTOGRAPHY
   FINAL HOMEPAGE PORTFOLIO CARD DESIGN
   MATCHES WEDDING CATEGORY CARD STYLE
   ========================================================= */

/* ---------- PORTFOLIO GRID ---------- */

#portfolio .portfolio-grid {
    width: 100%;
    max-width: 1320px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(2, 390px);
    gap: 18px;
    align-items: stretch;
}


/* ---------- PORTFOLIO CARD ---------- */

#portfolio .portfolio-card {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    height: 390px !important;
    min-height: 390px !important;
    overflow: hidden !important;
    background: #111 !important;
    border: 1px solid #d9d9d9 !important;
    text-decoration: none !important;
    box-sizing: border-box !important;
    isolation: isolate !important;
}


    /* ---------- IMAGE ---------- */

    #portfolio .portfolio-card .portfolio-image,
    #portfolio .portfolio-card > img {
        position: absolute !important;
        inset: 0 !important;
        width: 100% !important;
        height: 100% !important;
        display: block !important;
        object-fit: cover !important;
        object-position: center !important;
        margin: 0 !important;
        filter: none !important;
        transform: scale(1) !important;
        transition: transform 0.7s cubic-bezier(.2,.7,.2,1), filter 0.5s ease !important;
        z-index: 1 !important;
    }


    /* ---------- IMAGE HOVER ---------- */

    #portfolio .portfolio-card:hover .portfolio-image,
    #portfolio .portfolio-card:hover > img {
        transform: scale(1.06) !important;
        filter: none !important;
    }


    /* =========================================================
   DARK CINEMATIC GRADIENT
   SAME FEEL AS WEDDING CATEGORY CARDS
   ========================================================= */

    #portfolio .portfolio-card::after {
        content: "" !important;
        position: absolute !important;
        inset: 0 !important;
        background: linear-gradient( to top, rgba(0,0,0,.88) 0%, rgba(0,0,0,.55) 30%, rgba(0,0,0,.15) 62%, rgba(0,0,0,0) 100% ) !important;
        pointer-events: none !important;
        z-index: 2 !important;
        display: block !important;
        opacity: 1 !important;
    }


    /* =========================================================
   INNER GOLD FRAME
   ========================================================= */

    #portfolio .portfolio-card::before {
        content: "" !important;
        position: absolute !important;
        inset: 10px !important;
        border: 1px solid rgba(216,178,84,.65) !important;
        pointer-events: none !important;
        z-index: 5 !important;
        display: block !important;
        opacity: 1 !important;
    }


    /* =========================================================
   PORTFOLIO OVERLAY
   ========================================================= */

    #portfolio .portfolio-card .portfolio-overlay {
        position: absolute !important;
        inset: 0 !important;
        width: 100% !important;
        height: 100% !important;
        padding: 0 !important;
        display: block !important;
        z-index: 6 !important;
        background: transparent !important;
    }


    /* =========================================================
   NUMBER
   ========================================================= */

    #portfolio .portfolio-card .portfolio-number {
        position: absolute !important;
        top: 20px !important;
        left: 20px !important;
        z-index: 10 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 42px !important;
        height: 42px !important;
        min-width: 42px !important;
        padding: 0 !important;
        box-sizing: border-box !important;
        background: rgba(8,8,8,.72) !important;
        border: 1px solid rgba(255,255,255,.75) !important;
        color: #fff !important;
        font-family: "Inter", Arial, sans-serif !important;
        font-size: 10px !important;
        font-weight: 700 !important;
        letter-spacing: 1.5px !important;
        line-height: 1 !important;
    }


    /* =========================================================
   BOTTOM CONTENT
   ========================================================= */

    #portfolio .portfolio-card .portfolio-bottom {
        position: absolute !important;
        left: 28px !important;
        right: 28px !important;
        bottom: 27px !important;
        z-index: 10 !important;
        margin: 0 !important;
        padding: 0 !important;
    }


        /* =========================================================
   TITLE
   LARGE WHITE SERIF
   LIKE HALDI / HINDU WEDDING CARDS
   ========================================================= */

        #portfolio .portfolio-card .portfolio-bottom h3 {
            position: relative !important;
            margin: 0 0 12px 0 !important;
            padding: 0 !important;
            color: #fff !important;
            font-family: "Cormorant Garamond", Georgia, serif !important;
            font-size: clamp(34px, 3.4vw, 52px) !important;
            font-weight: 500 !important;
            line-height: .95 !important;
            letter-spacing: 0 !important;
            text-transform: none !important;
            text-shadow: 0 2px 12px rgba(0,0,0,.75) !important;
            background: transparent !important;
            border: 0 !important;
            display: block !important;
        }


        /* =========================================================
   VIEW STORY
   ========================================================= */

        #portfolio .portfolio-card .portfolio-bottom::after {
            content: "VIEW STORY  →" !important;
            display: block !important;
            color: #fff !important;
            font-family: "Inter", Arial, sans-serif !important;
            font-size: 9px !important;
            font-weight: 700 !important;
            letter-spacing: 2px !important;
            line-height: 1 !important;
            text-transform: uppercase !important;
            opacity: .95 !important;
        }


    /* =========================================================
   HOVER VIEW STORY
   ========================================================= */

    #portfolio .portfolio-card:hover .portfolio-bottom::after {
        letter-spacing: 2.5px !important;
    }


    /* =========================================================
   REMOVE OLD PORTFOLIO BUTTONS
   ========================================================= */

    #portfolio .portfolio-card .portfolio-view,
    #portfolio .portfolio-card .card-view-more,
    #portfolio .portfolio-card .view-more,
    #portfolio .portfolio-card .view-more-btn {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }


    /* =========================================================
   REMOVE OLD PORTFOLIO CONTENT POSITIONS
   ========================================================= */

    #portfolio .portfolio-card .portfolio-content {
        position: absolute !important;
        inset: auto !important;
        left: auto !important;
        right: auto !important;
        top: auto !important;
        bottom: auto !important;
        width: auto !important;
        height: auto !important;
        margin: 0 !important;
        padding: 0 !important;
        transform: none !important;
        z-index: 10 !important;
    }


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 900px) {

    #portfolio .portfolio-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        grid-template-rows: repeat(2, 330px) !important;
        gap: 12px !important;
    }

    #portfolio .portfolio-card {
        height: 330px !important;
        min-height: 330px !important;
    }

        #portfolio .portfolio-card .portfolio-number {
            top: 14px !important;
            left: 14px !important;
            width: 36px !important;
            height: 36px !important;
            min-width: 36px !important;
            font-size: 9px !important;
        }

        #portfolio .portfolio-card .portfolio-bottom {
            left: 20px !important;
            right: 20px !important;
            bottom: 20px !important;
        }

            #portfolio .portfolio-card .portfolio-bottom h3 {
                font-size: 36px !important;
                margin-bottom: 10px !important;
            }

            #portfolio .portfolio-card .portfolio-bottom::after {
                font-size: 8px !important;
                letter-spacing: 1.7px !important;
            }

        #portfolio .portfolio-card::before {
            inset: 8px !important;
        }
}


/* =========================================================
   MOBILE
   EXACT 2 x 2
   PRE-WEDDING | POST-WEDDING
   BABY       | MATERNITY
   ========================================================= */

@media (max-width: 600px) {

    #portfolio .portfolio-grid {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        grid-template-rows: repeat(2, 205px) !important;
        gap: 8px !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }


    #portfolio .portfolio-card {
        width: 100% !important;
        height: 205px !important;
        min-height: 205px !important;
        margin: 0 !important;
    }


        #portfolio .portfolio-card .portfolio-number {
            top: 9px !important;
            left: 9px !important;
            width: 30px !important;
            height: 30px !important;
            min-width: 30px !important;
            font-size: 7px !important;
            letter-spacing: 1px !important;
        }


        #portfolio .portfolio-card::before {
            inset: 6px !important;
            border-color: rgba(216,178,84,.6) !important;
        }


        #portfolio .portfolio-card .portfolio-bottom {
            left: 12px !important;
            right: 12px !important;
            bottom: 12px !important;
        }


            #portfolio .portfolio-card .portfolio-bottom h3 {
                font-size: 25px !important;
                line-height: .95 !important;
                margin-bottom: 7px !important;
                letter-spacing: 0 !important;
            }


            #portfolio .portfolio-card .portfolio-bottom::after {
                font-size: 6px !important;
                letter-spacing: 1.2px !important;
            }
}


/* =========================================================
   VERY SMALL MOBILE
   ========================================================= */

@media (max-width: 380px) {

    #portfolio .portfolio-grid {
        gap: 6px !important;
        grid-template-rows: repeat(2, 175px) !important;
    }


    #portfolio .portfolio-card {
        height: 175px !important;
        min-height: 175px !important;
    }


        #portfolio .portfolio-card .portfolio-bottom {
            left: 9px !important;
            right: 9px !important;
            bottom: 9px !important;
        }


            #portfolio .portfolio-card .portfolio-bottom h3 {
                font-size: 21px !important;
                margin-bottom: 6px !important;
            }


            #portfolio .portfolio-card .portfolio-bottom::after {
                font-size: 5.5px !important;
                letter-spacing: 1px !important;
            }


        #portfolio .portfolio-card .portfolio-number {
            top: 7px !important;
            left: 7px !important;
            width: 26px !important;
            height: 26px !important;
            min-width: 26px !important;
            font-size: 6px !important;
        }
}
/* =========================================================
   RG PHOTOGRAPHY - PORTFOLIO
   FINAL CARD DESIGN
   Uses the ACTUAL HTML:
   .portfolio-card
   .portfolio-image
   .portfolio-overlay
   .portfolio-number
   .portfolio-title
   ========================================================= */

#portfolio .portfolio-grid {
    width: 100%;
    max-width: 1320px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(2, 390px);
    gap: 18px;
}


/* ================= CARD ================= */

#portfolio .portfolio-card {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    height: 390px !important;
    min-height: 390px !important;
    overflow: hidden !important;
    background: #111 !important;
    border: 1px solid #d9d9d9 !important;
    text-decoration: none !important;
    box-sizing: border-box !important;
}


    /* ================= IMAGE ================= */

    #portfolio .portfolio-card .portfolio-image {
        position: absolute !important;
        inset: 0 !important;
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        object-position: center !important;
        display: block !important;
        margin: 0 !important;
        transform: scale(1) !important;
        transition: transform .7s ease !important;
        z-index: 1 !important;
    }


    /* IMAGE HOVER */

    #portfolio .portfolio-card:hover .portfolio-image {
        transform: scale(1.06) !important;
    }


    /* ================= DARK GRADIENT ================= */

    #portfolio .portfolio-card::after {
        content: "" !important;
        position: absolute !important;
        inset: 0 !important;
        background: linear-gradient( to top, rgba(0,0,0,.90) 0%, rgba(0,0,0,.58) 28%, rgba(0,0,0,.20) 58%, rgba(0,0,0,0) 100% ) !important;
        z-index: 2 !important;
        pointer-events: none !important;
    }


    /* ================= GOLD INNER BORDER ================= */

    #portfolio .portfolio-card::before {
        content: "" !important;
        position: absolute !important;
        inset: 10px !important;
        border: 1px solid rgba(216,178,84,.65) !important;
        z-index: 5 !important;
        pointer-events: none !important;
    }


    /* ================= OVERLAY ================= */

    #portfolio .portfolio-card .portfolio-overlay {
        position: absolute !important;
        inset: 0 !important;
        width: 100% !important;
        height: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
        background: transparent !important;
        z-index: 6 !important;
    }


    /* ================= NUMBER ================= */

    #portfolio .portfolio-card .portfolio-number {
        position: absolute !important;
        top: 20px !important;
        left: 20px !important;
        width: 42px !important;
        height: 42px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        box-sizing: border-box !important;
        background: rgba(10,10,10,.70) !important;
        border: 1px solid rgba(255,255,255,.75) !important;
        color: #fff !important;
        font-family: "Inter", Arial, sans-serif !important;
        font-size: 10px !important;
        font-weight: 700 !important;
        letter-spacing: 1.5px !important;
        line-height: 1 !important;
        z-index: 10 !important;
    }


    /* ================= TITLE CONTAINER ================= */

    #portfolio .portfolio-card .portfolio-title {
        position: absolute !important;
        left: 28px !important;
        right: 28px !important;
        bottom: 28px !important;
        margin: 0 !important;
        padding: 0 !important;
        z-index: 10 !important;
    }


        /* ================= TITLE ================= */

        #portfolio .portfolio-card .portfolio-title h3 {
            margin: 0 !important;
            padding: 0 !important;
            color: #fff !important;
            font-family: "Cormorant Garamond", Georgia, serif !important;
            font-size: clamp(34px, 3.4vw, 52px) !important;
            font-weight: 500 !important;
            line-height: .95 !important;
            letter-spacing: 0 !important;
            text-transform: none !important;
            text-shadow: 0 2px 12px rgba(0,0,0,.80) !important;
        }


        /* ================= VIEW STORY ================= */

        #portfolio .portfolio-card .portfolio-title::after {
            content: "VIEW STORY  →" !important;
            display: block !important;
            margin-top: 12px !important;
            color: #fff !important;
            font-family: "Inter", Arial, sans-serif !important;
            font-size: 9px !important;
            font-weight: 700 !important;
            letter-spacing: 2px !important;
            text-transform: uppercase !important;
        }


    /* ================= HOVER ================= */

    #portfolio .portfolio-card:hover .portfolio-title::after {
        letter-spacing: 2.5px !important;
    }


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 900px) {

    #portfolio .portfolio-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        grid-template-rows: repeat(2, 330px) !important;
        gap: 12px !important;
    }


    #portfolio .portfolio-card {
        height: 330px !important;
        min-height: 330px !important;
    }


        #portfolio .portfolio-card .portfolio-number {
            top: 14px !important;
            left: 14px !important;
            width: 36px !important;
            height: 36px !important;
            font-size: 9px !important;
        }


        #portfolio .portfolio-card .portfolio-title {
            left: 20px !important;
            right: 20px !important;
            bottom: 20px !important;
        }


            #portfolio .portfolio-card .portfolio-title h3 {
                font-size: 36px !important;
            }


            #portfolio .portfolio-card .portfolio-title::after {
                margin-top: 9px !important;
                font-size: 8px !important;
                letter-spacing: 1.7px !important;
            }


        #portfolio .portfolio-card::before {
            inset: 8px !important;
        }
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 600px) {

    #portfolio .portfolio-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        grid-template-rows: repeat(2, 205px) !important;
        gap: 8px !important;
    }


    #portfolio .portfolio-card {
        height: 205px !important;
        min-height: 205px !important;
    }


        #portfolio .portfolio-card::before {
            inset: 6px !important;
        }


        #portfolio .portfolio-card .portfolio-number {
            top: 9px !important;
            left: 9px !important;
            width: 30px !important;
            height: 30px !important;
            font-size: 7px !important;
            letter-spacing: 1px !important;
        }


        #portfolio .portfolio-card .portfolio-title {
            left: 12px !important;
            right: 12px !important;
            bottom: 12px !important;
        }


            #portfolio .portfolio-card .portfolio-title h3 {
                font-size: 25px !important;
                line-height: .95 !important;
            }


            #portfolio .portfolio-card .portfolio-title::after {
                margin-top: 7px !important;
                font-size: 6px !important;
                letter-spacing: 1.2px !important;
            }
}


/* =========================================================
   VERY SMALL MOBILE
   ========================================================= */

@media (max-width: 380px) {

    #portfolio .portfolio-grid {
        grid-template-rows: repeat(2, 175px) !important;
        gap: 6px !important;
    }


    #portfolio .portfolio-card {
        height: 175px !important;
        min-height: 175px !important;
    }


        #portfolio .portfolio-card .portfolio-title {
            left: 9px !important;
            right: 9px !important;
            bottom: 9px !important;
        }


            #portfolio .portfolio-card .portfolio-title h3 {
                font-size: 21px !important;
            }


            #portfolio .portfolio-card .portfolio-title::after {
                margin-top: 6px !important;
                font-size: 5.5px !important;
                letter-spacing: 1px !important;
            }


        #portfolio .portfolio-card .portfolio-number {
            top: 7px !important;
            left: 7px !important;
            width: 26px !important;
            height: 26px !important;
            font-size: 6px !important;
        }
}
/* =========================================================
   RG PHOTOGRAPHY - PORTFOLIO
   FINAL CARD DESIGN
   Uses the ACTUAL HTML:
   .portfolio-card
   .portfolio-image
   .portfolio-overlay
   .portfolio-number
   .portfolio-title
   ========================================================= */

#portfolio .portfolio-grid {
    width: 100%;
    max-width: 1320px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(2, 390px);
    gap: 18px;
}


/* ================= CARD ================= */

#portfolio .portfolio-card {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    height: 390px !important;
    min-height: 390px !important;
    overflow: hidden !important;
    background: #111 !important;
    border: 1px solid #d9d9d9 !important;
    text-decoration: none !important;
    box-sizing: border-box !important;
}


    /* ================= IMAGE ================= */

    #portfolio .portfolio-card .portfolio-image {
        position: absolute !important;
        inset: 0 !important;
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        object-position: center !important;
        display: block !important;
        margin: 0 !important;
        transform: scale(1) !important;
        transition: transform .7s ease !important;
        z-index: 1 !important;
    }


    /* IMAGE HOVER */

    #portfolio .portfolio-card:hover .portfolio-image {
        transform: scale(1.06) !important;
    }


    /* ================= DARK GRADIENT ================= */

    #portfolio .portfolio-card::after {
        content: "" !important;
        position: absolute !important;
        inset: 0 !important;
        background: linear-gradient( to top, rgba(0,0,0,.90) 0%, rgba(0,0,0,.58) 28%, rgba(0,0,0,.20) 58%, rgba(0,0,0,0) 100% ) !important;
        z-index: 2 !important;
        pointer-events: none !important;
    }


    /* ================= GOLD INNER BORDER ================= */

    #portfolio .portfolio-card::before {
        content: "" !important;
        position: absolute !important;
        inset: 10px !important;
        border: 1px solid rgba(216,178,84,.65) !important;
        z-index: 5 !important;
        pointer-events: none !important;
    }


    /* ================= OVERLAY ================= */

    #portfolio .portfolio-card .portfolio-overlay {
        position: absolute !important;
        inset: 0 !important;
        width: 100% !important;
        height: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
        background: transparent !important;
        z-index: 6 !important;
    }


    /* ================= NUMBER ================= */

    #portfolio .portfolio-card .portfolio-number {
        position: absolute !important;
        top: 20px !important;
        left: 20px !important;
        width: 42px !important;
        height: 42px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        box-sizing: border-box !important;
        background: rgba(10,10,10,.70) !important;
        border: 1px solid rgba(255,255,255,.75) !important;
        color: #fff !important;
        font-family: "Inter", Arial, sans-serif !important;
        font-size: 10px !important;
        font-weight: 700 !important;
        letter-spacing: 1.5px !important;
        line-height: 1 !important;
        z-index: 10 !important;
    }


    /* ================= TITLE CONTAINER ================= */

    #portfolio .portfolio-card .portfolio-title {
        position: absolute !important;
        left: 28px !important;
        right: 28px !important;
        bottom: 28px !important;
        margin: 0 !important;
        padding: 0 !important;
        z-index: 10 !important;
    }


        /* ================= TITLE ================= */

        #portfolio .portfolio-card .portfolio-title h3 {
            margin: 0 !important;
            padding: 0 !important;
            color: #fff !important;
            font-family: "Cormorant Garamond", Georgia, serif !important;
            font-size: clamp(34px, 3.4vw, 52px) !important;
            font-weight: 500 !important;
            line-height: .95 !important;
            letter-spacing: 0 !important;
            text-transform: none !important;
            text-shadow: 0 2px 12px rgba(0,0,0,.80) !important;
        }


        /* ================= VIEW STORY ================= */

        #portfolio .portfolio-card .portfolio-title::after {
            content: "VIEW STORY  →" !important;
            display: block !important;
            margin-top: 12px !important;
            color: #fff !important;
            font-family: "Inter", Arial, sans-serif !important;
            font-size: 9px !important;
            font-weight: 700 !important;
            letter-spacing: 2px !important;
            text-transform: uppercase !important;
        }


    /* ================= HOVER ================= */

    #portfolio .portfolio-card:hover .portfolio-title::after {
        letter-spacing: 2.5px !important;
    }


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 900px) {

    #portfolio .portfolio-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        grid-template-rows: repeat(2, 330px) !important;
        gap: 12px !important;
    }


    #portfolio .portfolio-card {
        height: 330px !important;
        min-height: 330px !important;
    }


        #portfolio .portfolio-card .portfolio-number {
            top: 14px !important;
            left: 14px !important;
            width: 36px !important;
            height: 36px !important;
            font-size: 9px !important;
        }


        #portfolio .portfolio-card .portfolio-title {
            left: 20px !important;
            right: 20px !important;
            bottom: 20px !important;
        }


            #portfolio .portfolio-card .portfolio-title h3 {
                font-size: 36px !important;
            }


            #portfolio .portfolio-card .portfolio-title::after {
                margin-top: 9px !important;
                font-size: 8px !important;
                letter-spacing: 1.7px !important;
            }


        #portfolio .portfolio-card::before {
            inset: 8px !important;
        }
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 600px) {

    #portfolio .portfolio-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        grid-template-rows: repeat(2, 205px) !important;
        gap: 8px !important;
    }


    #portfolio .portfolio-card {
        height: 205px !important;
        min-height: 205px !important;
    }


        #portfolio .portfolio-card::before {
            inset: 6px !important;
        }


        #portfolio .portfolio-card .portfolio-number {
            top: 9px !important;
            left: 9px !important;
            width: 30px !important;
            height: 30px !important;
            font-size: 7px !important;
            letter-spacing: 1px !important;
        }


        #portfolio .portfolio-card .portfolio-title {
            left: 12px !important;
            right: 12px !important;
            bottom: 12px !important;
        }


            #portfolio .portfolio-card .portfolio-title h3 {
                font-size: 25px !important;
                line-height: .95 !important;
            }


            #portfolio .portfolio-card .portfolio-title::after {
                margin-top: 7px !important;
                font-size: 6px !important;
                letter-spacing: 1.2px !important;
            }
}


/* =========================================================
   VERY SMALL MOBILE
   ========================================================= */

@media (max-width: 380px) {

    #portfolio .portfolio-grid {
        grid-template-rows: repeat(2, 175px) !important;
        gap: 6px !important;
    }


    #portfolio .portfolio-card {
        height: 175px !important;
        min-height: 175px !important;
    }


        #portfolio .portfolio-card .portfolio-title {
            left: 9px !important;
            right: 9px !important;
            bottom: 9px !important;
        }


            #portfolio .portfolio-card .portfolio-title h3 {
                font-size: 21px !important;
            }


            #portfolio .portfolio-card .portfolio-title::after {
                margin-top: 6px !important;
                font-size: 5.5px !important;
                letter-spacing: 1px !important;
            }


        #portfolio .portfolio-card .portfolio-number {
            top: 7px !important;
            left: 7px !important;
            width: 26px !important;
            height: 26px !important;
            font-size: 6px !important;
        }
}
/* =========================================================
   RG PHOTOGRAPHY - PORTFOLIO
   FINAL CARD DESIGN
   Uses the ACTUAL HTML:
   .portfolio-card
   .portfolio-image
   .portfolio-overlay
   .portfolio-number
   .portfolio-title
   ========================================================= */

#portfolio .portfolio-grid {
    width: 100%;
    max-width: 1320px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(2, 390px);
    gap: 18px;
}


/* ================= CARD ================= */

#portfolio .portfolio-card {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    height: 390px !important;
    min-height: 390px !important;
    overflow: hidden !important;
    background: #111 !important;
    border: 1px solid #d9d9d9 !important;
    text-decoration: none !important;
    box-sizing: border-box !important;
}


    /* ================= IMAGE ================= */

    #portfolio .portfolio-card .portfolio-image {
        position: absolute !important;
        inset: 0 !important;
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        object-position: center !important;
        display: block !important;
        margin: 0 !important;
        transform: scale(1) !important;
        transition: transform .7s ease !important;
        z-index: 1 !important;
    }


    /* IMAGE HOVER */

    #portfolio .portfolio-card:hover .portfolio-image {
        transform: scale(1.06) !important;
    }


    /* ================= DARK GRADIENT ================= */

    #portfolio .portfolio-card::after {
        content: "" !important;
        position: absolute !important;
        inset: 0 !important;
        background: linear-gradient( to top, rgba(0,0,0,.90) 0%, rgba(0,0,0,.58) 28%, rgba(0,0,0,.20) 58%, rgba(0,0,0,0) 100% ) !important;
        z-index: 2 !important;
        pointer-events: none !important;
    }


    /* ================= GOLD INNER BORDER ================= */

    #portfolio .portfolio-card::before {
        content: "" !important;
        position: absolute !important;
        inset: 10px !important;
        border: 1px solid rgba(216,178,84,.65) !important;
        z-index: 5 !important;
        pointer-events: none !important;
    }


    /* ================= OVERLAY ================= */

    #portfolio .portfolio-card .portfolio-overlay {
        position: absolute !important;
        inset: 0 !important;
        width: 100% !important;
        height: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
        background: transparent !important;
        z-index: 6 !important;
    }


    /* ================= NUMBER ================= */

    #portfolio .portfolio-card .portfolio-number {
        position: absolute !important;
        top: 20px !important;
        left: 20px !important;
        width: 42px !important;
        height: 42px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        box-sizing: border-box !important;
        background: rgba(10,10,10,.70) !important;
        border: 1px solid rgba(255,255,255,.75) !important;
        color: #fff !important;
        font-family: "Inter", Arial, sans-serif !important;
        font-size: 10px !important;
        font-weight: 700 !important;
        letter-spacing: 1.5px !important;
        line-height: 1 !important;
        z-index: 10 !important;
    }


    /* ================= TITLE CONTAINER ================= */

    #portfolio .portfolio-card .portfolio-title {
        position: absolute !important;
        left: 28px !important;
        right: 28px !important;
        bottom: 28px !important;
        margin: 0 !important;
        padding: 0 !important;
        z-index: 10 !important;
    }


        /* ================= TITLE ================= */

        #portfolio .portfolio-card .portfolio-title h3 {
            margin: 0 !important;
            padding: 0 !important;
            color: #fff !important;
            font-family: "Cormorant Garamond", Georgia, serif !important;
            font-size: clamp(34px, 3.4vw, 52px) !important;
            font-weight: 500 !important;
            line-height: .95 !important;
            letter-spacing: 0 !important;
            text-transform: none !important;
            text-shadow: 0 2px 12px rgba(0,0,0,.80) !important;
        }


        /* ================= VIEW STORY ================= */

        #portfolio .portfolio-card .portfolio-title::after {
            content: "VIEW STORY  →" !important;
            display: block !important;
            margin-top: 12px !important;
            color: #fff !important;
            font-family: "Inter", Arial, sans-serif !important;
            font-size: 9px !important;
            font-weight: 700 !important;
            letter-spacing: 2px !important;
            text-transform: uppercase !important;
        }


    /* ================= HOVER ================= */

    #portfolio .portfolio-card:hover .portfolio-title::after {
        letter-spacing: 2.5px !important;
    }


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 900px) {

    #portfolio .portfolio-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        grid-template-rows: repeat(2, 330px) !important;
        gap: 12px !important;
    }


    #portfolio .portfolio-card {
        height: 330px !important;
        min-height: 330px !important;
    }


        #portfolio .portfolio-card .portfolio-number {
            top: 14px !important;
            left: 14px !important;
            width: 36px !important;
            height: 36px !important;
            font-size: 9px !important;
        }


        #portfolio .portfolio-card .portfolio-title {
            left: 20px !important;
            right: 20px !important;
            bottom: 20px !important;
        }


            #portfolio .portfolio-card .portfolio-title h3 {
                font-size: 36px !important;
            }


            #portfolio .portfolio-card .portfolio-title::after {
                margin-top: 9px !important;
                font-size: 8px !important;
                letter-spacing: 1.7px !important;
            }


        #portfolio .portfolio-card::before {
            inset: 8px !important;
        }
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 600px) {

    #portfolio .portfolio-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        grid-template-rows: repeat(2, 205px) !important;
        gap: 8px !important;
    }


    #portfolio .portfolio-card {
        height: 205px !important;
        min-height: 205px !important;
    }


        #portfolio .portfolio-card::before {
            inset: 6px !important;
        }


        #portfolio .portfolio-card .portfolio-number {
            top: 9px !important;
            left: 9px !important;
            width: 30px !important;
            height: 30px !important;
            font-size: 7px !important;
            letter-spacing: 1px !important;
        }


        #portfolio .portfolio-card .portfolio-title {
            left: 12px !important;
            right: 12px !important;
            bottom: 12px !important;
        }


            #portfolio .portfolio-card .portfolio-title h3 {
                font-size: 25px !important;
                line-height: .95 !important;
            }


            #portfolio .portfolio-card .portfolio-title::after {
                margin-top: 7px !important;
                font-size: 6px !important;
                letter-spacing: 1.2px !important;
            }
}


/* =========================================================
   VERY SMALL MOBILE
   ========================================================= */

@media (max-width: 380px) {

    #portfolio .portfolio-grid {
        grid-template-rows: repeat(2, 175px) !important;
        gap: 6px !important;
    }


    #portfolio .portfolio-card {
        height: 175px !important;
        min-height: 175px !important;
    }


        #portfolio .portfolio-card .portfolio-title {
            left: 9px !important;
            right: 9px !important;
            bottom: 9px !important;
        }


            #portfolio .portfolio-card .portfolio-title h3 {
                font-size: 21px !important;
            }


            #portfolio .portfolio-card .portfolio-title::after {
                margin-top: 6px !important;
                font-size: 5.5px !important;
                letter-spacing: 1px !important;
            }


        #portfolio .portfolio-card .portfolio-number {
            top: 7px !important;
            left: 7px !important;
            width: 26px !important;
            height: 26px !important;
            font-size: 6px !important;
        }
}
/* =========================================================
   RG PHOTOGRAPHY
   FINAL HOMEPAGE PORTFOLIO CARD FIX
   Matches WEDDING CARD layout
   PRE-WEDDING | POST-WEDDING
   BABY SHOOT   | MATERNITY SHOOT

   HTML STRUCTURE:
   .portfolio-card
   .portfolio-image
   .portfolio-overlay
   .portfolio-number
   .portfolio-title
   .portfolio-title h3
   ========================================================= */


/* =========================================================
   PORTFOLIO GRID
   ========================================================= */

#portfolio .portfolio-grid {
    max-width: var(--max);
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
    align-items: stretch;
}


/* =========================================================
   PORTFOLIO CARD
   ========================================================= */

#portfolio .portfolio-card {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    height: 340px !important;
    min-height: 340px !important;
    overflow: hidden !important;
    background: #111;
    text-decoration: none !important;
    border: 1px solid #d9d9d9;
    box-shadow: 0 18px 42px rgba(0,0,0,.10);
}


    /* =========================================================
   PORTFOLIO IMAGE
   ========================================================= */

    #portfolio .portfolio-card .portfolio-image {
        position: absolute !important;
        inset: 0 !important;
        width: 100% !important;
        height: 100% !important;
        display: block !important;
        object-fit: cover !important;
        object-position: center !important;
        transition: transform .6s ease, filter .6s ease;
        z-index: 1 !important;
    }


    /* IMAGE HOVER */

    #portfolio .portfolio-card:hover .portfolio-image {
        transform: scale(1.05);
        filter: brightness(1.05);
    }


    /* =========================================================
   DARK GRADIENT
   SAME IDEA AS WEDDING CARDS
   ========================================================= */

    #portfolio .portfolio-card::after {
        content: "" !important;
        position: absolute !important;
        inset: 0 !important;
        background: linear-gradient( to top, rgba(0,0,0,.88) 0%, rgba(0,0,0,.48) 38%, rgba(0,0,0,.10) 70%, rgba(0,0,0,0) 100% ) !important;
        pointer-events: none !important;
        z-index: 2 !important;
    }


    /* =========================================================
   OVERLAY
   FULL CARD — CONTENT POSITION CONTROLLED INSIDE
   ========================================================= */

    #portfolio .portfolio-card .portfolio-overlay {
        position: absolute !important;
        inset: 0 !important;
        width: 100% !important;
        height: 100% !important;
        padding: 0 !important;
        display: block !important;
        background: transparent !important;
        z-index: 3 !important;
        pointer-events: none;
    }


    /* =========================================================
   CARD NUMBER
   TOP LEFT
   SAME STYLE AS WEDDING CARDS
   ========================================================= */

    #portfolio .portfolio-card .portfolio-number {
        position: absolute !important;
        top: 20px !important;
        left: 22px !important;
        bottom: auto !important;
        right: auto !important;
        z-index: 5 !important;
        display: block !important;
        color: #ffffff !important;
        font-family: "Inter", Arial, Helvetica, sans-serif !important;
        font-size: 10px !important;
        font-weight: 700 !important;
        line-height: 1 !important;
        letter-spacing: 1.5px !important;
        background: transparent !important;
        padding: 0 !important;
        text-shadow: 0 1px 3px rgba(0,0,0,.9), 0 2px 8px rgba(0,0,0,.7) !important;
    }


    /* =========================================================
   PORTFOLIO TITLE
   BOTTOM LEFT
   THIS IS THE IMPORTANT FIX

   Your HTML uses .portfolio-title,
   NOT .portfolio-content.
   ========================================================= */

    #portfolio .portfolio-card .portfolio-title {
        position: absolute !important;
        left: 24px !important;
        right: 24px !important;
        top: auto !important;
        bottom: 48px !important;
        width: auto !important;
        height: auto !important;
        margin: 0 !important;
        padding: 0 !important;
        display: block !important;
        transform: none !important;
        z-index: 5 !important;
        background: transparent !important;
        text-align: left !important;
    }


        /* =========================================================
   PORTFOLIO TITLE TEXT
   LARGE LIKE WEDDING CARDS
   ========================================================= */

        #portfolio .portfolio-card .portfolio-title h3 {
            position: relative !important;
            top: auto !important;
            left: auto !important;
            right: auto !important;
            bottom: auto !important;
            display: block !important;
            width: auto !important;
            max-width: 100% !important;
            margin: 0 !important;
            padding: 0 !important;
            color: #ffffff !important;
            font-family: "Cormorant Garamond", Georgia, "Times New Roman", serif !important;
            font-size: 42px !important;
            font-weight: 500 !important;
            line-height: 1 !important;
            letter-spacing: 0 !important;
            text-transform: none !important;
            white-space: nowrap !important;
            background: transparent !important;
            border: 0 !important;
            text-shadow: 0 2px 10px rgba(0,0,0,.65) !important;
        }


        /* =========================================================
   OPTIONAL VIEW STORY
   If VIEW STORY exists in the portfolio card,
   position it directly below the title.
   ========================================================= */

        #portfolio .portfolio-card .portfolio-title small,
        #portfolio .portfolio-card .portfolio-title .view-story {
            display: block !important;
            margin-top: 10px !important;
            color: #ffffff !important;
            font-family: "Inter", Arial, Helvetica, sans-serif !important;
            font-size: 9px !important;
            font-weight: 700 !important;
            line-height: 1 !important;
            letter-spacing: 2px !important;
            text-transform: uppercase !important;
            text-decoration: none !important;
        }


    /* =========================================================
   REMOVE OLD PORTFOLIO TITLE POSITIONS
   ========================================================= */

    #portfolio .portfolio-card > span {
        position: absolute !important;
        top: auto !important;
        left: 24px !important;
        bottom: 48px !important;
        right: auto !important;
        z-index: 5 !important;
        color: #ffffff !important;
        font-family: "Cormorant Garamond", Georgia, serif !important;
        font-size: 42px !important;
        font-weight: 500 !important;
        line-height: 1 !important;
        letter-spacing: 0 !important;
        background: transparent !important;
        padding: 0 !important;
    }


    /* =========================================================
   REMOVE OLD BLACK TITLE BOX
   ========================================================= */

    #portfolio .portfolio-card .portfolio-title h3 {
        box-shadow: none !important;
        border-left: 0 !important;
        border-right: 0 !important;
    }


    /* =========================================================
   REMOVE OLD VIEW MORE BUTTONS
   ========================================================= */

    #portfolio .portfolio-card .card-view-more,
    #portfolio .portfolio-card .portfolio-view,
    #portfolio .portfolio-card .view-more,
    #portfolio .portfolio-card .portfolio-content > a {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }


    /* =========================================================
   HOVER
   ========================================================= */

    #portfolio .portfolio-card:hover .portfolio-title h3 {
        transform: translateY(-2px);
        text-shadow: 0 3px 12px rgba(0,0,0,.8) !important;
    }


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 900px) {

    #portfolio .portfolio-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
    }


    #portfolio .portfolio-card {
        height: 300px !important;
        min-height: 300px !important;
    }


        #portfolio .portfolio-card .portfolio-number {
            top: 16px !important;
            left: 17px !important;
            font-size: 9px !important;
        }


        #portfolio .portfolio-card .portfolio-title {
            left: 18px !important;
            right: 18px !important;
            bottom: 32px !important;
        }


            #portfolio .portfolio-card .portfolio-title h3 {
                font-size: 32px !important;
                line-height: 1 !important;
            }


        #portfolio .portfolio-card > span {
            left: 18px !important;
            bottom: 32px !important;
            font-size: 32px !important;
        }


        #portfolio .portfolio-card .portfolio-title small,
        #portfolio .portfolio-card .portfolio-title .view-story {
            margin-top: 8px !important;
            font-size: 8px !important;
            letter-spacing: 1.6px !important;
        }
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 600px) {

    #portfolio .portfolio-grid {
        grid-template-columns: 1fr;
        gap: 10px;
    }


    #portfolio .portfolio-card {
        width: 100% !important;
        height: 280px !important;
        min-height: 280px !important;
    }


        #portfolio .portfolio-card .portfolio-number {
            top: 13px !important;
            left: 14px !important;
            font-size: 8px !important;
        }


        #portfolio .portfolio-card .portfolio-title {
            left: 14px !important;
            right: 14px !important;
            bottom: 24px !important;
        }


            #portfolio .portfolio-card .portfolio-title h3 {
                font-size: 27px !important;
                line-height: 1 !important;
                white-space: nowrap !important;
            }


        #portfolio .portfolio-card > span {
            left: 14px !important;
            bottom: 24px !important;
            font-size: 27px !important;
        }


        #portfolio .portfolio-card .portfolio-title small,
        #portfolio .portfolio-card .portfolio-title .view-story {
            margin-top: 7px !important;
            font-size: 7px !important;
            letter-spacing: 1.4px !important;
        }
}


/* =========================================================
   SMALL MOBILE
   ========================================================= */

@media (max-width: 430px) {

    #portfolio .portfolio-card {
        height: 250px !important;
        min-height: 250px !important;
    }


        #portfolio .portfolio-card .portfolio-title {
            left: 12px !important;
            right: 12px !important;
            bottom: 20px !important;
        }


            #portfolio .portfolio-card .portfolio-title h3 {
                font-size: 24px !important;
            }


        #portfolio .portfolio-card > span {
            left: 12px !important;
            bottom: 20px !important;
            font-size: 24px !important;
        }
}


/* =========================================================
   END FINAL PORTFOLIO FIX
   ========================================================= */
/* =========================================================
   FINAL PORTFOLIO TEXT CORRECTION
   Remove numbers + reduce portfolio title size
   ========================================================= */


/* REMOVE 01 / 02 / 03 / 04 NUMBERS */

#portfolio .portfolio-card .portfolio-number {
    display: none !important;
}


/* PORTFOLIO TITLE — WEDDING CARD STYLE */

#portfolio .portfolio-card .portfolio-title {
    position: absolute !important;
    left: 18px !important;
    right: 18px !important;
    bottom: 28px !important;
    top: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    text-align: left !important;
    z-index: 5 !important;
}


    /* TITLE SIZE */

    #portfolio .portfolio-card .portfolio-title h3 {
        margin: 0 !important;
        padding: 0 !important;
        color: #ffffff !important;
        font-family: "Cormorant Garamond", Georgia, "Times New Roman", serif !important;
        font-size: 27px !important;
        font-weight: 500 !important;
        line-height: 1 !important;
        letter-spacing: 0 !important;
        white-space: nowrap !important;
        text-shadow: 0 2px 8px rgba(0,0,0,.75) !important;
    }


    /* VIEW STORY */

    #portfolio .portfolio-card .portfolio-title small,
    #portfolio .portfolio-card .portfolio-title .view-story {
        display: block !important;
        margin-top: 7px !important;
        color: #ffffff !important;
        font-family: "Inter", Arial, sans-serif !important;
        font-size: 8px !important;
        font-weight: 700 !important;
        line-height: 1 !important;
        letter-spacing: 1.7px !important;
        text-transform: uppercase !important;
    }


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 900px) {

    #portfolio .portfolio-card .portfolio-title {
        left: 15px !important;
        right: 15px !important;
        bottom: 23px !important;
    }

        #portfolio .portfolio-card .portfolio-title h3 {
            font-size: 24px !important;
        }

        #portfolio .portfolio-card .portfolio-title small,
        #portfolio .portfolio-card .portfolio-title .view-story {
            font-size: 7px !important;
            margin-top: 6px !important;
        }
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 600px) {

    #portfolio .portfolio-card .portfolio-title {
        left: 13px !important;
        right: 13px !important;
        bottom: 20px !important;
    }

        #portfolio .portfolio-card .portfolio-title h3 {
            font-size: 23px !important;
        }

        #portfolio .portfolio-card .portfolio-title small,
        #portfolio .portfolio-card .portfolio-title .view-story {
            font-size: 7px !important;
            margin-top: 6px !important;
            letter-spacing: 1.4px !important;
        }
}


/* =========================================================
   SMALL MOBILE
   ========================================================= */

@media (max-width: 430px) {

    #portfolio .portfolio-card .portfolio-title {
        left: 11px !important;
        right: 11px !important;
        bottom: 18px !important;
    }

        #portfolio .portfolio-card .portfolio-title h3 {
            font-size: 20px !important;
        }
}
/* =========================================================
   PORTFOLIO - DESKTOP 2x2 CARD CROP FIX
   ========================================================= */

.portfolio-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

    .portfolio-grid .portfolio-card {
        position: relative;
        width: 100%;
        height: 100%;
        aspect-ratio: 1 / 1;
        overflow: hidden;
    }

        .portfolio-grid .portfolio-card .portfolio-image {
            width: 100%;
            height: 100%;
            display: block;
            object-fit: cover;
            object-position: center center;
        }

    /* Keep title at the bottom like the Wedding cards */
    .portfolio-grid .portfolio-overlay {
        position: absolute;
        inset: 0;
        display: flex;
        align-items: flex-end;
        justify-content: flex-start;
        padding: 28px;
        pointer-events: none;
    }

    .portfolio-grid .portfolio-title {
        position: relative;
        z-index: 2;
        margin: 0;
    }

        .portfolio-grid .portfolio-title h3 {
            margin: 0;
            font-size: clamp(22px, 2.2vw, 34px);
            line-height: 1;
            white-space: nowrap;
        }

        /* View Story - if present */
        .portfolio-grid .portfolio-title small {
            display: block;
            margin-top: 10px;
            font-size: 10px;
            letter-spacing: 2px;
        }

/* =========================================================
   MOBILE - KEEP THE CURRENT CORRECT 2x2 CROP
   ========================================================= */

@media (max-width: 600px) {

    .portfolio-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-template-rows: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }

        .portfolio-grid .portfolio-card {
            width: 100%;
            height: auto;
            aspect-ratio: 1 / 1;
        }

            .portfolio-grid .portfolio-card .portfolio-image {
                width: 100%;
                height: 100%;
                object-fit: cover;
                object-position: center center;
            }

        .portfolio-grid .portfolio-overlay {
            padding: 14px;
        }

        .portfolio-grid .portfolio-title h3 {
            font-size: 18px;
        }
}
/* =========================================================
   PORTFOLIO - DESKTOP 2x2 CARD CROP FIX
   ========================================================= */

.portfolio-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

    .portfolio-grid .portfolio-card {
        position: relative;
        width: 100%;
        height: 100%;
        aspect-ratio: 1 / 1;
        overflow: hidden;
    }

        .portfolio-grid .portfolio-card .portfolio-image {
            width: 100%;
            height: 100%;
            display: block;
            object-fit: cover;
            object-position: center center;
        }

    /* Keep title at the bottom like the Wedding cards */
    .portfolio-grid .portfolio-overlay {
        position: absolute;
        inset: 0;
        display: flex;
        align-items: flex-end;
        justify-content: flex-start;
        padding: 28px;
        pointer-events: none;
    }

    .portfolio-grid .portfolio-title {
        position: relative;
        z-index: 2;
        margin: 0;
    }

        .portfolio-grid .portfolio-title h3 {
            margin: 0;
            font-size: clamp(22px, 2.2vw, 34px);
            line-height: 1;
            white-space: nowrap;
        }

        /* View Story - if present */
        .portfolio-grid .portfolio-title small {
            display: block;
            margin-top: 10px;
            font-size: 10px;
            letter-spacing: 2px;
        }

/* =========================================================
   MOBILE - KEEP THE CURRENT CORRECT 2x2 CROP
   ========================================================= */

@media (max-width: 600px) {

    .portfolio-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-template-rows: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }

        .portfolio-grid .portfolio-card {
            width: 100%;
            height: auto;
            aspect-ratio: 1 / 1;
        }

            .portfolio-grid .portfolio-card .portfolio-image {
                width: 100%;
                height: 100%;
                object-fit: cover;
                object-position: center center;
            }

        .portfolio-grid .portfolio-overlay {
            padding: 14px;
        }

        .portfolio-grid .portfolio-title h3 {
            font-size: 18px;
        }
}
.portfolio-grid .portfolio-card {
    aspect-ratio: 1 / 1;
    overflow: hidden;
}

    .portfolio-grid .portfolio-card .portfolio-image {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center center;
    }
/* =========================================================
   RG PHOTOGRAPHY
   PORTFOLIO — FINAL DESKTOP + MOBILE FIX
   ========================================================= */

/* ---------------------------------------------------------
   PORTFOLIO GRID
   DESKTOP = 2 x 2
   --------------------------------------------------------- */

#portfolio .portfolio-grid {
    width: 100% !important;
    max-width: 1200px !important;
    margin: 0 auto !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-template-rows: repeat(2, 360px) !important;
    gap: 18px !important;
    align-items: stretch !important;
}


/* ---------------------------------------------------------
   ALL FOUR CARDS — EXACT SAME SIZE
   --------------------------------------------------------- */

#portfolio .portfolio-card {
    position: relative !important;
    width: 100% !important;
    height: 360px !important;
    min-height: 360px !important;
    max-height: 360px !important;
    display: block !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
    background: #111 !important;
    border: 1px solid rgba(255,255,255,0.15) !important;
    text-decoration: none !important;
    isolation: isolate !important;
}


    /* ---------------------------------------------------------
   IMAGE
   SAME CROP BOX FOR ALL FOUR CARDS
   --------------------------------------------------------- */

    #portfolio .portfolio-card .portfolio-image {
        position: absolute !important;
        inset: 0 !important;
        width: 100% !important;
        height: 100% !important;
        display: block !important;
        margin: 0 !important;
        object-fit: cover !important;
        object-position: center center !important;
        transform: scale(1) !important;
        opacity: 1 !important;
        visibility: visible !important;
        filter: none !important;
        z-index: 1 !important;
        transition: transform 0.6s ease !important;
    }


    /* ---------------------------------------------------------
   IMAGE HOVER
   --------------------------------------------------------- */

    #portfolio .portfolio-card:hover .portfolio-image {
        transform: scale(1.04) !important;
    }


    /* ---------------------------------------------------------
   OVERLAY
   DARK FADE ONLY AT BOTTOM
   --------------------------------------------------------- */

    #portfolio .portfolio-card .portfolio-overlay {
        position: absolute !important;
        inset: 0 !important;
        width: 100% !important;
        height: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
        display: block !important;
        background: linear-gradient( to bottom, rgba(0,0,0,0) 45%, rgba(0,0,0,0.05) 58%, rgba(0,0,0,0.72) 100% ) !important;
        z-index: 5 !important;
        pointer-events: none !important;
    }


    /* ---------------------------------------------------------
   REMOVE NUMBER COMPLETELY
   --------------------------------------------------------- */

    #portfolio .portfolio-card .portfolio-number {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        width: 0 !important;
        height: 0 !important;
    }


    /* ---------------------------------------------------------
   TITLE
   BOTTOM LEFT — SAME STYLE AS WEDDING CARDS
   --------------------------------------------------------- */

    #portfolio .portfolio-card .portfolio-title {
        position: absolute !important;
        left: 24px !important;
        right: 20px !important;
        top: auto !important;
        bottom: 22px !important;
        width: auto !important;
        margin: 0 !important;
        padding: 0 !important;
        z-index: 10 !important;
        pointer-events: none !important;
    }


        /* ---------------------------------------------------------
   TITLE TEXT
   --------------------------------------------------------- */

        #portfolio .portfolio-card .portfolio-title h3 {
            position: static !important;
            top: auto !important;
            left: auto !important;
            margin: 0 !important;
            padding: 0 !important;
            color: #ffffff !important;
            font-family: "Cormorant Garamond", Georgia, serif !important;
            font-size: clamp(20px, 2.2vw, 30px) !important;
            font-weight: 500 !important;
            line-height: 1 !important;
            letter-spacing: 0 !important;
            text-transform: uppercase !important;
            white-space: nowrap !important;
            text-shadow: 0 2px 6px rgba(0,0,0,0.8) !important;
        }


        /* ---------------------------------------------------------
   REMOVE ANY OLD PORTFOLIO TITLE POSITIONING
   --------------------------------------------------------- */

        #portfolio .portfolio-card .portfolio-title,
        #portfolio .portfolio-card .portfolio-title h3 {
            transform: none !important;
        }


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 900px) {

    #portfolio .portfolio-grid {
        width: 100% !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        grid-template-rows: repeat(2, 300px) !important;
        gap: 12px !important;
    }


    #portfolio .portfolio-card {
        height: 300px !important;
        min-height: 300px !important;
        max-height: 300px !important;
    }


        #portfolio .portfolio-card .portfolio-title {
            left: 16px !important;
            right: 14px !important;
            bottom: 18px !important;
        }


            #portfolio .portfolio-card .portfolio-title h3 {
                font-size: 22px !important;
            }
}


/* =========================================================
   MOBILE
   2 x 2 — SAME AS YOUR MOBILE DESIGN
   ========================================================= */

@media (max-width: 600px) {

    #portfolio .portfolio-grid {
        width: 100% !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        grid-template-rows: repeat(2, 210px) !important;
        gap: 10px !important;
    }


    #portfolio .portfolio-card {
        width: 100% !important;
        height: 210px !important;
        min-height: 210px !important;
        max-height: 210px !important;
    }


        #portfolio .portfolio-card .portfolio-image {
            width: 100% !important;
            height: 100% !important;
            object-fit: cover !important;
            object-position: center center !important;
        }


        #portfolio .portfolio-card .portfolio-title {
            left: 12px !important;
            right: 10px !important;
            bottom: 14px !important;
        }


            #portfolio .portfolio-card .portfolio-title h3 {
                font-size: 16px !important;
                line-height: 1 !important;
                letter-spacing: 0 !important;
                white-space: nowrap !important;
            }
}


/* =========================================================
   VERY SMALL MOBILE
   ========================================================= */

@media (max-width: 380px) {

    #portfolio .portfolio-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        grid-template-rows: repeat(2, 185px) !important;
        gap: 8px !important;
    }


    #portfolio .portfolio-card {
        height: 185px !important;
        min-height: 185px !important;
        max-height: 185px !important;
    }


        #portfolio .portfolio-card .portfolio-title {
            left: 10px !important;
            right: 8px !important;
            bottom: 12px !important;
        }


            #portfolio .portfolio-card .portfolio-title h3 {
                font-size: 14px !important;
                letter-spacing: 0 !important;
            }
}
.footer-social-buttons {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    width: 100%;
    max-width: 540px;
    margin: 0 auto;
    box-sizing: border-box;
}

    .footer-social-buttons .footer-social-btn {
        flex: 1;
        width: auto;
        min-width: 0;
        height: 56px;
        display: flex;
        align-items: center;
        justify-content: center;
        box-sizing: border-box;
    }

/* Mobile */
@media (max-width: 768px) {
    .footer-social-buttons {
        width: 100%;
        max-width: 100%;
        flex-direction: column;
        gap: 10px;
    }

        .footer-social-buttons .footer-social-btn {
            width: 100%;
            flex: none;
        }
}
/* =========================================
   FOOTER FACEBOOK + GMAIL BUTTONS
   ========================================= */

.footer-social-buttons {
    display: flex !important;
    flex-direction: row !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 12px !important;
    width: 100% !important;
    max-width: 540px !important;
    margin: 28px auto 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
}

    .footer-social-buttons .footer-social-btn {
        flex: 0 1 auto !important;
        width: 264px !important;
        min-width: 0 !important;
        height: 56px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        margin: 0 !important;
        box-sizing: border-box !important;
        text-decoration: none !important;
    }

        /* Gmail */
        .footer-social-buttons .footer-social-btn[href^="mailto"] {
            width: 264px !important;
        }


/* =========================================
   MOBILE
   ========================================= */

@media (max-width: 768px) {

    .footer-social-buttons {
        width: calc(100% - 30px) !important;
        max-width: 100% !important;
        flex-direction: column !important;
        gap: 10px !important;
        margin: 25px auto 0 !important;
    }

        .footer-social-buttons .footer-social-btn,
        .footer-social-buttons .footer-social-btn[href^="mailto"] {
            width: 100% !important;
            max-width: 100% !important;
            height: 54px !important;
        }
}
/* =========================================
   FOOTER SOCIAL BUTTONS
   FACEBOOK + GMAIL
   ========================================= */

.footer-social-buttons {
    width: 100%;
    max-width: 560px;
    margin: 28px auto 18px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 14px;
    box-sizing: border-box;
}

.footer-social-btn {
    width: 265px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    border: 1px solid rgba(255, 255, 255, 0.55);
    background: transparent;
    color: #ffffff !important;
    text-decoration: none !important;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 2px;
    cursor: pointer;
    transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease, transform 0.3s ease;
}

/* Facebook */

.facebook-btn:hover {
    background: #1877f2;
    border-color: #1877f2;
    color: #ffffff !important;
    transform: translateY(-2px);
}

/* Gmail */

.gmail-btn:hover {
    background: #ea4335;
    border-color: #ea4335;
    color: #ffffff !important;
    transform: translateY(-2px);
}


/* =========================================
   MOBILE
   ========================================= */

@media (max-width: 768px) {

    .footer-social-buttons {
        width: 100%;
        max-width: 100%;
        flex-direction: column;
        gap: 12px;
        padding: 0 20px;
        box-sizing: border-box;
    }

    .footer-social-btn {
        width: 100%;
        max-width: 420px;
        height: 54px;
    }
}
/* =========================================
   ADMIN PAGE BUTTON - DESKTOP ONLY
   ========================================= */

footer {
    position: relative !important;
}

    footer .admin-page-btn {
        position: absolute !important;
        left: 40px !important;
        right: auto !important;
        bottom: 40px !important;
        width: 150px !important;
        height: 52px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        box-sizing: border-box !important;
        border: 1px solid #888 !important;
        background: #050505 !important;
        color: #ffffff !important;
        text-decoration: none !important;
        font-family: inherit !important;
        font-size: 12px !important;
        font-weight: 700 !important;
        letter-spacing: 2px !important;
        z-index: 9999 !important;
        opacity: 1 !important;
        visibility: visible !important;
    }

        footer .admin-page-btn:hover {
            background: #ffffff !important;
            color: #000000 !important;
            border-color: #ffffff !important;
        }


/* =========================================
   MOBILE - HIDE ADMIN BUTTON COMPLETELY
   ========================================= */

@media screen and (max-width: 768px) {
    footer .admin-page-btn {
        display: none !important;
    }
}}
footer .admin-page-btn {
    position: absolute !important;
    left: 40px !important;
    right: auto !important;
    bottom: 40px !important;
    width: 150px !important;
    height: 52px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
    border: 1px solid #888 !important;
    background: #050505 !important;
    color: #ffffff !important;
    text-decoration: none !important;
    font-family: inherit !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    letter-spacing: 2px !important;
    z-index: 9999 !important;
    opacity: 1 !important;
    visibility: visible !important;
}
/* MOBILE - SMALLER WHATSAPP & INSTAGRAM BUTTONS */
@media screen and (max-width: 768px) {

    .contact-buttons a,
    .hero-buttons a,
    .cta-buttons a {
        width: 75% !important;
        max-width: 235px !important;
        height: 48px !important;
        padding: 0 12px !important;
        font-size: 10px !important;
        letter-spacing: 1.2px !important;
    }
}
/* ================= RG ENQUIRY FORM ================= */

.rg-enquiry-form {
    max-width: 1100px;
    margin: 50px auto 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.rg-enquiry-form input,
.rg-enquiry-form textarea {
    width: 100%;
    border: 1px solid #29384d;
    background: #17263a;
    color: #fff;
    padding: 18px 16px;
    font-family: "Cormorant Garamond", Georgia, serif !important;
    font-size: 16px;
    outline: none;
    transition: .25s ease;
}

.rg-enquiry-form input::placeholder,
.rg-enquiry-form textarea::placeholder {
    color: #718198;
}

.rg-enquiry-form input:focus,
.rg-enquiry-form textarea:focus {
    border-color: var(--gold);
}

.rg-enquiry-form textarea {
    resize: vertical;
    min-height: 110px;
}

.rg-enquiry-form button {
    width: 100%;
    min-height: 56px;
    margin-top: 8px;
    border: 0;
    background: #eef2f7;
    color: #080808;
    font-family: "Cormorant Garamond", Georgia, serif !important;
    font-size: 18px;
    font-weight: 700;
    cursor: pointer;
    transition: .25s ease;
}

.rg-enquiry-form button:hover {
    background: #25D366;
    color: #fff;
    transform: translateY(-2px);
}

@media (max-width: 600px) {
    .rg-enquiry-form {
        margin-top: 35px;
    }

    .rg-enquiry-form input,
    .rg-enquiry-form textarea {
        padding: 16px 14px;
    }
}
/* =========================================================
   ABOUT / FOUNDER SECTION
   DESKTOP + MOBILE
   ========================================================= */

.about {
    width: 100%;
    max-width: 1320px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 0.95fr 1.05fr;
    gap: 70px;
    align-items: center;
}

/* ================= IMAGE ================= */

.about-image {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.about-image img {
    display: block;
    width: 100%;
    max-width: 560px;
    height: auto;
    object-fit: cover;
}


/* ================= TEXT ================= */

.about-copy {
    width: 100%;
    max-width: 600px;
    margin: 0;
    padding: 0;
    text-align: left;
}

.about-copy h2 {
    margin: 0 0 18px;
    font-size: clamp(42px, 4.5vw, 64px);
    line-height: 1.02;
    letter-spacing: -0.8px;
    text-align: left;
}

.about-copy .eyebrow {
    margin: 0 0 25px;
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 13px;
    font-weight: 500;
    font-style: normal;
    line-height: 1.6;
    letter-spacing: 3px;
    text-align: left;
}

.about-copy p {
    width: 100%;
    max-width: 590px;
    margin: 0 0 22px;
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 17px;
    font-weight: 400;
    font-style: normal;
    line-height: 1.65;
    letter-spacing: 0;
    color: #333;
    text-align: left;
}

.about-copy p:last-child {
    margin-bottom: 0;
}


/* =========================================================
   LARGE DESKTOP / WINDOWS
   ========================================================= */

@media (min-width: 1200px) {

    .about {
        grid-template-columns: 0.95fr 1.05fr;
        gap: 85px;
    }

    .about-copy {
        max-width: 610px;
    }

    .about-copy h2 {
        font-size: 64px;
        margin-bottom: 20px;
    }

    .about-copy .eyebrow {
        font-size: 13px;
        margin-bottom: 26px;
    }

    .about-copy p {
        max-width: 590px;
        font-size: 18px;
        line-height: 1.65;
        margin-bottom: 23px;
    }
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 900px) {

    .about {
        grid-template-columns: 1fr;
        gap: 42px;
        align-items: start;
    }

    .about-image {
        justify-content: center;
    }

    .about-image img {
        width: 100%;
        max-width: 520px;
    }

    .about-copy {
        width: 100%;
        max-width: 100%;
        text-align: left;
    }

    .about-copy h2 {
        font-size: 52px;
        line-height: 1;
        margin-bottom: 17px;
    }

    .about-copy .eyebrow {
        font-size: 11px;
        line-height: 1.55;
        letter-spacing: 2.5px;
        margin-bottom: 20px;
    }

    .about-copy p {
        max-width: 100%;
        font-size: 17px;
        line-height: 1.6;
        margin-bottom: 21px;
    }
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 600px) {

    .about {
        width: 100%;
        grid-template-columns: 1fr;
        gap: 30px;
        margin: 0;
    }

    .about-image {
        width: 100%;
        justify-content: center;
    }

    .about-image img {
        width: 100%;
        max-width: 100%;
        height: auto;
    }

    .about-copy {
        width: 100%;
        max-width: 100%;
        margin: 0;
        padding: 0;
        text-align: left;
    }

    .about-copy h2 {
        font-size: 40px;
        line-height: 1.02;
        letter-spacing: -0.4px;
        margin: 0 0 15px;
        text-align: left;
    }

    .about-copy .eyebrow {
        font-size: 10px;
        line-height: 1.6;
        letter-spacing: 2.2px;
        margin: 0 0 17px;
        text-align: left;
    }

    .about-copy p {
        width: 100%;
        max-width: 100%;
        font-size: 16px;
        line-height: 1.65;
        margin: 0 0 19px;
        text-align: left;
    }
}


/* =========================================================
   VERY SMALL MOBILE
   ========================================================= */

@media (max-width: 400px) {

    .about {
        gap: 27px;
    }

    .about-copy h2 {
        font-size: 37px;
        line-height: 1.02;
    }

    .about-copy .eyebrow {
        font-size: 9.5px;
        letter-spacing: 2px;
    }

    .about-copy p {
        font-size: 15.5px;
        line-height: 1.65;
    }
}
/* ---------- ENQUIRY FORM NORMAL INPUT TEXT ---------- */
.rg-enquiry-form input[type="tel"],
.rg-enquiry-form input[type="date"] {
    font-family: Arial, sans-serif !important;
    font-size: 16px !important;
    font-weight: 400 !important;
    letter-spacing: normal !important;
    font-style: normal !important;
}
.date-field {
    position: relative;
    width: 100%;
    min-height: 60px;
    border: 1px solid #29384d;
    background: #17263a;
    box-sizing: border-box;
}

.date-field .date-text {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    color: #718198;
    font-family: "Cormorant Garamond", Georgia, serif;
    font-size: 16px;
    pointer-events: none;
    z-index: 1;
}

.date-field input[type="date"] {
    position: relative;
    width: 100%;
    height: 60px;
    border: 0;
    background: transparent;
    color: transparent;
    padding: 18px 16px;
    box-sizing: border-box;
    outline: none;
    cursor: pointer;
    font-family: Arial, sans-serif !important;
    font-size: 16px !important;
}

.date-field input[type="date"]:valid {
    color: #fff;
}

.date-field input[type="date"]:valid + .date-text {
    display: none;
}

.date-field input[type="date"]::-webkit-calendar-picker-indicator {
    cursor: pointer;
    opacity: 1;
}

@media (max-width: 600px) {
    .date-field {
        min-height: 60px;
    }

    .date-field .date-text {
        left: 14px;
        font-size: 16px;
    }

    .date-field input[type="date"] {
        height: 60px;
        padding: 16px 14px;
    }
}
/* =========================================================
   ABOUT PAGE — MOBILE FIX
   ========================================================= */

@media (max-width: 900px) {

    .about {
        display: flex;
        flex-direction: column;
        width: 100%;
        max-width: 100%;
        gap: 35px;
        margin: 0 auto;
        padding: 0;
        overflow: hidden;
    }

    .about-image {
        width: 100%;
        max-width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        overflow: hidden;
    }

    .about-image img {
        width: 100%;
        max-width: 100%;
        height: auto;
        display: block;
        object-fit: contain;
    }

    .about-copy {
        width: 100%;
        max-width: 100%;
        margin: 0;
        padding: 0;
        text-align: left;
        box-sizing: border-box;
    }

    .about-copy h2 {
        margin: 0 0 18px;
        font-size: 46px;
        line-height: 1.05;
        letter-spacing: -0.5px;
    }

    .about-copy .eyebrow {
        margin: 0 0 22px;
        font-size: 11px;
        line-height: 1.6;
        letter-spacing: 2.5px;
    }

    .about-copy p {
        margin: 0 0 20px;
        font-size: 17px;
        line-height: 1.6;
        text-align: left;
    }
}


/* =========================================================
   SMALL MOBILE — 600px
   ========================================================= */

@media (max-width: 600px) {

    .about {
        gap: 28px;
        padding: 0;
    }

    .about-image {
        width: 100%;
        overflow: hidden;
    }

    .about-image img {
        width: 100%;
        max-width: 100%;
        height: auto;
        object-fit: contain;
    }

    .about-copy {
        width: 100%;
        padding: 0;
    }

    .about-copy h2 {
        font-size: 40px;
        line-height: 1.05;
        margin-bottom: 16px;
    }

    .about-copy .eyebrow {
        font-size: 10px;
        line-height: 1.6;
        letter-spacing: 2.2px;
        margin-bottom: 18px;
    }

    .about-copy p {
        font-size: 16px;
        line-height: 1.6;
        margin-bottom: 20px;
    }
}
/* =========================================================
   ABOUT PAGE — MOBILE
   KEEP DESKTOP DESIGN, RESPONSIVE COMPOSITION
   ========================================================= */

@media (max-width: 900px) {

    .about {
        display: flex;
        flex-direction: column;
        width: 100%;
        max-width: 100%;
        margin: 0;
        padding: 0 26px;
        gap: 38px;
        box-sizing: border-box;
        overflow: hidden;
    }

    /* -----------------------------------------
       FOUNDER IMAGE COMPOSITION
       ----------------------------------------- */

    .about-image {
        position: relative;
        width: 100%;
        max-width: 100%;
        margin: 0;
        padding: 0;
        display: block;
        box-sizing: border-box;
        overflow: visible;
    }

    .about-image img {
        width: 100%;
        max-width: 100%;
        height: auto;
        display: block;
        object-fit: contain;
    }

    /* -----------------------------------------
       FOUNDER NAME CARD
       ----------------------------------------- */

    .about-image .founder-card,
    .about-image .founder-label,
    .about-image .image-label {
        position: absolute;
        right: -5px;
        bottom: 20px;
        z-index: 5;
    }

    /* -----------------------------------------
       ABOUT TEXT
       ----------------------------------------- */

    .about-copy {
        width: 100%;
        max-width: 100%;
        margin: 0;
        padding: 0;
        text-align: left;
        box-sizing: border-box;
    }

    .about-copy h2 {
        margin: 0 0 18px;
        font-size: 43px;
        line-height: 1.05;
        letter-spacing: -0.5px;
    }

    .about-copy .eyebrow {
        margin: 0 0 20px;
        font-size: 11px;
        line-height: 1.6;
        letter-spacing: 2.5px;
    }

    .about-copy p {
        margin: 0 0 20px;
        font-family: Arial, Helvetica, sans-serif !important;
        font-size: 16px;
        font-weight: 400;
        font-style: normal;
        line-height: 1.6;
        letter-spacing: 0;
        text-align: left;
    }
}


/* =========================================================
   SMALL MOBILE
   ========================================================= */

@media (max-width: 600px) {

    .about {
        padding: 0 26px;
        gap: 32px;
    }

    .about-image {
        width: 100%;
        max-width: 100%;
    }

    .about-image img {
        width: 100%;
        max-width: 100%;
        height: auto;
    }

    .about-image .founder-card,
    .about-image .founder-label,
    .about-image .image-label {
        right: -8px;
        bottom: 18px;
    }

    .about-copy h2 {
        font-size: 40px;
        line-height: 1.05;
        margin-bottom: 16px;
    }

    .about-copy .eyebrow {
        font-size: 10px;
        line-height: 1.6;
        letter-spacing: 2.3px;
        margin-bottom: 18px;
    }

    .about-copy p {
        font-size: 16px;
        line-height: 1.6;
        margin-bottom: 20px;
    }
}
/* =========================================================
   ABOUT PAGE — DESCRIPTION TEXT
   PREMIUM / EDITORIAL STYLE
   ========================================================= */

.about-copy p {
    margin: 0 0 28px;
    max-width: 620px;

    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 17px;
    font-weight: 400;
    font-style: normal;

    line-height: 1.75;
    letter-spacing: 0.1px;
    color: #39404a;

    text-align: left;
}

/* Highlight the founder's name */
.about-copy p strong {
    font-family: Arial, Helvetica, sans-serif !important;
    font-weight: 600;
    color: #111827;
}

/* Second paragraph */
.about-copy p:nth-of-type(2) {
    margin-top: 6px;
    margin-bottom: 30px;
}

/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 900px) {

    .about-copy p {
        max-width: 100%;
        font-size: 16.5px;
        line-height: 1.7;
        margin-bottom: 24px;
    }
}

/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 600px) {

    .about-copy p {
        width: 100%;
        max-width: 100%;

        font-size: 16px;
        line-height: 1.7;
        letter-spacing: 0;

        margin: 0 0 24px;
        text-align: left;
    }

    .about-copy p:nth-of-type(2) {
        margin-top: 4px;
        margin-bottom: 26px;
    }

    .about-copy p strong {
        font-weight: 600;
    }
}
/* =========================================================
   ABOUT / FOUNDER SECTION — POSITION & ALIGNMENT
   ========================================================= */

.about {
    max-width: 1320px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(420px, 0.9fr) minmax(0, 1.1fr);
    gap: 80px;
    align-items: center;
}

/* Founder image */
.about-image {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.about-image img {
    width: 100%;
    max-width: 560px;
    height: auto;
    display: block;
    object-fit: cover;
}

/* Founder text */
.about-copy {
    max-width: 620px;
    margin: 0;
    padding: 0;
    text-align: left;
}

.about-copy h2 {
    margin: 0 0 14px;
    font-size: clamp(42px, 5vw, 68px);
    line-height: 0.95;
    letter-spacing: -1px;
}

.about-copy .eyebrow {
    margin: 0 0 24px;
    font-size: 13px;
    line-height: 1.4;
    letter-spacing: 3px;
}

.about-copy p {
    margin: 0 0 24px;
    font-size: 18px;
    line-height: 1.55;
}

.about-copy p:last-child {
    margin-bottom: 0;
}

/* Better spacing between heading and body */
.about-copy h2 + .eyebrow {
    margin-top: 0;
}

/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 900px) {
    .about {
        grid-template-columns: 1fr;
        gap: 45px;
        align-items: start;
    }

    .about-image {
        justify-content: center;
    }

    .about-image img {
        width: 100%;
        max-width: 520px;
    }

    .about-copy {
        max-width: 100%;
    }

    .about-copy h2 {
        font-size: clamp(42px, 10vw, 58px);
        line-height: 0.95;
        margin-bottom: 12px;
    }

    .about-copy .eyebrow {
        font-size: 11px;
        line-height: 1.5;
        margin-bottom: 22px;
    }

    .about-copy p {
        font-size: 18px;
        line-height: 1.55;
        margin-bottom: 22px;
    }
}

/* =========================================================
   SMALL MOBILE
   ========================================================= */

@media (max-width: 600px) {
    .about {
        gap: 32px;
    }

    .about-image img {
        max-width: 100%;
    }

    .about-copy h2 {
        font-size: 43px;
        line-height: 0.94;
    }

    .about-copy .eyebrow {
        font-size: 10px;
        letter-spacing: 2.5px;
        margin-bottom: 18px;
    }

    .about-copy p {
        font-size: 17px;
        line-height: 1.5;
        margin-bottom: 20px;
    }
}
/* =========================
   RG ENQUIRY DATE FIELD
   ========================= */

.rg-date-field {
    position: relative;
    width: 100%;
    height: 72px;
    margin: 0 0 14px;
}

.rg-date-field input[type="date"] {
    width: 100%;
    height: 72px;
    box-sizing: border-box;

    background: #17283f;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 0;

    color: #8da0ba;
    font-family: "Cormorant Garamond", serif;
    font-size: 18px;
    font-weight: 400;

    padding: 0 54px 0 18px;

    outline: none;
    text-align: left;
    text-align-last: left;

    color-scheme: dark;
    appearance: auto;
    -webkit-appearance: auto;
}

.rg-date-field input[type="date"]:focus {
    border-color: #b88932;
}

.rg-date-field input[type="date"]::-webkit-calendar-picker-indicator {
    opacity: 0.8;
    cursor: pointer;
}

/* Custom placeholder */
.rg-date-field .date-placeholder {
    position: absolute;
    left: 18px;
    top: 50%;
    transform: translateY(-50%);

    color: #7890ad;
    font-family: "Cormorant Garamond", serif;
    font-size: 18px;
    font-weight: 400;

    pointer-events: none;
    transition: opacity 0.2s ease;
}

/* Hide placeholder when date is selected */
.rg-date-field input[type="date"]:valid + .date-placeholder {
    opacity: 0;
}

/* Mobile */
@media (max-width: 600px) {
    .rg-date-field,
    .rg-date-field input[type="date"] {
        height: 72px;
    }

    .rg-date-field input[type="date"],
    .rg-date-field .date-placeholder {
        font-size: 18px;
    }
}
.admin-video-player {
  width: 100%;
  max-width: 100%;
  aspect-ratio: 16 / 9;
  display: block;
  background: #000;
  border-radius: 8px;
  object-fit: contain;
}

.media-preview img {
  width: 100%;
  height: 220px;
  object-fit: cover;
  display: block;
  border-radius: 8px;
}