/* =======================================================
  Designed by PageMelo
  A Zarephia brand

  Visit the website: https://pagemelo.com
  Buy here: https://pagemelo.gumroad.com
  Follow for updates: https://instagram.com/hello.pagemelo

  License: Single Use Only
  Copyright © PageMelo. All rights reserved.
  ======================================================= */

:root {
    --primary-dark: #0c1821;
    --secondary-dark: rgba(50, 74, 95, 0.25);
    --primary-light: rgb(194,192,182);
    --text: #bfbfc4;

    /* ---------- Accent + Fonts ---------- */
    --accent: #B89556;
    --secondary-light: #f1ddcc;
    --font-heading: "Ubuntu", sans-serif;
    --font-body: "Raleway", sans-serif;
    --font-accent: "Exo 2", sans-serif;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: var(--font-body);
    background-color: var(--primary-dark);
    color: var(--text);
    line-height: 1.6;
    overflow-x: hidden;
}

/* Particles Background */
#particles-js {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: -1;
}

/* Page Container */
.page {
    display: none;
    min-height: 100vh;
    padding: 3rem 0 140px 0;
    animation: fadeIn 0.6s ease-in-out;
}

/* Portfolio and Testimonials get 25% more bottom clearance than the shared
   base (140px -> 175px). Explicit shared value between the two, kept
   separate from About so it isn't affected. */
#portfolio,
#testimonials {
    padding-bottom: 175px;
}

.page.active {
    display: block;
}

.page.active {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Floating Bottom Navbar */
.bottom-navbar {
    background: var(--secondary-dark);
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    backdrop-filter: blur(10px);
    border-radius: 25px;
    padding: 10px 20px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
    z-index: 1000;
    border: 1px solid rgba(194,192,182,0.2);

    display: flex;
    align-items: center;
    gap: 10px;
}

.nav-btn i {
    font-size: 1.2rem;
    margin-bottom: 2px;
}

.nav-btn:hover {
    color: var(--accent);
    transform: translateY(-2px);
}

.nav-btn.active {
    background: var(--accent);
    color: var(--primary-dark);
    font-weight: 500;
    box-shadow: 0 4px 15px rgba(184,149,86,0.3);
}

.nav-item {
    display: flex;
    align-items: center;
}

.nav-btn {
    background: none;
    border: none;
    padding: 12px 16px;
    border-radius: 25px;
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 0.9rem;
    color: var(--primary-light);
    min-width: 80px;
}

.hamburger-menu {
  display: none;
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1001;
}

.hamburger-btn {
    width: 60px;
    height: 60px;
    background: var(--accent);
    backdrop-filter: blur(10px);
    border: none;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
}

.hamburger-btn:hover {
    transform: scale(1.05);
}

.hamburger-icon {
    width: 24px;
    height: 18px;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.hamburger-line {
    width: 100%;
    height: 2px;
    background: var(--primary-dark);
    border-radius: 2px;
    transition: all 0.3s ease;
}

/* Hamburger animation when active */
.hamburger-btn.active .hamburger-line:nth-child(1) {
    transform: rotate(45deg) translate(6px, 6px);
}

.hamburger-btn.active .hamburger-line:nth-child(2) {
    opacity: 0;
}

.hamburger-btn.active .hamburger-line:nth-child(3) {
    transform: rotate(-45deg) translate(6px, -6px);
}

.mobile-menu {
    display: none;
    position: fixed;
    bottom: 100px;
    left: 50%;
    background: var(--primary-dark);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    padding: 20px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
    z-index: 1000;
    min-width: 200px;
    opacity: 0;
    pointer-events: none;
    transform: translateX(-50%) translateY(20px) scale(0.95); /* Combined transforms */
    transition: all 0.3s ease;
}

.mobile-menu.active {
    opacity: 1;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0) scale(1); /* Keep centering + animation */
}

.mobile-menu-item {
    display: block;
    width: 100%;
    background: none;
    border: none;
    padding: 15px 20px;
    text-align: left;
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 1rem;
    color: var(--text);
    border-radius: 10px;
    margin-bottom: 5px;
}

.mobile-menu-item:hover {
    background: var(--secondary-dark);
    color: var(--accent);
}

.mobile-menu-item.active {
    background: var(--secondary-dark);
    color: var(--accent);
    font-weight: 500;
}

/* Mobile responsive styles */
@media (max-width: 768px) {
    /* Hide desktop navbar */
    .bottom-navbar {
        display: none;
    }
    
    /* Show hamburger menu */
    .hamburger-menu {
        display: block;
    }
    
    .mobile-menu {
        display: block;
    }
    
    .content {
        padding: 20px;
        margin-bottom: 100px;
    }
}

/* Content Sections */
.hero-section {
    text-align: center;
    padding: 4rem 0;
}

.hero-title {
    font-family: var(--font-heading);
    font-size: 7rem;
    font-weight: 700;
    transition: all 0.3s ease;
}

.hero-title:hover {
  transform: scale(1.05);
  color: var(--accent);
}

.hero-subtitle {
    font-family: var(--font-accent);
    font-size: 2rem;
    color: var(--primary-light);
    margin-bottom: 2rem;
}

.hero-subtitle span {
    color: var(--accent);
}

.section-title {
    font-family: var(--font-heading);
    font-size: 2.5rem;
    text-align: center;
    margin-bottom: 4rem;
    color: var(--primary-light);
    position: relative;
}

.section-title::after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 3px;
    background: var(--accent);
    border-radius: 2px;
}

.section-subtitle {
    text-align: center;
    color: var(--text);
    max-width: 620px;
    margin: -2.5rem auto 3.5rem;
    font-size: 1.05rem;
    line-height: 1.6;
}

.lead {
    max-width: 600px;
    margin: 0 auto;
}

.about-photo-section {
    margin-right: -75px;
}

.about-photo {
    max-height: 280px;
    max-width: 280px;
}

.about-description {
    padding-bottom: 48px;
}

/* Cards: shared solid style used by About (trait cards), Contact (booking panel),
   Pricing, and the featured testimonial, for a consistent card language across the site */
.contact-card,
.service-card,
.pricing-card,
.testimonial-card.featured {
    display: flex;
    flex-direction: column;
    width: 100%;
    background-color: var(--secondary-dark);
    border-radius: 15px;
    padding: 2rem;
    margin-bottom: 2rem;
    border: 1px solid rgba(194,192,182,0.1);
    backdrop-filter: blur(5px);
    transition: transform 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease;
}

/* .service-card is only used on the About page now (3 trait cards) */
.service-card:hover,
.pricing-card:hover,
.testimonial-card.featured:hover {
    transform: translateY(-2px);
    border-color: var(--accent);
    box-shadow: 0 6px 16px rgba(0,0,0,0.15);
}

/* About's trait cards are often the last thing on the page (Who I Help and
   Tools I Use below them are optional) — without this, the shared card's
   margin-bottom would stack on top of the page's own bottom padding, giving
   About extra space that Portfolio/Testimonials don't have. */
#about .service-card {
    margin-bottom: 0;
}

/* About — optional "Who I help" bullets. Bullets flow like text and wrap
   onto new lines on their own: each item is only as wide as its content, so
   short labels sit several to a row and long ones take the room they need.
   Hidden by script.js while about.whoIHelp.items is empty. */
.about-audience {
    margin-top: 3.5rem;
}

.about-audience[hidden] {
    display: none;
}

#about .about-audience .subsection-title {
    margin: 0 0 1.25rem;
}

.about-audience-intro {
    text-align: center;
    max-width: 600px;
    margin: 0 auto 1.5rem;
}

.about-audience-intro:empty {
    display: none;
}

.audience-list {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.75rem 2.75rem;
    max-width: 900px;
    margin: 0 auto;
}

.audience-list li {
    position: relative;
    max-width: 100%;
    padding-left: 1.3rem;
    font-size: 1.1rem;
    line-height: 1.5;
    color: var(--primary-light);
}

.audience-list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.68em;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--accent);
}

/* Phones only: switch "Who I help" from flowing bullets to a simple list,
   one item per row, so nothing ends up scattered. The list shrinks to its
   widest item and centers as a group, so the bullets line up in a clean
   column under the centered heading. Tablet and desktop keep the flow. */
@media (max-width: 600px) {
    .audience-list {
        display: block;
        width: fit-content;
        max-width: 100%;
        margin: 0 auto;
    }

    .audience-list li {
        padding: 0.45rem 0 0.45rem 1.3rem;
    }

    .audience-list li::before {
        top: calc(0.45rem + 0.68em);
    }
}

/* About — optional "Tools I use" tags. Pill-shaped to echo the site's buttons. */
.about-tools {
    margin-top: 3rem;
    text-align: center;
}

.about-tools[hidden] {
    display: none;
}

.about-tools-heading {
    font-family: var(--font-accent);
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: 1rem;
}

.tools-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.6rem;
    max-width: 900px;
    margin: 0 auto;
}

.tool-tag {
    font-size: 0.9rem;
    color: var(--text);
    background-color: var(--secondary-dark);
    border: 1px solid rgba(194,192,182,0.15);
    border-radius: 50px;
    padding: 0.45rem 1.1rem;
    transition: border-color 0.3s ease, color 0.3s ease;
}

.tool-tag:hover {
    border-color: var(--accent);
    color: var(--primary-light);
}

/* ---------------------------------------------- */
/* Services: 3-per-row grid, minimal (no boxes)   */
/* ---------------------------------------------- */
.service-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 3.5rem 2.5rem;
    max-width: 1100px;
    margin: 0 auto;
}

.service-item {
    border-top: 2px solid var(--accent);
    padding-top: 1.5rem;
    transition: transform 0.3s ease, border-color 0.3s ease;
}

.service-item:hover {
    transform: translateY(-4px);
    border-top-color: var(--secondary-light);
}

.service-item-icon {
    display: block;
    font-size: 1.6rem;
    color: var(--accent);
    margin-bottom: 1rem;
    transition: color 0.3s ease, transform 0.3s ease;
}

.service-item:hover .service-item-icon {
    color: var(--secondary-light);
    transform: scale(1.1);
}

.service-item h4 {
    font-family: var(--font-heading);
    font-size: 1.7rem;
    line-height: 1.2;
    color: var(--primary-light);
    margin-bottom: 0.85rem;
    transition: color 0.3s ease;
}

.service-item:hover h4 {
    color: var(--accent);
}

.service-item p {
    color: var(--text);
    margin: 0;
}

@media (max-width: 992px) {
    .service-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* .about-photo-section's -75px right margin only makes sense in the
       wide 2-column desktop layout (nudging the photo toward the text
       column). Below the lg breakpoint the columns stack, so the same
       margin instead pulls the centered photo visibly off-center. */
    .about-photo-section {
        margin-right: 0;
    }
}

@media (max-width: 600px) {
    .service-grid {
        grid-template-columns: 1fr;
        gap: 2.5rem;
    }

    .service-item h4 {
        font-size: 1.5rem;
    }
}

/* ---------------------------------------------- */
/* How I Work: flexible step row, any item count   */
/* ---------------------------------------------- */
.subsection-title {
    font-family: var(--font-heading);
    font-size: 1.8rem;
    text-align: center;
    color: var(--primary-light);
    margin: 5rem 0 3rem;
}

/* Row split is deterministic, not just "however many fit": script.js counts
   the .how-i-work-step items and physically groups them into .how-i-work-row
   wrappers (3 items -> one row of 3, 4 -> one row of 4, 5 -> 3 then 2, 6 -> 4
   then 2). Item width is fixed and derived from the TOP row's column count
   (via --how-i-work-item-width, set in JS), then applied to every row. The
   top row fills the full width by construction; a shorter bottom row uses
   the same per-item width and just centers itself with room to spare. */
.how-i-work-grid {
    display: flex;
    flex-direction: column;
    gap: 2.5rem;
    max-width: 1100px;
    margin: 0 auto;
}

.how-i-work-row {
    display: flex;
    justify-content: center;
    gap: 2rem;
    width: 100%;
}

.how-i-work-step {
    flex: 0 1 var(--how-i-work-item-width, 220px);
    text-align: center;
}

.how-i-work-number {
    width: 52px;
    height: 52px;
    margin: 0 auto 1.1rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(184,149,86,0.12);
    border: 1px solid rgba(184,149,86,0.4);
    color: var(--accent);
    font-family: var(--font-heading);
    font-size: 1.2rem;
    font-weight: 700;
}

.how-i-work-step h4 {
    font-family: var(--font-heading);
    font-size: 1.15rem;
    color: var(--primary-light);
    margin-bottom: 0.6rem;
}

.how-i-work-step p {
    font-size: 0.9rem;
    color: var(--text);
    margin: 0;
}

@media (max-width: 700px) {
    .how-i-work-row {
        flex-direction: column;
        align-items: center;
    }

    .how-i-work-step {
        flex: 0 0 auto;
        width: 100%;
        max-width: 320px;
    }
}

/* ---------------------------------------------- */
/* Pricing: flexible card row, any tier count      */
/* ---------------------------------------------- */
.pricing-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: stretch;
    gap: 2rem;
    max-width: 1100px;
    margin: 0 auto;
}

.pricing-card {
    flex: 1 1 300px;
    max-width: 340px;
    position: relative;
    text-align: center;
}

.pricing-card.featured {
    border-color: var(--accent);
    transform: scale(1.03);
}

.pricing-card.featured:hover {
    transform: scale(1.03) translateY(-2px);
}

.pricing-badge {
    position: absolute;
    top: -14px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--accent);
    color: var(--primary-dark);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    padding: 0.35rem 1rem;
    border-radius: 20px;
    white-space: nowrap;
}

.pricing-tier-name {
    font-family: var(--font-heading);
    font-size: 1.4rem;
    color: var(--primary-light);
    margin-bottom: 0.5rem;
}

.pricing-tier-tagline {
    color: var(--text);
    font-size: 0.9rem;
    margin-bottom: 1.5rem;
}

.pricing-amount {
    font-family: var(--font-heading);
    font-size: 2.25rem;
    font-weight: 700;
    color: var(--accent);
    margin-bottom: 1.75rem;
}

.pricing-currency {
    font-size: 1.3rem;
    vertical-align: top;
    margin-right: 2px;
}

.pricing-period {
    font-size: 1rem;
    font-weight: 400;
    color: var(--primary-light);
}

.pricing-features {
    list-style: none;
    padding: 0;
    margin: 0 0 2rem;
    text-align: left;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    flex-grow: 1;
}

.pricing-features li {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    font-size: 0.92rem;
    color: var(--text);
}

.pricing-features li i {
    color: var(--accent);
    margin-top: 0.2rem;
    flex-shrink: 0;
}

.pricing-cta {
    width: 100%;
    margin-top: auto;
}

@media (max-width: 600px) {
    .pricing-card.featured {
        transform: none;
    }

    .pricing-card.featured:hover {
        transform: translateY(-2px);
    }
}

/* ---------------------------------------------- */
/* Portfolio: boxed 2-up grid (site's shared card  */
/* language: solid bg, hairline border, blur)      */
/* ---------------------------------------------- */
.portfolio-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2.5rem;
    max-width: 980px;
    margin: 0 auto;
    align-items: start;
}

.portfolio-card {
    display: flex;
    flex-direction: column;
    background-color: var(--secondary-dark);
    border: 1px solid rgba(194,192,182,0.12);
    border-radius: 16px;
    overflow: hidden;
    backdrop-filter: blur(5px);
    cursor: pointer;
    transition: transform 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease;
}

.portfolio-card:hover {
    transform: translateY(-4px);
    border-color: var(--accent);
    box-shadow: 0 10px 25px rgba(0,0,0,0.2);
}

.portfolio-image {
    position: relative;
    width: 100%;
    height: 110px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: 0.5rem;
    overflow: visible;
}

/* Card thumbnail is built by script.js from the first 1-3 items in this
   project's .portfolio-media gallery, shown as a small fanned photo stack.
   If that gallery is empty, the whole .portfolio-image element is removed
   instead of showing a placeholder. */
.portfolio-thumb-tile {
    position: absolute;
    width: 64px;
    height: 64px;
    border-radius: 8px;
    overflow: hidden;
    border: 3px solid rgba(255,255,255,0.85);
    box-shadow: 0 8px 18px rgba(0,0,0,0.35);
    background: var(--primary-dark);
    transition: transform 0.35s ease;
}

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

.portfolio-image.thumb-count-1 .portfolio-thumb-tile {
    transform: rotate(0deg);
}

.portfolio-image.thumb-count-2 .portfolio-thumb-tile:nth-child(1) {
    transform: translateX(-22px) rotate(-8deg);
    z-index: 1;
}

.portfolio-image.thumb-count-2 .portfolio-thumb-tile:nth-child(2) {
    transform: translateX(22px) rotate(8deg);
    z-index: 2;
}

.portfolio-image.thumb-count-3 .portfolio-thumb-tile:nth-child(1) {
    transform: translateX(-34px) rotate(-12deg);
    z-index: 1;
}

.portfolio-image.thumb-count-3 .portfolio-thumb-tile:nth-child(2) {
    transform: translateX(0) rotate(0deg);
    z-index: 3;
}

.portfolio-image.thumb-count-3 .portfolio-thumb-tile:nth-child(3) {
    transform: translateX(34px) rotate(12deg);
    z-index: 2;
}

/* Slight spread on hover so the fan feels alive, matching the card's own lift */
.portfolio-card:hover .portfolio-image.thumb-count-2 .portfolio-thumb-tile:nth-child(1) {
    transform: translateX(-28px) rotate(-10deg) translateY(-3px);
}

.portfolio-card:hover .portfolio-image.thumb-count-2 .portfolio-thumb-tile:nth-child(2) {
    transform: translateX(28px) rotate(10deg) translateY(-3px);
}

.portfolio-card:hover .portfolio-image.thumb-count-3 .portfolio-thumb-tile:nth-child(1) {
    transform: translateX(-42px) rotate(-14deg) translateY(-3px);
}

.portfolio-card:hover .portfolio-image.thumb-count-3 .portfolio-thumb-tile:nth-child(2) {
    transform: translateX(0) rotate(0deg) translateY(-5px);
}

.portfolio-card:hover .portfolio-image.thumb-count-3 .portfolio-thumb-tile:nth-child(3) {
    transform: translateX(42px) rotate(14deg) translateY(-3px);
}

.portfolio-thumb-play {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(10,10,10,0.35);
    color: #fff;
    font-size: 0.7rem;
    pointer-events: none;
}

/* Only shown if a specific media path in the gallery is broken (rare) —
   not shown when a project simply has no media, since the image block is
   removed entirely in that case. */
.portfolio-thumb-fallback {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(184,149,86,0.2), rgba(184,149,86,0.06));
}

.portfolio-thumb-fallback i {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(184,149,86,0.2);
    color: var(--accent);
    font-size: 0.7rem;
}

/* When a project has no media at all, the card becomes text-only — a
   colored top edge keeps it feeling deliberate rather than incomplete. */
.portfolio-card.no-media {
    border-top: 3px solid var(--accent);
}

.portfolio-card.no-media .portfolio-content {
    padding-top: 2rem;
}

.portfolio-content {
    padding: 1.75rem;
}

.portfolio-content h5 {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--accent);
    margin-bottom: 0.6rem;
}

.portfolio-content p.portfolio-summary {
    color: var(--text);
    margin-bottom: 1.25rem;
}

.portfolio-view-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: none;
    border: none;
    color: var(--accent);
    font-family: var(--font-body);
    font-size: 0.92rem;
    font-weight: 600;
    padding: 0;
    cursor: pointer;
}

.portfolio-view-btn i {
    font-size: 0.8rem;
    transition: transform 0.25s ease;
}

.portfolio-view-btn:hover {
    color: var(--primary-light);
}

.portfolio-view-btn:hover i {
    transform: translateX(3px);
}

/* ---------------------------------------------- */
/* Portfolio case-study modal                      */
/* ---------------------------------------------- */
.portfolio-modal {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 2rem 1rem;
}

.portfolio-modal.active {
    display: flex;
}

.portfolio-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(10,10,10,0.75);
    backdrop-filter: blur(3px);
}

.portfolio-modal-dialog {
    position: relative;
    background-color: rgba(12, 24, 33, 0.97);
    border: 1px solid rgba(194,192,182,0.15);
    border-radius: 18px;
    max-width: 760px;
    width: 100%;
    max-height: 88vh;
    overflow: hidden;
    box-shadow: 0 25px 60px rgba(0,0,0,0.45);
    animation: portfolioModalIn 0.3s ease;
}

@keyframes portfolioModalIn {
    from { opacity: 0; transform: translateY(20px) scale(0.98); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

.portfolio-modal-scroll {
    max-height: 88vh;
    overflow-y: auto;
}

.portfolio-modal-close {
    position: absolute;
    top: 1rem;
    right: 1rem;
    z-index: 2;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: none;
    background: rgba(10,10,10,0.55);
    color: #fff;
    font-size: 1rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.25s ease, color 0.25s ease;
}

.portfolio-modal-close:hover {
    background: var(--accent);
    color: var(--primary-dark);
}

.portfolio-modal-main {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    background: rgba(184,149,86,0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.portfolio-modal-main {
    cursor: zoom-in;
}

.portfolio-modal-main img,
.portfolio-modal-main video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    cursor: zoom-in;
}

.portfolio-modal-main iframe {
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}

.portfolio-modal-media-fallback {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    background:
        repeating-linear-gradient(135deg, rgba(255,255,255,0.025) 0px, rgba(255,255,255,0.025) 2px, transparent 2px, transparent 10px),
        linear-gradient(135deg, rgba(184,149,86,0.18), rgba(184,149,86,0.05));
}

.portfolio-modal-fallback-badge {
    width: 52px;
    height: 52px;
    flex-shrink: 0;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(184,149,86,0.16);
    border: 1px solid rgba(184,149,86,0.4);
    color: var(--accent);
    font-size: 1.35rem;
}

.portfolio-modal-fallback-label {
    font-size: 0.75rem;
    color: var(--primary-light);
}

.portfolio-modal-media-fallback--lg {
    width: min(80vw, 480px);
    height: min(60vh, 360px);
    border-radius: 6px;
}

.portfolio-modal-media-fallback--lg .portfolio-modal-fallback-badge {
    width: 72px;
    height: 72px;
    font-size: 1.8rem;
}

.portfolio-modal-media-fallback--lg .portfolio-modal-fallback-label {
    font-size: 0.9rem;
}

.portfolio-modal-media-fallback--sm {
    gap: 0;
}

.portfolio-modal-media-fallback--sm .portfolio-modal-fallback-badge {
    width: 26px;
    height: 26px;
    font-size: 0.7rem;
    border-width: 1px;
}

/* When a project has no media at all, the gallery block collapses
   completely instead of leaving an empty placeholder box. */
.portfolio-modal-gallery.is-empty {
    display: none;
}

.portfolio-modal-body.no-gallery {
    padding-top: 2.25rem;
}

.portfolio-modal-expand {
    position: absolute;
    bottom: 0.75rem;
    right: 0.75rem;
    z-index: 2;
    width: 36px;
    height: 36px;
    border-radius: 8px;
    border: none;
    background: rgba(10,10,10,0.6);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 0.85rem;
    transition: background 0.25s ease, color 0.25s ease;
}

.portfolio-modal-expand:hover {
    background: var(--accent);
    color: var(--primary-dark);
}

.portfolio-modal-play {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(10,10,10,0.25);
    border: none;
    padding: 0;
    cursor: pointer;
}

.portfolio-modal-play i {
    width: 62px;
    height: 62px;
    border-radius: 50%;
    background: rgba(10,10,10,0.6);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    transition: background 0.25s ease, transform 0.25s ease;
}

.portfolio-modal-play:hover i {
    background: var(--accent);
    color: var(--primary-dark);
    transform: scale(1.08);
}

/* "Plays on YouTube" / "Plays in Google Drive" caption under the play icon,
   shown when a video opens on its own site instead of the embedded player */
.portfolio-modal-play:has(.portfolio-modal-play-note) {
    flex-direction: column;
    gap: 0.6rem;
}

.portfolio-modal-play-note {
    font-size: 0.8rem;
    color: #fff;
    background: rgba(10,10,10,0.6);
    padding: 0.25rem 0.7rem;
    border-radius: 20px;
}

.portfolio-modal-thumbs {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(64px, 1fr));
    gap: 0.6rem;
    padding: 0.9rem;
    background: rgba(0,0,0,0.15);
}

.portfolio-modal-thumb {
    position: relative;
    width: 100%;
    height: 56px;
    border-radius: 8px;
    overflow: hidden;
    border: 2px solid transparent;
    cursor: pointer;
    padding: 0;
    background: rgba(184,149,86,0.1);
}

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

.portfolio-modal-thumb.active {
    border-color: var(--accent);
}


.portfolio-modal-thumb .fa-play {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(10,10,10,0.35);
    color: #fff;
    font-size: 0.75rem;
}

.portfolio-modal-body {
    padding: 1.75rem 2rem 2.25rem;
}

.portfolio-modal-title {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--accent);
    margin-bottom: 1rem;
}

.portfolio-modal-close-secondary {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
    margin-top: 2rem;
    padding: 0.85rem;
    background: none;
    border: 1px solid rgba(194,192,182,0.25);
    border-radius: 10px;
    color: var(--primary-light);
    font-family: var(--font-body);
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: border-color 0.25s ease, color 0.25s ease;
}

.portfolio-modal-close-secondary:hover {
    border-color: var(--accent);
    color: var(--accent);
}

body.modal-open {
    overflow: hidden;
}

/* The floating hamburger button (z-index 1001) sits above the modal
   (z-index 1000) and would otherwise cover its bottom edge on mobile —
   hide it entirely while a modal is open. */
body.modal-open .hamburger-menu {
    display: none;
}

/* ---------------------------------------------- */
/* Lightbox: full-screen view for any gallery item */
/* ---------------------------------------------- */
.portfolio-lightbox {
    position: fixed;
    inset: 0;
    z-index: 1100;
    display: none;
    align-items: center;
    justify-content: center;
}

.portfolio-lightbox.active {
    display: flex;
}

.portfolio-lightbox-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(5,8,11,0.96);
}

.portfolio-lightbox-stage {
    position: relative;
    z-index: 1;
    max-width: 90vw;
    max-height: 85vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.portfolio-lightbox-stage img,
.portfolio-lightbox-stage video {
    max-width: 90vw;
    max-height: 85vh;
    width: auto;
    height: auto;
    display: block;
    border-radius: 6px;
}

.portfolio-lightbox-stage iframe {
    /* 16:9 player that fits inside 90vw x 80vh (80vh * 16/9 = ~142vh), which
       also keeps it clear of the close button at the top of the screen */
    width: min(calc(100vw - 150px), 142vh); /* leaves room for the prev/next arrows */
    aspect-ratio: 16 / 9;
    height: auto;
    border: 0;
    border-radius: 6px;
    display: block;
    background: #000;
}

/* Pinned to the top-left of the screen so it never collides with the
   close button (top-right), the arrows (sides) or the counter (bottom). */
.portfolio-embed-fallback {
    position: fixed;
    top: 1.6rem;
    left: 1.25rem;
    z-index: 2;
    white-space: nowrap;
    font-size: 0.85rem;
    color: rgba(255,255,255,0.75);
    text-decoration: underline;
}

.portfolio-embed-fallback:hover {
    color: var(--accent);
}

/* Phones: use nearly the full width. Google Drive's mobile player has its own
   header and control bar, so it needs a much taller box than 16:9 or the
   bottom (including the play controls) gets cut off. */
@media (max-width: 768px) {
    .portfolio-lightbox-stage {
        max-width: 96vw;
    }

    .portfolio-lightbox-stage iframe {
        width: 96vw;
    }

    .portfolio-embed-fallback {
        top: 1.5rem;
        left: 0.9rem;
        font-size: 0.8rem;
    }

    .portfolio-lightbox-stage iframe.portfolio-embed--gdrive {
        aspect-ratio: auto;
        height: min(70vh, 560px);
        min-height: 300px;
    }
}

.portfolio-lightbox-stage .portfolio-modal-play {
    border-radius: 6px;
}

.portfolio-lightbox-close,
.portfolio-lightbox-nav {
    position: absolute;
    border: none;
    border-radius: 50%;
    background: rgba(255,255,255,0.1);
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.25s ease, color 0.25s ease;
    z-index: 2;
}

.portfolio-lightbox-close:hover,
.portfolio-lightbox-nav:hover {
    background: var(--accent);
    color: var(--primary-dark);
}

.portfolio-lightbox-close {
    top: 1.25rem;
    right: 1.25rem;
    width: 42px;
    height: 42px;
    font-size: 1.1rem;
}

.portfolio-lightbox-nav {
    top: 50%;
    transform: translateY(-50%);
    width: 46px;
    height: 46px;
    font-size: 1.1rem;
}

.portfolio-lightbox-prev {
    left: 1.25rem;
}

.portfolio-lightbox-next {
    right: 1.25rem;
}

.portfolio-lightbox-counter {
    position: absolute;
    bottom: 1.25rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
    color: var(--text);
    font-size: 0.85rem;
    background: rgba(255,255,255,0.08);
    padding: 0.3rem 0.85rem;
    border-radius: 20px;
}

.portfolio-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 1.25rem;
    font-size: 0.9rem;
    color: var(--primary-light);
    margin-bottom: 1.5rem;
}

.portfolio-meta span:not(:last-child)::after {
    content: '·';
    margin-left: 1.25rem;
    color: var(--accent);
}

.case-study-section {
    margin-bottom: 1.5rem;
}

.case-study-section h6 {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: 0.6rem;
}

.case-study-section p {
    font-size: 1rem;
    line-height: 1.6;
    color: var(--text);
    margin: 0;
}

.case-study-approach {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}

.case-study-approach li {
    position: relative;
    padding-left: 1.15rem;
    font-size: 1rem;
    line-height: 1.55;
    color: var(--text);
}

.case-study-approach li::before {
    content: '\f105';
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    color: var(--accent);
    position: absolute;
    left: 0;
    top: 0.1rem;
    font-size: 0.8rem;
}

.case-study-results {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.75rem;
    margin-bottom: 1.5rem;
}

.result-stat {
    text-align: center;
    padding: 0.85rem 0.4rem;
    background: rgba(184,149,86,0.08);
    border-radius: 10px;
}

.result-stat strong {
    display: block;
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--accent);
    margin-bottom: 0.15rem;
}

.result-stat span {
    font-size: 0.72rem;
    color: var(--primary-light);
    line-height: 1.3;
}

.client-info {
    font-size: 0.9rem;
    color: var(--primary-light);
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(194,192,182,0.15);
}

/* ---------------------------------------------- */
/* Testimonials: featured card + plain divider grid */
/* ---------------------------------------------- */
.testimonial-card.featured {
    max-width: 720px;
    margin: 0 auto 4rem;
}

.quote-mark {
    font-family: Georgia, serif;
    font-size: 3rem;
    line-height: 1;
    color: var(--accent);
    margin-bottom: 0.5rem;
}

.testimonial-card.featured .quote-mark {
    font-size: 3.5rem;
}

.quote-text {
    font-size: 1.05rem;
    line-height: 1.7;
    color: var(--primary-light);
    font-style: italic;
    margin-bottom: 1.25rem;
}

.testimonial-card.featured .quote-text {
    font-size: 1.25rem;
}

.quote-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.quote-author {
    display: flex;
    flex-direction: column;
}

.quote-name {
    font-weight: 600;
    color: var(--accent);
}

.quote-role {
    font-size: 0.85rem;
    color: var(--text);
}

.testimonial-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 4rem 5rem;
    max-width: 1000px;
    margin: 0 auto;
}

.testimonial-block {
    padding-left: 1.75rem;
    border-left: 1px solid rgba(194,192,182,0.2);
}

/* A lone last item on an odd-numbered row spans and centers itself —
   no JS needed as testimonials are added or removed. */
.testimonial-grid > .testimonial-block:last-child:nth-child(odd) {
    grid-column: 1 / -1;
    max-width: 560px;
    margin: 0 auto;
    text-align: center;
    border-left: none;
    padding-left: 0;
}

.testimonial-grid > .testimonial-block:last-child:nth-child(odd) .quote-footer {
    justify-content: center;
    flex-direction: column;
    gap: 0.4rem;
}

@media (max-width: 768px) {
    .testimonial-card.featured {
        padding: 1.5rem;
    }

    .testimonial-card.featured .quote-text {
        font-size: 1.1rem;
    }

    .testimonial-grid {
        grid-template-columns: 1fr;
    }
}

/* ---------------------------------------------- */
/* Contact: booking panel replacing the form       */
/* ---------------------------------------------- */
.booking-panel {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    padding: 2rem 1.5rem;
    border: 1px dashed rgba(184,149,86,0.4);
    border-radius: 12px;
}

.booking-icon {
    font-size: 2.25rem;
    color: var(--accent);
    margin-bottom: 1rem;
}

.booking-panel h5 {
    color: var(--accent);
    margin-bottom: 0.75rem;
}

.booking-panel p {
    color: var(--text);
    margin-bottom: 1.5rem;
}

.booking-btn {
    align-self: center;
}

.booking-fallback {
    margin: 1.25rem 0 0;
    font-size: 0.85rem;
    color: var(--text);
}

/* Contact: email shown as a "Email me" style link rather than the raw
   address, and the info column when it expands to fill the whole card
   (booking.ctaLink empty -> #booking-col is removed by script.js) */
.contact-email-link {
    color: var(--text);
    text-decoration: none;
    border-bottom: 1px solid rgba(194,192,182,0.4);
    transition: color 0.3s ease, border-color 0.3s ease;
}

.contact-email-link:hover {
    color: var(--accent);
    border-color: var(--accent);
}

/* Single-column mode (no booking.ctaLink): the card itself narrows so
   the content isn't floating in a card sized for two columns, and the
   info column switches to a flex column with one consistent gap instead
   of the mb-3 / mb-4 / my-5 mix, which read as uneven top-to-bottom once
   it had no second column to balance against. */
.contact-card-wrap--narrow {
    max-width: 640px;
}

.contact-info-col--full {
    display: flex;
    flex-direction: column;
    gap: 1.75rem;
    max-width: 480px;
    margin: 0 auto;
    float: none;
    text-align: left;
}

.contact-info-col--full > * {
    margin: 0 !important;
}

.contact-info-col--full .contact-socials-block {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.booking-fallback a {
    color: var(--accent);
    text-decoration: underline;
}





.tech-stack {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 15px 0;
}

.tech-tag {
    background: transparent;
    color: var(--accent);
    border: 1px solid rgba(184,149,86,0.4);
    padding: 3px 12px;
    border-radius: 20px;
    font-size: 0.78rem;
    font-weight: 500;
}

/* Responsive Design */
@media (max-width: 768px) {
    .section-title {
        font-size: 2rem;
    }

    .portfolio-list {
        grid-template-columns: 1fr;
        gap: 1.75rem;
    }

    .portfolio-modal {
        padding: 0;
    }

    .portfolio-modal-dialog {
        max-width: none;
        max-height: 100vh;
        height: 100%;
        border-radius: 0;
    }

    .portfolio-modal-scroll {
        max-height: 100vh;
    }

    .portfolio-modal-body {
        padding: 1.5rem 1.25rem 2rem;
    }

    /* Arrows sit in the bottom corners so they never overlap the player
       (the counter stays centered between them). */
    .portfolio-lightbox-nav {
        width: 38px;
        height: 38px;
        font-size: 0.95rem;
        top: auto;
        bottom: 0.9rem;
        transform: none;
    }

    .portfolio-lightbox-prev {
        left: 0.5rem;
    }

    .portfolio-lightbox-next {
        right: 0.5rem;
    }

    .portfolio-lightbox-close {
        top: 0.75rem;
        right: 0.75rem;
    }

    .quote-mark {
        font-size: 2.5rem;
    }

    .booking-panel {
        margin-top: 2rem;
    }
}

.service-card h4 {
    color: var(--accent);
}

.service-icon {
    font-size: 3rem;
    color: var(--accent);
    margin-bottom: 1rem;
}

.col-md-6.col-lg-4 {
    display: flex;
    margin-bottom: 30px;
}

.btn-primary {
    background-color: var(--accent);
    border: none;
    padding: 12px 30px;
    border-radius: 25px;
    font-weight: 600;
    transition: all 0.3s ease;
    color: var(--primary-dark);
}

.btn-primary:hover {
    background-color: var(--primary-light);
    color: var(--primary-dark);
    transform: translateY(-2px);
    box-shadow: 0 8px 20px color-mix(in srgb, var(--accent) 30%, transparent);
}

.btn-secondary {
    background: none;
    border: 2px solid rgba(184,149,86,0.5);
    padding: 10px 28px;
    border-radius: 25px;
    font-weight: 600;
    color: var(--accent);
    transition: all 0.3s ease;
}

.btn-secondary:hover {
    background-color: var(--accent);
    border-color: var(--accent);
    color: var(--primary-dark);
    transform: translateY(-2px);
}

/* About Page Specific */
.about-photo-section {
  margin-top: 1rem;
  margin-bottom: 3.5rem;
}

.photo-container {
  position: relative;
  max-width: 400px;
  margin: 0 auto;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.photo-container:hover {
  transform: translateY(-5px);
  box-shadow: 0 25px 50px rgba(0, 0, 0, 0.15);
}

.about-photo {
  width: 100%;
  height: 350px;
  object-fit: cover;
  display: block;
  transition: transform 0.3s ease;
}

.photo-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent);
  padding: 2rem 1.5rem 1.5rem;
  transform: translateY(100%);
  transition: transform 0.3s ease;
}

.photo-container:hover .photo-overlay {
  transform: translateY(0);
}

.photo-container:hover .about-photo {
  transform: scale(1.05);
}

.photo-caption h4 {
  color: white;
  font-size: 1.2rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.photo-caption p {
  color: rgba(255, 255, 255, 0.9);
  font-size: 0.9rem;
  margin: 0;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

/* Responsive Design */
@media (max-width: 768px) {
  .about-photo-section {
    margin-top: 2rem;
  }
  
  .photo-container {
    max-width: 300px;
  }
  
  .about-photo {
    height: 300px;
  }
  
  .photo-overlay {
    padding: 1.5rem 1rem 1rem;
  }
  
  .photo-caption h4 {
    font-size: 1.1rem;
  }
  
  .photo-caption p {
    font-size: 0.85rem;
  }
}

@media (max-width: 480px) {
  .photo-container {
    max-width: 250px;
  }
  
  .about-photo {
    height: 250px;
  }
}

.testimonial-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.5rem;
}

.client-details h5 {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--accent);
}

.client-position {
    color: var(--secondary-color);
    font-size: 0.9rem;
    margin: 0;
}

.company-name {
    color: var(--primary-color);
    font-size: 0.85rem;
    font-weight: 500;
}

.star-rating {
    margin: 1rem 0;
    gap: 2px;
}

.star {
    color: var(--accent);
    font-size: 1.1rem;
}

.testimonial-text {
    color: var(--text);
    font-size: 1rem;
    line-height: 1.6;
    font-style: italic;
    position: relative;
    flex-grow: 1;
    margin-bottom: 1.5rem;
    padding-left: 20px;
}

.testimonial-text::before {
    content: '"';
    font-size: 3rem;
    color: var(--border-color);
    position: absolute;
    top: -1.25rem;
    left: -0.75rem;
    font-family: Georgia, serif;
}

@media (max-width: 768px) {
    .testimonial-header {
        flex-direction: column;
        text-align: center;
    }

    .project-details {
        flex-direction: column;
        gap: 0.5rem;
    }

    .testimonial-stats {
        flex-direction: column;
    }
}

/* Contact Form */
.contact-card h4,
.contact-card h5{
    color: var(--accent);
}

.contact-item {
    color: var(--accent);
    margin-right: 10px;
}

.socials-icon {
    text-decoration: none;
    color: var(--primary-light);
}

.form-control {
    background: var(--primary-dark);
    border: 1px solid var(--primary-light);
    color: var(--text);
    border-radius: 10px;
    padding: 12px 15px;
}

.form-control:focus {
    background: var(--primary-dark);
    border-color: var(--accent);
    color: var(--text);
    box-shadow: 0 0 0 0.2rem var(--primary-dark);
}

.form-control::placeholder {
    color: var(--text);
    opacity: 0.5;
}

/* Responsive */
@media (max-width: 768px) {
    .hero-title {
        font-size: 3.5rem;
    }
    
    .bottom-navbar {
        bottom: 10px;
        padding: 8px 15px;
    }
    
    .nav-btn {
        min-width: 60px;
        padding: 10px 12px;
        font-size: 0.8rem;
    }
    
    .nav-item {
        margin: 0 5px;
    }
}


/* ---------------------------------------------- */
/* Mobile: wider side margins + contact spacing    */
/* ---------------------------------------------- */
@media (max-width: 768px) {
    /* Bootstrap's default container gutter (12px) leaves content nearly
       edge-to-edge on phones. 1.5rem matches how the Pricing cards already
       sit (max-width 340px centered), so every section lines up. */
    .container {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }

    /* Breathing room under the scheduling box when the two contact
       columns stack. */

    #contact #booking-col {
        padding-bottom: 1.5rem;
    }
}

/* Mobile: guarantee clear space between the scheduling (booking) box and the
   bottom edge of the outer contact card. Uses the card's own padding plus an
   explicit gap under the panel so it can't collapse or be overridden. */
@media (max-width: 768px) {
    #contact .contact-card {
        padding-bottom: 2.5rem;
    }

    #contact #booking-col .booking-panel {
        margin-bottom: 1.5rem !important;
    }
}


/* ============================================================== */
/* PageMelo adjustments (September 2026)                           */
/* Kept together at the end so the original rules above stay       */
/* untouched; these override them by coming later.                 */
/* ============================================================== */

/* About strengths: text centered vertically in each card (cards in a
   row share the tallest card's height), no extra space under the last
   paragraph, and a row of 1-2 cards sits in the middle. */
#about .service-card {
    justify-content: center;
}

#about .service-card p:last-child {
    margin-bottom: 0;
}

#about-traits {
    justify-content: center;
}

/* Services: rows of 3 with a FIXED item width, each row centered.
   script.js groups the items into .service-row wrappers (4 -> 2+2,
   5 -> 3+2, 7 -> 3+2+2 ... never a lone item on the last row). */
.service-grid {
    display: flex;
    flex-direction: column;
    gap: 3.5rem;
}

.service-row {
    display: flex;
    justify-content: center;
    gap: 2.5rem;
}

.service-row > .service-item {
    flex: 0 0 calc((100% - 2 * 2.5rem) / 3);
    max-width: calc((100% - 2 * 2.5rem) / 3);
}

/* Tablet: 2 per row (as before), a lone last item centered. The row
   wrappers step aside so the items flow two by two. */
@media (max-width: 992px) {
    .service-grid {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        gap: 3.5rem 2.5rem;
    }

    .service-row {
        display: contents;
    }

    .service-row > .service-item {
        flex-basis: calc((100% - 2.5rem) / 2);
        max-width: calc((100% - 2.5rem) / 2);
    }
}

/* Phone: 1 per row (as before) */
@media (max-width: 600px) {
    .service-grid {
        gap: 2.5rem;
    }

    .service-row > .service-item {
        flex-basis: 100%;
        max-width: 100%;
    }
}

/* Active menu item (desktop bottom menu), September 2026: a soft tint of the
   accent with an accent icon + label, and no glow -- so the solid accent
   buttons (e.g. the hero's call-to-action) are the brightest thing on screen.
   Matches how the phone menu already marks the active page. Uses the
   chosen accent, so it works for every color preset. */
.nav-btn.active {
    background: color-mix(in srgb, var(--accent) 16%, transparent);
    color: var(--accent);
    box-shadow: none;
}

/* Bottom menu: label ALWAYS under its icon (September 2026). The original
   only stacked them by accident -- the menu is capped at half the screen's
   width, so with 7 buttons each label wrapped onto a second line. With
   Pricing or Testimonials hidden on a wide screen there was room, and the
   labels jumped beside their icons (a shorter menu). Putting the label on
   its own line on purpose reproduces the wrapped look exactly, however
   many buttons are shown. */
.nav-btn span {
    display: block;
    white-space: nowrap;
}

/* Copy button beside the email address (PageMelo, October 2026): the
   address is always shown, and copying it doesn't depend on an email app.
   Takes the text color around it, so it suits light and dark themes. */
.copy-email {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  margin: 0;
  padding: 0.3em 0.8em;
  min-height: 32px;
  font: inherit;
  font-size: 0.8rem;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: normal;
  text-transform: none;
  color: inherit;
  background: transparent;
  border: 1px solid;
  border-color: color-mix(in srgb, currentColor 35%, transparent);
  border-radius: 999px;
  cursor: pointer;
  white-space: nowrap;
  vertical-align: middle;
  flex-shrink: 0;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}
.copy-email:hover,
.copy-email:focus-visible {
  background: color-mix(in srgb, currentColor 10%, transparent);
  border-color: currentColor;
}
.copy-email.is-copied { border-color: currentColor; }
@media (hover: none) and (pointer: coarse) {
  .copy-email { min-height: 44px; padding: 0.3em 1em; }
}
#contact-email-row { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .75rem; }
#contact-email-row .contact-email-link { overflow-wrap: anywhere; min-width: 0; }

/* ============================================================== */
/* PageMelo adjustments (October 2026, owner's Midnight test)      */
/* ============================================================== */

/* Long text wraps instead of running into the next item or off the screen
   (one long word in a pricing card made a 390px phone scroll sideways by
   368px; a long service description ran under the next service). As in
   Opal, Noir and the Pearls. The hero name is first shrunk to fit by
   script.js (fitHeroName); only a single extremely long word breaks. */
p, li, h1, h2, h3, h4, h5, h6, blockquote,
.btn, button,
.pricing-amount, .pricing-period, .pricing-badge,
.result-stat strong, .result-stat span,
.tool-tag, .tech-tag, .portfolio-meta span, .client-info,
#contact-availability {
    overflow-wrap: anywhere;
}

/* Pricing badge: wraps inside the card instead of sticking out of it
   (it never wrapped). Limited to 20 characters in the Editor, so it's
   normally one line. */
.pricing-badge {
    white-space: normal;
    width: max-content;
    max-width: calc(100% - 2rem);
}

/* About paragraphs: space between them (there was none -- .lead's margin
   is 0). Only between paragraphs, so the column's top and bottom are
   unchanged. */
#about-text .lead + .lead {
    margin-top: 1.25rem;
}

/* Case study results: balanced rows that fill the width (script.js groups
   them: 1-3 in one row, 4 -> 2 + 2, 5 -> 3 + 2, 6 -> 3 + 3). */
.case-study-results {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.result-row {
    display: flex;
    gap: 0.75rem;
}

.result-row > .result-stat {
    flex: 1 1 0;
    min-width: 0;
}

/* Hero name: only the hover effect animates (the original "all" also
   animated the size script.js gives a long name, so the name visibly
   shrank on load and was measured mid-animation). Hover unchanged. */
.hero-title {
    transition: transform 0.3s ease, color 0.3s ease;
}

/* Contact card without a booking link (owner, October 2026): the details
   column takes only the width its content needs (up to its 480px) and sits
   in the middle of the card, text still left-aligned -- short lines (email,
   availability, icons) used to leave the card's right side empty. */
#contact-info-col.contact-info-col--full {
    width: fit-content;
    max-width: min(480px, 100%);
}

/* ============================================================== */
/* Owner's Midnight test, round 3 (October 2026)                   */
/* ============================================================== */

/* Portfolio (2 per row above 768px): a lone card on the last row -- or a
   single project -- sits in the middle, as wide as the cards above it (it
   used to stay at the left). Phones (one per row) unchanged. */
@media (min-width: 768.02px) {
    .portfolio-list > .portfolio-card:last-child:nth-child(odd) {
        grid-column: 1 / -1;
        justify-self: center;
        width: calc((100% - 2.5rem) / 2);
    }
}

/* Testimonials: a lone last testimonial (1, 3, 5...) looks like the others
   -- left-aligned, the line on its left, same width -- placed in the
   middle of the row. It used to be centered text without the line, which
   read like a second featured testimonial. Phones: just like the others. */
.testimonial-grid > .testimonial-block:last-child:nth-child(odd) {
    grid-column: auto;
    max-width: none;
    margin: 0;
    text-align: inherit;
    padding-left: 1.75rem;
    border-left: 1px solid rgba(194,192,182,0.2);
}
.testimonial-grid > .testimonial-block:last-child:nth-child(odd) .quote-footer {
    justify-content: space-between;
    flex-direction: row;
    gap: 0.75rem;
}
@media (min-width: 768.02px) {
    .testimonial-grid > .testimonial-block:last-child:nth-child(odd) {
        grid-column: 1 / -1;
        justify-self: center;
        width: calc((100% - 5rem) / 2);
    }
}

/* Contact with a booking link, side by side (768px and up): the details
   column sits in the middle of the card's height, beside the booking panel,
   instead of at the top. Its last shown line's space below is left out (the
   script marks it), and empty heading / intro lines take no room, so the
   text itself is what's centered. Without a booking link: unchanged. */
@media (min-width: 768px) {
    #contact-info-col.col-md-6 {
        align-self: center;
    }
    #contact-info-col.col-md-6 > .pm-last-shown {
        margin-bottom: 0 !important;
    }
    #contact-info-col.col-md-6 > h4:empty,
    #contact-info-col.col-md-6 > p:empty {
        display: none;
    }
}
/* At exactly 768px (iPad mini-size windows, the Editor's Tablet preview) the
   columns are side by side but the booking panel keeps its phone spacing
   (2rem above it, 1.5rem below its column), which puts its middle 20px
   below the row's. 2.5rem above the details column moves their middle by
   the same 20px, so they're centered on the panel itself. */
@media (min-width: 768px) and (max-width: 768px) {
    #contact-info-col.col-md-6 {
        padding-top: 2.5rem;
    }
}