/* =======================================================
  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.
  ======================================================= */

/* -------------------------------------------------------
   LIGHT MODE (default)
------------------------------------------------------- */
:root {
    /* Colors */
    --navbar-bg: #2c2c2c;
    --navbar-text: #EFEFEF;
    --card-color: #f7f7f7;
    --primary-accent-color: #4aa9a9;
    --secondary-accent-color: #438c8c;
    --icon-wrapper: rgba(44, 44, 44, 0.3);
    --icon-wrapper-text: rgb(44, 44, 44);
    --text: #1A1A1A;
    --primary-background-color: #f5f5f5;
    --secondary-background-color: #e7e7e7;
    --tertiary-background-color: #e0e0e0;
    --footer: #888888;
    --shadow-color: #2c2c2c;
    --back-to-top-shadow: rgba(44, 44, 44, 1);
    --navbar-hover-shadow: var(--primary-background-color);
    --btn-shadow: var(--navbar-bg);
    --socials-icon-color: inherit;
    --back-to-top-text: #1A1A1A;

    /* Particles */
    --particles-color: #999999;
    --particles-line-color: #999999;

    /* Fonts */
    --hero-font: "Montserrat", sans-serif;
    --content-font: "Overpass", sans-serif;
}

/* -------------------------------------------------------
   DARK MODE
------------------------------------------------------- */
[data-theme="dark"] {
    --navbar-bg: #2c2c2c;
    --navbar-text: #EFEFEF;
    --card-color: #2a2a2a;
    --primary-accent-color: #4aa9a9;
    --secondary-accent-color: #438c8c;
    --icon-wrapper: rgba(239, 239, 239, 0.25);
    --icon-wrapper-text: rgb(230, 230, 230);
    --text: #e0e0e0;
    --primary-background-color: #171717;
    --secondary-background-color: #1e1e1e;
    --tertiary-background-color: #333333;
    --footer: #aaaaaa;
    --shadow-color: #aaaaaa;
    --back-to-top-shadow: #EFEFEF;
    --navbar-hover-shadow: var(--primary-background-color);
    --btn-shadow: var(--navbar-bg);
    --socials-icon-color: inherit;
    --back-to-top-text: #EFEFEF;

    /* Particles */
    --particles-color: #707070;
    --particles-line-color: #656565;
}

/* -------------------------------------------------------
   BASE
------------------------------------------------------- */
* {
    box-sizing: border-box;
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

/* Applied via JS during theme toggle — freezes ALL transitions momentarily
   so every element (including dynamically generated text) switches instantly. */
.no-transition,
.no-transition * {
    transition: none !important;
}

body {
    margin: 0;
    padding: 0;
    color: var(--text);
    background-color: var(--primary-background-color);
    overflow-x: hidden;
    font-family: var(--content-font);
    line-height: 1.8;
}

/* -------------------------------------------------------
   HERO
------------------------------------------------------- */
#hero {
    background-color: var(--secondary-background-color);
    padding: 60px 20px;
    font-family: var(--hero-font);
    position: relative;
    height: 42.5vh;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

#particles-js {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 1;
}

#hero h1, #hero h6, #hero p, #hero a {
    position: relative;
    z-index: 2;
}

#hero h1 {
    font-size: 3rem;
    font-weight: bold;
    color: var(--text);
}

#hero h6 {
    font-size: 1.5rem;
}

#hero-description {
    text-align: center;
}

@media (min-width: 769px) and (max-width: 1024px) {
    #hero-description {
        width: 75%;
        margin-top: 1rem;
        margin-left: 1.5rem;
        margin-right: 1.5rem;
    }
}

@media (min-width: 1025px) {
    #hero-description {
        width: 66.67%;
        margin-left: 1rem;
        margin-right: 1rem;
    }
}

@media (max-width: 768px) {
    #hero-description {
        font-size: medium;
        width: 92.5%;
        margin-top: 1rem;
        margin-left: 0.75rem;
        margin-right: 0.75rem;
    }
}

@media (max-width: 375px) {
    #hero-description {
        font-size: 0.9rem;
        line-height: 1.4;
        width: 92.5%;
        margin: 1rem auto 0;
        text-align: center;
    }
}

#hero .btn-primary {
    display: inline-block;
    font-family: var(--hero-font);
    background-color: var(--primary-accent-color);
    border: none;
    padding: 20px 50px;
    border-radius: 12px;
    color: var(--cta-text-color);
    font-size: 17px;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    position: relative;
    z-index: 2;
    text-align: center;
    overflow: hidden;
    text-decoration: none;
    letter-spacing: 0.5px;
    animation: hero-btn-pulse 3s ease-in-out infinite;
}

[data-theme="dark"] #hero .btn-primary {
    box-shadow: 0 4px 15px rgba(236, 236, 236, 0.15);
}

#hero .btn-primary::before {
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.4),
        rgba(255, 255, 255, 0.6),
        rgba(255, 255, 255, 0.4),
        transparent
    );
    transition: left 0.8s ease;
    pointer-events: none;
}

#hero .btn-primary::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 12px;
    background: linear-gradient(
        135deg,
        rgba(255, 255, 255, 0.15) 0%,
        transparent 50%,
        rgba(0, 0, 0, 0.1) 100%
    );
    pointer-events: none;
    opacity: 1;
    transition: opacity 0.15s ease;
}

#hero .btn-primary:hover {
    background-color: var(--secondary-accent-color);
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.25);
    letter-spacing: 0.8px;
    animation: none;
}

[data-theme="dark"] #hero .btn-primary:hover {
    box-shadow: 0 12px 30px rgba(225, 225, 225, 0.25);
}

#hero .btn-primary:hover::before {
    left: 100%;
}

#hero .btn-primary:hover::after {
    opacity: 0.7;
}

#hero .btn-primary:focus {
    outline: 3px solid rgba(255, 255, 255, 0.6);
    outline-offset: 4px;
}

#hero .btn-primary:active {
    transform: translateY(-1px) scale(0.99);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
    transition: all 0.1s ease;
}

[data-theme="dark"] #hero .btn-primary:active {
    box-shadow: 0 6px 20px rgba(210, 210, 210, 0.2);
}

@keyframes hero-btn-pulse {
    0%, 100% { box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15); }
    50%       { box-shadow: 0 6px 25px rgba(0, 0, 0, 0.2); }
}

[data-theme="dark"] #hero .btn-primary {
    animation: hero-btn-pulse-dark 3s ease-in-out infinite;
}

[data-theme="dark"] #hero .btn-primary:hover {
    animation: none;
}

@keyframes hero-btn-pulse-dark {
    0%, 100% { box-shadow: 0 4px 15px rgba(221, 221, 221, 0.15); }
    50%       { box-shadow: 0 6px 25px rgba(221, 221, 221, 0.2); }
}

/* -------------------------------------------------------
   MAIN CONTENT
------------------------------------------------------- */
#mainContent {
    width: 80%;
    margin: 0 auto;
    font-family: var(--content-font);
}

@media (min-width: 769px) and (max-width: 1024px) {
    #mainContent { width: 90%; }
}

@media (max-width: 768px) {
    #mainContent { width: 100%; margin: 0; padding: 0; }
}

/* -------------------------------------------------------
   NAVIGATION BAR
------------------------------------------------------- */
.custom-navbar {
    position: sticky;
    top: 0;
    margin: 0;
    padding: 0;
    z-index: 1020;
    background-color: var(--navbar-bg);
    font-family: var(--hero-font);
    transition: box-shadow 0.15s ease, background-color 0.15s ease;

    /* Light mode default shadow */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.custom-navbar.is-sticky {
    /* Light mode sticky shadow */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

/* Dark mode navbar shadows */
[data-theme="dark"] .custom-navbar {
    box-shadow: 0 2px 5px rgba(97, 97, 97, 0.649);
}

[data-theme="dark"] .custom-navbar.is-sticky {
    box-shadow: 0 4px 12px rgba(92, 92, 92, 0.694);
}

.navbar-collapse {
    justify-content: center;
}

.nav-item {
    margin: 0;
    border-radius: 3px;
}

.nav-link {
    height: 50px;
    padding: 0 50px;
    display: flex;
    align-items: center;
}

.custom-navbar .nav-link {
    color: var(--navbar-text);
}

/* Light mode hover: glow */
.custom-navbar .nav-link:hover {
    color: var(--accessible-accent-nav);
    border-bottom: 3px solid var(--accessible-accent-nav);
}

/* Dark mode hover: underline only */
[data-theme="dark"] .custom-navbar .nav-link:hover {
    color: var(--accessible-accent-nav);
    box-shadow: none;
    border-bottom: 3px solid var(--accessible-accent-nav);
}

.nav-item .nav-link.active {
    color: var(--accessible-accent-nav);
    border-bottom: 3px solid var(--accessible-accent-nav);
    font-weight: 600;
}

/* Toggler */
.navbar-toggler {
    border: none;
    width: 45px;
    height: 35px;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 5px 0;
    cursor: pointer;
}

.navbar-toggler:focus { box-shadow: none; border: none; }
.navbar-toggler:focus-visible { outline: none; }

.navbar-toggler span {
    display: block;
    height: 4px;
    width: 100%;
    background-color: var(--navbar-text);
    border-radius: 2px;
    transition: all 0.15s ease;
}

.center-toggler {
    position: relative;
    left: 50%;
    transform: translateX(-50%);
}

.navbar-toggler[aria-expanded="true"] span:nth-child(1) { transform: translateY(12px) rotate(45deg); }
.navbar-toggler[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.navbar-toggler[aria-expanded="true"] span:nth-child(3) { transform: translateY(-12px) rotate(-45deg); }

@media (max-width: 991px) {
    .custom-navbar { min-height: 50px; }

    .navbar-collapse {
        background-color: var(--navbar-bg);
        border-top: 1px solid rgba(255, 255, 255, 0.1);
        margin-top: 10px;
        padding: 20px 0;
    }

    #navbarTabs {
        flex-direction: column !important;
        align-items: stretch !important;
        width: 100%;
    }

    .nav-item { margin: 5px 0; width: 100%; }

    .nav-link {
        height: auto;
        padding: 15px 20px;
        text-align: center;
        border-radius: 5px;
        transition: all 0.15s ease;
        border-bottom: none !important;
    }

    .nav-link:hover {
        background-color: rgba(255, 255, 255, 0.1);
        box-shadow: none;
        border-bottom: none !important;
    }

    /* Override dark-mode hover underline on mobile (no room for it) */
    [data-theme="dark"] .custom-navbar .nav-link:hover {
        border-bottom: none !important;
    }

    .nav-item .nav-link.active {
        background-color: var(--primary-accent-color);
        color: var(--text);
        border-bottom: none !important;
        font-weight: 600;
    }

    .navbar-collapse.collapsing { transition: height 0.35s ease; }
    .navbar-collapse.show { animation: slideDown 0.3s ease-out; }
}

@keyframes slideDown {
    from { opacity: 0; transform: translateY(-10px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* -------------------------------------------------------
   THEME TOGGLE BUTTON
------------------------------------------------------- */
.theme-toggle {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 1030;
    background: var(--card-color);
    border: 2px solid var(--primary-accent-color);
    border-radius: 50%;
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.15s ease;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    color: var(--text);
}

.theme-toggle:hover {
    transform: scale(1.1);
    box-shadow: 0 6px 20px rgba(0,0,0,0.2);
}

.theme-toggle i {
    font-size: 1.2rem;
    transition: all 0.15s ease;
}

/* -------------------------------------------------------
   CONTENT SECTIONS
------------------------------------------------------- */
.content-section {
    display: none;
    padding: 40px 20px;
}

@media (min-width: 769px) and (max-width: 1024px) {
    .content-section { padding: 40px 15px; }
}

.content-section.active { display: block; }

.section-title {
    font-size: 2rem;
    font-weight: 700;
    text-align: center;
    margin-bottom: 2rem;
    position: relative;
    display: inline-block;
    width: 100%;
    color: var(--text);
}

.section-title::after {
    content: "";
    display: block;
    width: 60px;
    height: 3px;
    background: var(--primary-accent-color);
    margin: 3.5px auto 0;
    border-radius: 3px;
}

/* -------------------------------------------------------
   ABOUT SECTION
------------------------------------------------------- */
.profile p {
    font-size: large;
    padding-top: 1rem;
    color: var(--text);
}

.profile-avatar {
    width: 250px;
    height: 250px;
    margin: 1.5rem auto;
    border-radius: 50%;
    overflow: hidden;
    position: relative;
    animation: animate-shadow 3s ease-in-out infinite;
}

.profile-avatar-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

@keyframes animate-shadow {
    0%   { box-shadow: 0 0 50px var(--secondary-accent-color); }
    50%  { box-shadow: 0 0 50px var(--shadow-color); }
    100% { box-shadow: 0 0 50px var(--secondary-accent-color); }
}

#about-text {
    margin-left: 1rem;
    line-height: 1.7;
    margin: 1rem auto 0;
}

@media (min-width: 769px) and (max-width: 1024px) {
    #about-text {
        width: 100%;
        margin-top: 1rem;
        margin-left: 1rem;
        margin-right: 1rem;
    }
}

@media (min-width: 1025px) {
    #about-text {
        width: 66.67%;
        margin-left: 1rem;
        margin-right: auto;
    }
}

@media (max-width: 768px) {
    #about-text {
        width: 92.5%;
        margin-top: 1rem;
        margin-left: 0.75rem;
        margin-right: 0.75rem;
    }
}

/* -------------------------------------------------------
   SKILLS SECTION
------------------------------------------------------- */
.skills-section,
.tools-section {
    margin-top: 2.5rem;
    padding: 2rem;
    background-color: var(--secondary-background-color);
    border-radius: 20px;
}

@media (max-width: 768px) {
    .skills-section,
    .tools-section {
        padding-left: 0.5rem;
        padding-right: 0.5rem;
        margin-left: 0.75rem;
        margin-right: 0.75rem;
    }
}

@media (min-width: 769px) and (max-width: 1024px) {
    .skills-section,
    .tools-section {
        padding: 2rem 1.5rem;
        margin-left: 1rem;
        margin-right: 1rem;
    }
}

.skills-section h5,
.who-i-help-section h5,
.tools-section h5,
.how-it-works-section h5 {
    font-size: x-large;
    font-weight: 600;
    display: flex;
    flex-direction: row;
    justify-content: center;
    padding-bottom: 1.5rem;
    color: var(--text);
}

.skills-card {
    background-color: var(--card-color);
    color: var(--text);
    border: none;
    border-radius: 12px;
    transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
    text-align: center;
    padding: 20px 10px;
}

@media (min-width: 769px) and (max-width: 1024px) {
    .skills-card,
    .who-i-help-card,
    .how-it-works-card {
        margin-left: 0.5rem;
        margin-right: 0.5rem;
        padding-left: 15px;
        padding-right: 15px;
    }
}

@media (max-width: 768px) {
    .skills-card,
    .who-i-help-card,
    .how-it-works-card {
        margin-left: 0.75rem;
        margin-right: 0.75rem;
        padding-left: 0.5rem;
        padding-right: 0.5rem;
    }
}

.skills-card i,
.who-i-help-card i,
.how-it-works-card i {
    color: var(--secondary-accent-color);
    font-size: 2rem;
    margin-bottom: 12px;
    display: block;
    width: 100%;
    text-align: center;
}

.skills-card p,
.who-i-help-card p,
.how-it-works-card p {
    min-height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
}

/* Light mode: subtle shadow lift */
.skills-card:hover,
.who-i-help-card:hover,
.how-it-works-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 5px 12px rgba(0,0,0,0.1) !important;
}

/* Dark mode: background shift instead of shadow */
[data-theme="dark"] .skills-card:hover,
[data-theme="dark"] .who-i-help-card:hover,
[data-theme="dark"] .how-it-works-card:hover {
    box-shadow: none !important;
    background-color: var(--tertiary-background-color);
}

/* -------------------------------------------------------
   WHO I HELP / HOW IT WORKS
------------------------------------------------------- */
.who-i-help-section,
.how-it-works-section {
    text-align: center;
    padding: 3.5rem 1rem 1rem;
}

.who-i-help-card,
.how-it-works-card {
    background-color: var(--card-color);
    color: var(--text);
    border: 0.1px solid var(--tertiary-background-color);
    border-radius: 12px;
    transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
    text-align: center;
    padding: 20px 10px;
}

.who-i-help-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    justify-content: center;
    padding: 0;
    list-style: none;
}

.who-i-help-list li {
    color: var(--text);
    border-radius: 0.375rem;
    padding: 0.75rem 1rem;
    font-size: 0.95rem;
    box-shadow: 0 2px 6px rgba(0,0,0,0.08);
    min-width: 120px;
    text-align: center;
}

[data-theme="dark"] .who-i-help-list li {
    box-shadow: 0 2px 6px rgba(220, 220, 220, 0.08);
}

/* -------------------------------------------------------
   SERVICES & PORTFOLIO CARDS
------------------------------------------------------- */
.service-icon,
.portfolio-icon {
    width: 250px;
    height: auto;
    display: block;
    margin: 25px auto 10px auto;
    text-align: center;
}

.services-card,
.portfolio-card,
.testimonial-card,
.pricing-card {
    background-color: var(--card-color);
    color: var(--text);
    height: 100%;
    padding: 1.5rem;
    border-radius: 15px;
    border: 1px solid var(--tertiary-background-color);
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    transition: transform 0.3s ease, box-shadow 0.3s ease, background-color 0.15s ease, filter 0.15s ease;
}

[data-theme="dark"] .services-card,
[data-theme="dark"] .portfolio-card,
[data-theme="dark"] .testimonial-card,
[data-theme="dark"] .pricing-card {
    box-shadow: 0 4px 12px rgba(221, 221, 221, 0.08);
}

@media (min-width: 769px) and (max-width: 1024px) {
    .services-card,
    .portfolio-card,
    .testimonial-card,
    .pricing-card {
        margin-left: 0.5rem;
        margin-right: 0.5rem;
        padding: 1.25rem;
    }
}

@media (max-width: 768px) {
    .services-card,
    .portfolio-card,
    .testimonial-card,
    .pricing-card {
        margin-left: 0.75rem;
        margin-right: 0.75rem;
        padding-left: 0.5rem;
        padding-right: 0.5rem;
    }
}

/* Light mode: shadow lift */
.services-card:hover,
.portfolio-card:hover,
.testimonial-card:hover,
.pricing-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 8px 16px rgba(0,0,0,0.12);
}

/* Dark mode: background shift instead of shadow */
[data-theme="dark"] .services-card:hover,
[data-theme="dark"] .portfolio-card:hover,
[data-theme="dark"] .testimonial-card:hover,
[data-theme="dark"] .pricing-card:hover {
    box-shadow: none;
    background-color: var(--tertiary-background-color);
}

/* -------------------------------------------------------
   ICON WRAPPER
------------------------------------------------------- */
.icon-wrapper {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    margin: 1rem auto;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--icon-wrapper);
    color: var(--icon-wrapper-text);
    font-size: 2rem;
    transition: transform 0.15s ease, background 0.15s ease, color 0.15s ease;
}

.services-card:hover .icon-wrapper,
.portfolio-card:hover .icon-wrapper {
    transform: scale(1.1);
    background: var(--primary-accent-color);
    color: var(--card-color);
}

.card-title {
    font-weight: bold;
    text-align: center;
    padding-top: 10px;
    color: var(--text);
}

.card-text {
    padding-top: 10px;
    padding-bottom: 10px;
    color: var(--text);
}

/* -------------------------------------------------------
   CTA BUTTONS
------------------------------------------------------- */
#services .btn-primary,
#portfolio .btn-primary {
    display: inline-block;
    font-family: var(--hero-font);
    font-size: 1.15rem;
    letter-spacing: 0.05em;
    background-color: var(--primary-accent-color);
    border: none;
    padding: 20px 50px;
    border-radius: 10px;
    color: var(--cta-text-color);
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 1px 4px var(--btn-shadow);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    z-index: 2;
    text-align: center;
    margin-top: 1.5rem;
    overflow: hidden;
    text-decoration: none;
}

#services .btn-primary::before,
#portfolio .btn-primary::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: left 0.6s ease;
}

#services .btn-primary:hover,
#portfolio .btn-primary:hover {
    background-color: var(--secondary-accent-color);
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
    font-weight: 600;
}

[data-theme="dark"] #services .btn-primary:hover,
[data-theme="dark"] #portfolio .btn-primary:hover {
    box-shadow: 0 8px 25px rgba(221, 221, 221, 0.15);
}

#services .btn-primary:hover::before,
#portfolio .btn-primary:hover::before {
    left: 100%;
}

#services .btn-primary:active,
#portfolio .btn-primary:active {
    transform: translateY(0);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

[data-theme="dark"] #services .btn-primary:active,
[data-theme="dark"] #portfolio .btn-primary:active {
    box-shadow: 0 4px 15px rgba(220, 220, 220, 0.1);
}

/* -------------------------------------------------------
   TOOLS SECTION
------------------------------------------------------- */
.tools-card.invisible-card {
    background: none;
    border: none;
    padding: 10px 5px;
    text-align: center;
    transition: transform 0.2s ease, color 0.2s ease;
}

.tools-card.invisible-card i {
    color: var(--secondary-accent-color);
    font-size: 2rem;
    margin-bottom: 8px;
    display: block;
    width: 100%;
    text-align: center;
}

.tools-card.invisible-card p {
    font-size: 0.9rem;
    margin: 0;
    color: var(--text);
}

.tools-card.invisible-card:hover {
    transform: translateY(-5px) scale(1.05);
}

/* -------------------------------------------------------
   HOW IT WORKS EMOJI
------------------------------------------------------- */
.how-it-works-emoji {
    font-size: 1.5rem;
    margin-bottom: 0.5rem;
}

/* -------------------------------------------------------
   PORTFOLIO SECTION
------------------------------------------------------- */
.card-body {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    flex-grow: 1;
}

.portfolio-img {
    max-height: 200px;
    border-radius: 10px;
    object-fit: contain;
    transition: filter 0.3s ease;
    transform: translateZ(0);
}

@media (min-width: 769px) and (max-width: 1024px) {
    .portfolio-img { width: 100%; max-height: 180px; }
}

@media (max-width: 768px) {
    .portfolio-img {
        display: block;
        margin: 0 auto;
        width: 90%;
        border-radius: 7px;
    }
}

.portfolio-card:hover .portfolio-img {
    filter: brightness(1.15) contrast(1.05);
}

.portfolio-btn {
    background-color: transparent;
    /* border: 2px solid var(--primary-accent-color);
    color: var(--primary-accent-color); */
    border: 2px solid var(--accessible-accent);
    color: var(--accessible-accent);
    border-radius: 10px;
    font-weight: 500;
    padding: 10px 20px;
    transition: all 0.15s ease;
}

[data-theme="dark"] .portfolio-btn {
    /* border: 2px solid var(--primary-accent-color);
    color: var(--primary-accent-color); */
    border: 2px solid var(--accessible-accent);
    color: var(--accessible-accent);
}

.portfolio-btn:hover {
    background-color: var(--primary-accent-color);
    /* background-color: var(--accessible-accent-hover); */
    /* color: var(--text); */
    /* color: var(--accessible-accent); */
    color: var(--accessible-accent-hover-text);
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(0,0,0,0.15);
}

[data-theme="dark"] .portfolio-btn:hover {
    border: 2px solid var(--primary-accent-color);
    /* border: 2px solid var(--accessible-accent); */
    color: var(--accessible-accent-hover-text);
    box-shadow: 0 4px 10px rgba(220, 220, 220, 0.15);
}

/* -------------------------------------------------------
   MODAL
------------------------------------------------------- */
.modal-dialog-centered {
    display: flex;
    align-items: center;
    min-height: calc(100vh - 3.5rem);
}

.modal-dialog-centered::before {
    height: calc(100vh - 3.5rem);
    content: "";
    display: inline-block;
    vertical-align: middle;
}

.modal-content {
    background-color: var(--card-color);
    font-family: var(--content-font);
    border-radius: 12px;
    overflow: hidden;
    max-height: 90vh;
    overflow-y: auto;
    color: var(--text);
}

.modal-header { margin: 1.5rem; }

.modal-title {
    font-size: x-large;
    color: var(--text);
}

.modal-section { padding: 0.5rem 3rem; }

.modal-section h5 {
    font-weight: 600;
    margin-bottom: 1rem;
    /* color: var(--primary-accent-color); */
    color: var(--accessible-accent);
}

.modal-section p {
    line-height: 1.6;
    margin-bottom: 1rem;
}

@media (max-width: 768px) {
    .modal-dialog-centered { min-height: calc(100vh - 1rem); }
    .modal-dialog-centered::before { height: calc(100vh - 1rem); }
    .modal-content { max-height: 95vh; margin: 0.5rem; overflow-y: auto; }
    .modal-section { padding: 0.5rem 1.5rem; }
}

@media (max-width: 576px) {
    .modal-dialog { margin: 0.25rem; }
    .modal-content { max-height: 98vh; overflow-y: auto; }
    .modal-section { padding: 0.5rem 1rem; }
}

.solution-emoji-bullets,
.outcome-emoji-bullets {
    list-style-type: none;
    padding-left: 20px;
}

.solution-emoji-bullets li,
.outcome-emoji-bullets li {
    display: flex;
    align-items: center;
    padding-left: 0;
    vertical-align: middle;
    position: relative;
}

.solution-emoji-bullets li::before {
    content: "•";
    position: absolute;
    left: -20px;
    top: -5px;
    font-size: 35px;
    line-height: 1;
    margin-bottom: 10px;
}

.outcome-emoji-bullets li::before {
    content: "✓";
    position: absolute;
    left: -20px;
    top: -2.5px;
    font-size: 25px;
    line-height: 1;
    margin-bottom: 10px;
}

.solution-text,
.outcome-text { margin-left: 25px; }

.modal-footer {
    border-top: 1px solid rgba(0, 0, 0, 0.1);
    justify-content: center;
    padding: 1rem 2rem;
}

.modal-body--split {
    display: flex;
    gap: 1.5rem;
    padding: 1.5rem;
    overflow: hidden;
    max-height: 70vh;
}

.modal-body__text {
    flex: 1 1 0;
    overflow-y: auto;
    min-width: 0;
}

.modal-body__images {
    flex: 0 0 340px;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    overflow-y: auto;
    max-height: 100%;
}

.case-img-wrapper {
    width: 100%;
    border-radius: 8px;
    overflow: hidden;
    flex-shrink: 0;
}

.case-img {
    width: 100%;
    height: auto;
    display: block;
    cursor: zoom-in;
    transition: opacity 0.2s ease, transform 0.2s ease;
    border-radius: 8px;
}

.case-img:hover { opacity: 0.88; transform: scale(1.01); }

@media (max-width: 767px) {
    .modal-body--split { flex-direction: column; max-height: none; overflow: visible; }
    .modal-body { overflow-y: auto; max-height: none; }
    .modal-body__text { overflow: visible; max-height: none; }
    .modal-body__images { flex: none; width: 100%; max-height: none; overflow: visible; }
    .modal-dialog { margin: 0.5rem; }
}

/* -------------------------------------------------------
   LIGHTBOX
------------------------------------------------------- */
#portfolio-lightbox {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 1090;
    align-items: center;
    justify-content: center;
}

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

.lb-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.88);
}

.lb-img-wrap {
    position: relative;
    z-index: 1;
    max-width: 90vw;
    max-height: 88vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.lb-img {
    max-width: 100%;
    max-height: 88vh;
    object-fit: contain;
    border-radius: 6px;
    box-shadow: 0 8px 40px rgba(0,0,0,0.6);
}

[data-theme="dark"] .lb-img {
    box-shadow: 0 8px 40px rgba(222, 222, 222, 0.6);
}

.lb-close,
.lb-prev,
.lb-next {
    position: absolute;
    z-index: 2;
    background: rgba(255,255,255,0.12);
    border: none;
    color: #fff;
    cursor: pointer;
    border-radius: 50%;
    line-height: 1;
    transition: background 0.2s;
}

.lb-close:hover,
.lb-prev:hover,
.lb-next:hover { background: rgba(255,255,255,0.28); }

.lb-close { top: 1rem; right: 1rem; font-size: 1.8rem; width: 2.4rem; height: 2.4rem; }
.lb-prev  { left: 1rem; top: 50%; transform: translateY(-50%); font-size: 2.4rem; width: 3rem; height: 3rem; }
.lb-next  { right: 1rem; top: 50%; transform: translateY(-50%); font-size: 2.4rem; width: 3rem; height: 3rem; }

.lb-counter {
    position: absolute;
    bottom: 1rem;
    left: 50%;
    transform: translateX(-50%);
    color: rgba(255,255,255,0.7);
    font-size: 0.85rem;
    z-index: 2;
}

.modal-body:not(.modal-body--split) .modal-body__text { width: 100%; max-height: none; overflow: visible; }
.modal-body:not(.modal-body--split) { max-height: none; overflow: auto; }

/* -------------------------------------------------------
   TESTIMONIALS
------------------------------------------------------- */
.testimonial-text { font-style: italic; }

.testimonial-avatar {
    width: 50px;
    height: 50px;
    object-fit: cover;
}

.featured-testimonial {
    background-color: var(--secondary-background-color);
    border-radius: 15px;
    position: relative;
}

.featured-avatar {
    width: 70px;
    height: 70px;
    object-fit: cover;
}

.custom-muted { color: var(--text); opacity: 75%; }
.featured-custom-muted { color: var(--text); opacity: 50%; }

/* -------------------------------------------------------
   PRICING
------------------------------------------------------- */
.pricing-card {
    display: flex;
    flex-direction: column;
    text-align: center;
    position: relative;
    overflow: visible;
}

/* NOTE: card-body deliberately keeps Bootstrap's default 1rem padding
   (see the generic .card-body rule under PORTFOLIO SECTION above) —
   stacked on top of .pricing-card's own 1.5rem padding. Zeroing it out
   here was what made this card sit tighter than Services/Portfolio. */

.pricing-card-highlighted {
    border: 1px solid var(--primary-accent-color);
    box-shadow: 0 8px 20px rgba(74, 169, 169, 0.18);
}

.pricing-card-highlighted:hover {
    transform: translateY(-8px);
}

.pricing-badge {
    position: absolute;
    top: -14px;
    left: 50%;
    transform: translateX(-50%);
    background-color: var(--primary-accent-color);
    color: var(--cta-text-color, #1a1a1a);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    padding: 0.35rem 0.9rem;
    border-radius: 999px;
    white-space: nowrap;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}

.pricing-name {
    font-weight: bold;
    color: var(--text);
    margin-top: 0.5rem;
    margin-bottom: 0.25rem;
}

.pricing-description {
    color: var(--text);
    opacity: 75%;
    font-size: 0.9rem;
    min-height: 40px;
}

.pricing-price {
    margin: 0.75rem 0 1.25rem;
}

.pricing-amount {
    font-family: var(--hero-font);
    font-size: 2.25rem;
    font-weight: 700;
    color: var(--primary-accent-color);
}

.pricing-features {
    list-style: none;
    padding: 0;
    margin: 0 0 1.5rem;
    text-align: left;
    flex-grow: 1;
}

.pricing-features li {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    padding: 0.4rem 0;
    font-size: 0.95rem;
}

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

/* Pricing CTA button — same color/animation treatment as the
   Services & Portfolio CTAs, sized (padding, font-size,
   letter-spacing) to match the compact .pricing-btn used
   across the reference implementation. */
.pricing-btn {
    display: inline-block;
    align-self: center;
    margin-top: auto;
    font-family: var(--hero-font);
    font-size: 1rem;
    letter-spacing: 0.03em;
    background-color: var(--primary-accent-color);
    border: none;
    padding: 12px 30px;
    border-radius: 10px;
    color: var(--cta-text-color);
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 1px 4px var(--btn-shadow);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    z-index: 2;
    text-align: center;
    overflow: hidden;
    text-decoration: none;
}

.pricing-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: left 0.6s ease;
}

.pricing-btn:hover {
    background-color: var(--secondary-accent-color);
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
    font-weight: 600;
}

[data-theme="dark"] .pricing-btn:hover {
    box-shadow: 0 8px 25px rgba(221, 221, 221, 0.15);
}

.pricing-btn:hover::before {
    left: 100%;
}

.pricing-btn:active {
    transform: translateY(0);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

[data-theme="dark"] .pricing-btn:active {
    box-shadow: 0 4px 15px rgba(220, 220, 220, 0.1);
}

.pricing-note-wrapper {
    margin-top: 2.5rem;
}

.pricing-note {
    color: var(--text);
    opacity: 0.85;
    font-size: 1.05rem;
    max-width: 600px;
    margin: 0 auto 1.25rem;
}

.pricing-note-wrapper .pricing-btn {
    margin-top: 0;
}

@media (max-width: 768px) {
    .pricing-badge { font-size: 0.7rem; padding: 0.3rem 0.85rem; }
    .pricing-amount { font-size: 1.85rem; }
}

/* -------------------------------------------------------
   CONTACT
------------------------------------------------------- */
.contact-mail,
.contact-calendly {
    font-size: 20px;
    color: var(--text);
}

#contactEmail,
#contactCalendly { color: var(--primary-accent-color); }

.socials-icon {
    color: var(--socials-icon-color) !important;
    transition: transform 0.15s ease;
    padding: 1.75rem;
}

.socials-icon:hover { transform: translateY(-5px); }

/* -------------------------------------------------------
   FOOTER
------------------------------------------------------- */
footer {
    text-align: center;
    padding: 2rem;
    font-size: 0.85rem;
    color: var(--footer);
}

.footer-credit {
    font-size: 0.8rem;
    color: var(--footer);
}

/* -------------------------------------------------------
   TABLET / LANDSCAPE OVERRIDES
------------------------------------------------------- */
@media (min-width: 744px) and (max-width: 1024px) {
    #servicesCards > div,
    #portfolio .row > div,
    #testimonialCards > div,
    #pricingCards > div {
        flex: 0 0 50%;
        max-width: 50%;
    }

    .skills-card,
    .who-i-help-card,
    .services-card,
    .portfolio-card,
    .testimonial-card,
    .pricing-card {
        margin-left: 0.5rem;
        margin-right: 0.5rem;
    }

    #about-text { margin-left: 0.75rem; margin-right: 0.75rem; }

    .skills-section,
    .tools-section {
        padding: 2rem 2rem;
        margin-left: 0.5rem;
        margin-right: 0.5rem;
    }

    .services-card,
    .portfolio-card,
    .testimonial-card,
    .pricing-card { padding: 1.5rem 1rem; }
}

@media (min-width: 1024px) and (max-width: 1200px) {
    #mainContent { width: 85%; }

    .skills-card,
    .who-i-help-card,
    .services-card,
    .portfolio-card,
    .testimonial-card,
    .pricing-card {
        margin-left: 0.25rem;
        margin-right: 0.25rem;
    }
}

/* -------------------------------------------------------
   BACK TO TOP BUTTON
------------------------------------------------------- */
#backToTop {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    width: 50px;
    height: 50px;
    border: none;
    border-radius: 50%;
    background: var(--card-color);
    color: var(--back-to-top-text);
    cursor: pointer;
    box-shadow: 0 0 15px var(--back-to-top-shadow);
    backdrop-filter: blur(6px);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.15s ease, transform 0.15s ease;
    opacity: 0;
    pointer-events: none;
    z-index: 999;
}

#backToTop svg { width: 24px; height: 24px; }

#backToTop:hover {
    transform: translateY(-4px) scale(1.1);
    box-shadow: 0 0 20px var(--back-to-top-shadow);
}

#backToTop.show { opacity: 1; pointer-events: auto; }

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

/* Social icons wrap onto a second line instead of running off the
   side of a phone screen (4 icons were ~100px wider than a 320px
   phone), with a little less space around each on phones. */
#socialsContainer {
    flex-wrap: wrap;
}

@media (max-width: 576px) {
    .socials-icon {
        padding: 0.75rem 1rem;
    }
}

/* The highlighted pricing plan's glow follows the chosen accent color
   (it was always teal, whatever the preset). */
.pricing-card-highlighted {
    box-shadow: 0 8px 20px color-mix(in srgb, var(--primary-accent-color) 22%, transparent);
}

/* Long unbroken text (a pasted link, a very long word) wraps inside its
   card instead of widening the page on phones. */
.card,
.modal-content,
#about-text,
#hero h1,
#hero h6,
#hero-description {
    overflow-wrap: anywhere;
}

/* A long email address (shown when "Email link text" is blank) or booking
   link text wraps instead of running off a phone screen: a 38-character
   address ran 20px past a 360px phone and 60px past a 320px one (the
   end was cut off). Same rule as White and Black Pearl's. */
#contactEmail,
#contactCalendly {
    overflow-wrap: anywhere;
}

/* Dark mode: the highlighted plan keeps its accent-colored glow, as in
   Black Pearl. (Pearl Switch's dark card rule, [data-theme="dark"]
   .pricing-card, is more specific than the rule above and would replace
   the glow with the plain card glow; its dark hover rule would remove it.) */
[data-theme="dark"] .pricing-card-highlighted,
[data-theme="dark"] .pricing-card-highlighted:hover {
    box-shadow: 0 8px 20px color-mix(in srgb, var(--primary-accent-color) 22%, transparent);
}

/* Light/dark button on phones: bottom-left, mirroring the back-to-top
   button at bottom-right. At the top-right corner it covered the end of
   the hero name on phones (320-390px wide). */
@media (max-width: 576px) {
    .theme-toggle {
        top: auto;
        right: auto;
        bottom: 2rem;
        left: 2rem;
    }
}


/* Phone menu (October 2026): the highlighted tab is a filled accent block;
   its label uses the preset's "text on accent" color (the button label
   color, 5.1:1 or more for every preset) instead of the page's text color,
   which was unreadable on many presets (e.g. black on black for Pure
   Monochrome). Same rule in all three Pearls. */
@media (max-width: 991px) {
    .nav-item .nav-link.active,
    [data-theme="dark"] .nav-item .nav-link.active {
        color: var(--cta-text-color);
    }
}

/* ===== Owner feedback (October 2026), the same in all three Pearls ===== */

/* Hero on phones: the hero had a FIXED height (42.5% of the screen) and cut
   off whatever didn't fit -- a long name + role + intro + button on a
   phone. It now grows to fit (never shorter than before). The name and role
   stay centered when they wrap onto two lines (wrapped lines used to
   start at the left), and shrink on small screens (48px name on tablets
   and computers as before, down to 28px on the smallest phones). */
#hero {
    height: auto;
    min-height: 42.5vh;
}
#hero h1,
#hero h6 {
    text-align: center;
    max-width: 100%;
}
#hero h1 {
    font-size: clamp(1.75rem, 0.75rem + 5vw, 3rem);
    line-height: 1.15;
}
#hero h6 {
    font-size: clamp(1.15rem, 0.5rem + 2.6vw, 1.5rem);
}

/* Who I Help cards: the text sits centered vertically (cards in a row share
   the tallest one's height, so shorter text used to sit at the top). */
.who-i-help-card {
    justify-content: center;
}

/* Services cards: the space under the last line matches the space above
   the icon (~40px; the list's own bottom margin made it ~56px). */
.services-card .card-body > :last-child {
    margin-bottom: 0;
}

/* Navbar tabs between 992 and ~1065px wide (older iPads in landscape, small
   laptops): six tabs with 50px on each side were up to 40px wider than the
   screen, so the page scrolled sideways. The side space now shrinks just
   enough there; from ~1065px up it's 50px as before. */
@media (min-width: 992px) and (max-width: 1199.98px) {
    .nav-link {
        padding-left: clamp(20px, calc((100vw - 1000px) * 0.4 + 24px), 50px);
        padding-right: clamp(20px, calc((100vw - 1000px) * 0.4 + 24px), 50px);
    }
}

/* 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-mail-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .4rem .75rem; }
#contact-mail-row > i { margin-right: 0 !important; }
#contact-mail-row #contactEmail { min-width: 0; overflow-wrap: anywhere; }
#contact-mail-row .copy-email { color: var(--text); }

/* ===== Owner's Editor test, Pearl round 1 (October 2026) -- the same in
   all three Pearls. "Tablets" = 744-1024px wide (every iPad held upright,
   incl. the mini, and the editor's Tablet preview). ===== */

/* Skills / Who I Help: the line break between two rows (script.js) adds no
   extra space -- the rows sit as far apart as cards wrapping naturally. */
.pm-row-break {
    margin-top: 0 !important;
    padding: 0 !important;
}

/* Services: each card's width comes from script.js (rows fill the width,
   at most 3 per row on computers, 2 on tablets -- 4 = 2 + 2, 5 = 3 + 2).
   Computers start above 1100px since Pearl round 4 (was 1025px). */
@media (min-width: 1100.02px) {
    #servicesCards > .col {
        flex: 0 0 var(--w-lg, 33.3333%);
        width: var(--w-lg, 33.3333%);
        max-width: var(--w-lg, 33.3333%);
    }
}

@media (min-width: 744px) and (max-width: 1100px) {   /* to 1100px since Pearl round 4 (was 1024) */
    /* Hero name: more space at the sides (a long name wraps sooner). */
    #hero h1 {
        max-width: 75%;
    }

    /* Services, Pricing, Portfolio and Testimonials: the cards line up with
       the grey Tools box (the box sits 0.5rem in from the section's sides;
       the cards' own side margins are dropped, so the space between two
       cards is the grid's gap). */
    .tools-section {
        margin-left: 0.5rem;
        margin-right: 0.5rem;
    }
    #services > .container,
    #pricing > .container,
    #portfolio > .container,
    #testimonials > .container {
        max-width: none;
        padding-left: 0.5rem;
        padding-right: 0.5rem;
    }
    .services-card,
    .pricing-card,
    .portfolio-card,
    .testimonial-card {
        margin-left: 0;
        margin-right: 0;
    }

    /* Services: up to 2 per row, each row the full width (a lone last card
       fills its row). */
    #servicesCards > .col {
        flex: 0 0 var(--w-md, 50%);
        width: var(--w-md, 50%);
        max-width: var(--w-md, 50%);
    }

    /* Pricing, Portfolio, Testimonials: 2 per row (a lone last card stays
       the same width, centered, so plans are easy to compare). */
    #pricingCards > .col,
    #portfolioCards > .col,
    #testimonialCards > .col {
        flex: 0 0 50%;
        width: 50%;
        max-width: 50%;
    }

    /* Featured testimonial: as wide as the cards above it. */
    #featuredTestimonial > [class*="col-"] {
        flex: 0 0 100%;
        width: 100%;
        max-width: 100%;
    }

    /* Tools: 3 per row (the computer layout's row breaks are ignored). */
    #toolsCards > .col {
        flex: 0 0 33.3333%;
        width: 33.3333%;
        max-width: 33.3333%;
    }
    #toolsCards > .tools-row-break {
        display: none !important;
    }
}

/* Case-study window on tablets (and phones held sideways): stacked like on
   phones -- the text first, the photos below -- centered, up to 720px wide.
   Between 768 and 991px the text used to be squeezed into a 70-86px column
   beside the photos. */
@media (min-width: 576px) and (max-width: 1100px) {   /* to 1100px since Pearl round 4 (was 1024) */
    .portfolio-modal .modal-dialog {
        max-width: min(720px, calc(100% - 2rem));
        margin-left: auto;
        margin-right: auto;
    }
    .portfolio-modal .modal-body--split {
        flex-direction: column;
        max-height: none;
        overflow: visible;
    }
    .portfolio-modal .modal-body {
        overflow-y: auto;
        max-height: none;
    }
    .portfolio-modal .modal-body__text {
        overflow: visible;
        max-height: none;
    }
    .portfolio-modal .modal-body__images {
        flex: none;
        width: 100%;
        max-height: none;
        overflow: visible;
    }
}

/* ===== Pearl round 2 (October 2026, owner): Who I Help on phones (under
   744px) shows one card per row (it was 2). Tablets and computers keep
   theirs (the 744px iPad mini: 2 per row). ===== */
@media (max-width: 743.98px) {
    #who-i-help-list > .col {
        flex: 0 0 100%;
        width: 100%;
        max-width: 100%;
    }
}

/* ===== Pearl round 3 (October 2026, owner): Skills on phones (under 744px)
   show one card per row too (it was 2): a word like "Management" didn't fit
   on one line in a half-width card. Tablets and computers keep theirs (the
   744px iPad mini: 2 per row), as Who I Help above. ===== */
@media (max-width: 743.98px) {
    #about-skills > .col {
        flex: 0 0 100%;
        width: 100%;
        max-width: 100%;
    }
}

/* ===== Pearl round 4 (October 2026, owner) -- the same in all three Pearls.
   "Tablets" now run to 1100px (was 1024): the 13" iPad Pro held upright is
   1032px wide and got the computer layout (3 per row). The round-1 tablet
   rules above were widened to match; every iPad held sideways (1133px and
   up) keeps the computer layout. ===== */

/* Row breaks (script.js joinRows): computers' and tablets' own. */
.pm-row-break {
    display: none !important;
}
@media (min-width: 1100.02px) {
    .pm-row-break.pm-break-lg {
        display: block !important;
    }
}
@media (min-width: 744.02px) and (max-width: 1100px) {
    .pm-row-break.pm-break-md {
        display: block !important;
    }
}

/* Skills / Who I Help on tablets (not the 744px iPad mini, which keeps 2 per
   row): at most 3 per row, every card a third of the list's width, shorter
   rows centered -- 4 = 2 + 2, 5 = 3 + 2, 7 = 3 + 2 + 2, 8 = 3 + 3 + 2. A
   quarter-width card was too narrow for "Management" on 10th-gen iPads. */
@media (min-width: 744.02px) and (max-width: 1100px) {
    #about-skills > .col,
    #who-i-help-list > .col {
        flex: 0 0 33.3333%;
        width: 33.3333%;
        max-width: 33.3333%;
    }
}

/* The card pages on tablets bigger than the iPad mini get the mini's side
   space: Services (with Tools and How It Works), Pricing, Portfolio and
   Testimonials reach 20px from the screen's edges (the cards and the grey
   Tools box 28px), so the cards get wider. The page's body is 90% wide at
   769-1023px and 85% at 1024-1100px (the designer's rules), so these pages
   step out of it by exactly the missing part on each side; About, Contact
   and the rest stay as they were. */
@media (min-width: 769px) and (max-width: 1023.98px) {
    #services.content-section,
    #pricing.content-section,
    #portfolio.content-section,
    #testimonials.content-section {
        margin-left: -5.5556%;
        margin-right: -5.5556%;
        padding-left: 20px;
        padding-right: 20px;
    }
}
@media (min-width: 1024px) and (max-width: 1100px) {
    #services.content-section,
    #pricing.content-section,
    #portfolio.content-section,
    #testimonials.content-section {
        margin-left: -8.8235%;
        margin-right: -8.8235%;
        padding-left: 20px;
        padding-right: 20px;
    }
}

/* ===== Pearl round 5 (October 2026, owner) ===== */
/* Portfolio on computers: each card's width comes from script.js -- 2 or 4
   case studies fill the width (2 per row), otherwise a third each. */
@media (min-width: 1100.02px) {
    #portfolioCards > .col {
        flex: 0 0 var(--w-lg, 33.3333%);
        width: var(--w-lg, 33.3333%);
        max-width: var(--w-lg, 33.3333%);
    }
}