/* =======================================================
  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 {
    --bg-dark: #141414;
    --bg-secondary: #1E1E1E;
    --text-primary: #cfcfcf;
    --text-secondary: #d0d0d0;
    --accent: #8C8C8C;
    --accent-hover: #D1D1D1;
    --border: #2A2A2A;
    --button-bg: #292929;
    --button-hover: #3A3A3A;

    /* Fixed neutrals — NOT wired to config.js theme colors on purpose. */
    --neutral-mid: #8C8C8C;
    --neutral-bright: #D1D1D1;

    --sidebar-width: 175px;

    --font-heading: 'Montserrat';
    --font-body: 'Open Sans';
}

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

body {
    background: var(--bg-dark);
    color: var(--text-primary);
    font-family: var(--font-heading, 'Montserrat'), sans-serif;
    font-weight: 700;
    overflow-x: hidden;
}

/* Sidebar Navigation */
.sidebar {
    position: fixed;
    top: 0;
    left: 0;
    width: var(--sidebar-width);
    height: 100vh;
    background: var(--bg-dark);
    z-index: 1000;
    padding: 7rem 0;
    transition: transform 0.3s ease;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.nav-links {
    list-style: none;
    width: 100%;
    font-family: var(--font-body, 'Open Sans'), sans-serif;
}

.nav-links a {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 0.5rem 1rem;
    color: var(--text-secondary);
    text-decoration: none;
    transition: all 0.3s ease;
    font-weight: 500;
    text-align: right;
}

.nav-links a:hover,
.nav-links a.active {
    font-weight: 600;
    color: var(--text-primary);
}

@media (min-width: 1025px) {
    .nav-links a:hover,
    .nav-links a.active {
        transform: translateX(5px);
        border-right: 1px solid var(--accent);
    }
}

@media (max-width: 1024px) {
    .sidebar.active .nav-links a:hover,
    .sidebar.active .nav-links a.active {
        transform: translateX(5px);
        border-right: 1px solid var(--accent);
    }
}

.nav-links i {
    margin-left: 1rem;
    order: 2;
}

.nav-links span {
    order: 1;
}

/* Main Content */
.main-content {
    margin-left: 250px;
    min-height: 100vh;
    min-width: 1000px;
}

.section {
    min-height: 100vh;
    min-height: 100dvh;  
    padding: 4rem 2rem;
    display: flex;
    align-items: center;
    position: relative;
}

/* Home Section */
.home {
    background: var(--bg-dark);
    text-align: left;
    padding-bottom: 6rem;
}


.home-content {
    width: 100%;
}




.home-content h1 {
    font-size: clamp(4.5rem, 7.5vw, 9rem);
    /* 200, not 100 (September 2026): still ultra-light, but the strokes hold
       up on phones and ordinary screens. (Space Grotesk's lightest is 300.) */
    font-weight: 200;
    text-transform: uppercase;
    margin-bottom: 2rem;
    line-height: 1.05;
    word-break: break-word;
}

.hero-name-word {
    display: inline-block;
    max-width: 100%;
    overflow-wrap: break-word;
    hyphens: auto;
    opacity: 0;
    animation: heroNameReveal 0.8s ease forwards;
}

/* Staggered by word — a small, deliberate touch since the name is
   already split into per-word spans for line-wrapping. Plays once on
   load, never loops, and stays purely opacity/position (no color) to
   stay consistent with the rest of the site's restraint. */
.hero-name-word:nth-child(1) { animation-delay: 0.1s; }
.hero-name-word:nth-child(2) { animation-delay: 0.25s; }
.hero-name-word:nth-child(3) { animation-delay: 0.4s; }
.hero-name-word:nth-child(4) { animation-delay: 0.55s; }

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

@media (prefers-reduced-motion: reduce) {
    .hero-name-word {
        animation: none;
        opacity: 1;
    }
}

.home-content p {
    /* 300, not 100 (September 2026): at 16-24px a weight-100 line was a
       hairline on the dark background -- faint and hard to read. */
    font-weight: 300;
    font-size: clamp(1.1rem, 3vw, 1.5rem);
    color: var(--text-secondary);
    max-width: 600px;
    margin: 0 0 3rem 0;
    line-height: 1.6;
}

/* Hero CTA — underline + slanted arrow, matches the thin/minimal type language */
.cta-link {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    font-family: var(--font-body, 'Open Sans'), sans-serif;
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-primary);
    text-decoration: none;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--accent-hover);
    transition: color 0.3s ease, border-color 0.3s ease, gap 0.3s ease;
    margin-left: calc(-3px + 0.75rem);
}

.cta-link i {
    font-size: 0.85rem;
    transform: rotate(-45deg);
    transition: transform 0.3s ease;
}

.cta-link:hover {
    color: var(--accent-hover);
    border-bottom-color: var(--text-primary);
    gap: 1rem;
}

.cta-link:hover i {
    transform: rotate(-45deg) translate(3px, -3px);
}

/* About Section */
.about,
.services,
.pricing,
.portfolio,
.testimonials,
.contact {
    border-top: 0.5px solid var(--neutral-mid);
}

.about-content,
.services-content,
.pricing-content,
.portfolio-content,
.testimonials-content,
.contact-content {
    margin: 0 auto;
    margin: 0 0.75rem 3rem;
}

.about h2,
.services h2,
.pricing h2,
.portfolio h2,
.testimonials h2,
.contact h2 {
    font-family: var(--font-heading, 'Montserrat'), sans-serif;
    font-weight: 300;
    font-size: 3rem;
    margin-bottom: 3rem;
    color: var(--text-primary);
}

.about p {
    font-size: 1.25rem;
    font-weight: 150;
    line-height: 1.8;
    color: var(--text-secondary);
    margin-bottom: 2rem;
}

/* About portrait */
.about-body {
    display: grid;
    grid-template-columns: 260px 1fr;
    gap: 3rem;
    align-items: center;
}

.about-portrait {
    border: 1px solid var(--border);
    aspect-ratio: 3 / 4;
    overflow: hidden;
}

.about-portrait img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: grayscale(100%) contrast(1.05);
    transition: filter 0.4s ease;
}

.about-portrait:hover img {
    filter: grayscale(20%) contrast(1.05);
}

/* No About photo set (script.js adds .no-photo): hide the portrait
   column so the text takes the full width, instead of an empty frame
   or a broken-image icon. */
.about-body.no-photo {
    grid-template-columns: 1fr;
}

.about-body.no-photo .about-portrait {
    display: none;
}

@media (max-width: 768px) {
    .about-body {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .about-portrait {
        max-width: 260px;
        margin: 0 auto;
    }
}

.skills {
    display: grid;
    /* 6 columns: each skill spans 6 / (its row's size) -- balanced rows,
       set by script.js (rowAttrs). See "Balanced rows" below. */
    grid-template-columns: repeat(6, minmax(0, 1fr));
    margin-top: 3rem;
}

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


.skill-item:hover,
.service-item:hover,
.testimonial-item:hover {
    transform: translateY(-5px);
    background-color: var(--bg-secondary);
}

.skill-item i {
    font-size: 3rem;
    color: var(--neutral-mid);
    margin-bottom: 1rem;
}

.skill-item h5,
.service-item h5 {
    color: var(--text-primary);
    margin-bottom: 1.5rem;
}

/* About — optional "Who I help" bullet list. Sits below the skills grid;
   hidden by script.js while about.whoIHelp.items is empty. */
.about-audience {
    margin-top: 3.5rem;
}

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

.about-audience h3 {
    font-family: var(--font-heading, 'Montserrat'), sans-serif;
    font-weight: 300;
    font-size: 2rem;
    color: var(--text-primary);
    margin-bottom: 1.25rem;
}

.about .audience-intro {
    font-size: 1.1rem;
    margin-bottom: 1.5rem;
}

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

/* Bullets that flow like text: each item is only as wide as its content,
   and items wrap onto new lines on their own. Short labels sit several to
   a row; long ones take the width they need. */
.audience-list {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem 2.75rem;
}

.audience-list li {
    position: relative;
    max-width: 100%;
    padding-left: 1.2rem;
    font-size: 1.15rem;
    font-weight: 150;
    line-height: 1.5;
    color: var(--text-secondary);
}

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

/* About — optional "Tools I use" row. Reuses the thin-border tag look
   from the portfolio case studies so it stays quiet. */
.about-tools {
    margin-top: 3rem;
}

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

.about-tools h5 {
    font-family: var(--font-body, 'Open Sans'), sans-serif;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--neutral-mid);
    margin-bottom: 1rem;
}

.tools-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
}

.tool-tag {
    font-family: var(--font-body, 'Open Sans'), sans-serif;
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: var(--text-secondary);
    border: 1px solid var(--border);
    padding: 0.5rem 1rem;
    transition: background-color 0.3s ease, border-color 0.3s ease;
}

.tool-tag:hover {
    background-color: var(--bg-secondary);
    border-color: var(--neutral-mid);
}

/* Services Section */
.services-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr)); /* balanced rows, as .skills */
}

/* Balanced rows + centered content (PageMelo, October 2026, owner's
   request). Rows fill the width as evenly as possible (2 side by side,
   4 = 2 + 2, 5 = 3 + 2...): script.js gives each card --span-lg / --span-md
   (6 / its row's size) and marks the first card of each row (data-*-start,
   no left border) and the first row (data-*-first, keeps the top border).
   The old fixed 3-per-row (2 on tablets) border rules were replaced.
   Content is centered vertically, and the last line's bottom margin no
   longer adds space below it (it made the space below 16-32px bigger than
   above, even in the tallest card). Phones: one per row (Mobile Styles). */
.skill-item,
.service-item {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
}

.skill-item > :last-child,
.service-item > :last-child {
    margin-bottom: 0;
}

@media (min-width: 1025px) {
    .skill-item,
    .service-item {
        grid-column: span var(--span-lg, 2);
        border-left: 1px solid var(--border);
    }
    .skill-item[data-lg-start],
    .service-item[data-lg-start] {
        border-left: none;
    }
    .skill-item:not([data-lg-first]),
    .service-item:not([data-lg-first]) {
        border-top: none;
    }
}

@media (min-width: 769px) and (max-width: 1024px) {
    .skill-item,
    .service-item {
        grid-column: span var(--span-md, 3);
        border-left: 1px solid var(--border);
    }
    .skill-item[data-md-start],
    .service-item[data-md-start] {
        border-left: none;
    }
    .skill-item:not([data-md-first]),
    .service-item:not([data-md-first]) {
        border-top: none;
    }
}

.service-item i {
    font-size: 2.5rem;
    color: var(--neutral-mid);
    margin-bottom: 1.5rem;
}

.services p {
    font-size: 1.1rem;
    font-weight: 150;
    color: var(--text-secondary);
    line-height: 1.75;
}

/* ===================================================================
   Pricing — optional plan cards. Hidden entirely by script.js (and
   dropped from the nav) whenever config.js's pricing.plans is left
   empty, so this whole block is safe to leave in the website solution even for
   buyers who don't want published rates.
=================================================================== */
.pricing-intro {
    font-size: 1.1rem;
    font-weight: 150;
    color: var(--text-secondary);
    line-height: 1.75;
    max-width: 640px;
    margin-bottom: 3rem;
}

.pricing-intro:empty {
    display: none;
}

.pricing-grid {
    display: grid;
    /* 6 columns: balanced rows, as .skills -- 2 plans side by side across
       the full width (owner, October 2026), 3 in a row */
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 2rem;
}

@media (min-width: 1025px) {
    .pricing-card { grid-column: span var(--span-lg, 2); }
}

.pricing-card {
    display: flex;
    flex-direction: column;
    padding: 2.5rem 2rem;
    border: 1px solid var(--border);
    position: relative;
    transition: transform 0.3s ease, background-color 0.3s ease;
}

.pricing-card:hover {
    transform: translateY(-5px);
    background-color: var(--bg-secondary);
}

.pricing-card.is-featured {
    border-color: var(--accent);
    transform: translateY(-0.75rem);
}

.pricing-card.is-featured:hover {
    transform: translateY(-1.25rem);
}

.pricing-badge {
    position: absolute;
    top: -0.9rem;
    left: 2rem;
    background: var(--bg-dark);
    border: 1px solid var(--accent);
    color: var(--accent-hover);
    font-family: var(--font-body, 'Open Sans'), sans-serif;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 0.3rem 0.7rem;
}

.pricing-name {
    color: var(--text-primary);
    font-weight: 400;
    font-size: 1.4rem;
    margin-bottom: 0.75rem;
}

.pricing-description {
    font-family: var(--font-body, 'Open Sans'), sans-serif;
    font-size: 0.95rem;
    font-weight: 400;
    color: var(--text-secondary);
    line-height: 1.6;
    margin-bottom: 1.5rem;
}

.pricing-price {
    display: flex;
    align-items: baseline;
    gap: 0.4rem;
    margin-bottom: 2rem;
    padding-bottom: 2rem;
    border-bottom: 1px solid var(--border);
}

.pricing-amount {
    font-family: var(--font-heading, 'Montserrat'), sans-serif;
    font-size: 2.25rem;
    font-weight: 300;
    color: var(--text-primary);
}

.pricing-period {
    font-family: var(--font-body, 'Open Sans'), sans-serif;
    font-size: 0.95rem;
    color: var(--text-secondary);
}

.pricing-features {
    list-style: none;
    flex-grow: 1;
    margin-bottom: 2rem;
}

.pricing-features li {
    display: flex;
    align-items: flex-start;
    gap: 0.7rem;
    font-family: var(--font-body, 'Open Sans'), sans-serif;
    font-size: 0.95rem;
    font-weight: 400;
    color: var(--text-secondary);
    line-height: 1.5;
    padding: 0.6rem 0;
    border-top: 1px solid var(--border);
}

.pricing-features li:first-child {
    border-top: none;
}

.pricing-features li i {
    color: var(--neutral-mid);
    font-size: 0.85rem;
    margin-top: 0.25rem;
    flex-shrink: 0;
}

.pricing-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-body, 'Open Sans'), sans-serif;
    font-size: 0.9rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--text-primary);
    background: var(--button-bg);
    border: 1px solid var(--border);
    padding: 0.85rem 1.5rem;
    transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}

.pricing-cta:hover {
    background: var(--button-hover);
}

.pricing-card.is-featured .pricing-cta {
    border-color: var(--accent);
    color: var(--accent-hover);
}

.pricing-note {
    font-family: var(--font-body, 'Open Sans'), sans-serif;
    font-size: 0.85rem;
    color: var(--text-secondary);
    margin-top: 2.5rem;
}

.pricing-note:empty {
    display: none;
}

@media (max-width: 1024px) {
    /* at most 2 plans per row here: 3 = 2 + 1 (the last full width) */
    .pricing-card { grid-column: span var(--span-md, 3); }
}

@media (max-width: 768px) {
    .pricing-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .pricing-card { grid-column: auto; }

    .pricing-card.is-featured {
        transform: none;
    }

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

/* ===================================================================
   Portfolio — case studies
=================================================================== */

.case-study-list {
    display: flex;
    flex-direction: column;
    text-align: left;
}

.case-study {
    padding: 3rem 0;
    border-bottom: 1px solid var(--border);
    transition: border-color 0.3s ease;
}

.case-study:first-child {
    padding-top: 0;
}

.case-study:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.case-study:hover {
    border-color: var(--neutral-bright);
}

.case-summary-row {
    display: grid;
    grid-template-columns: 84px 1fr;
    gap: 1.5rem;
    align-items: start;
    transition: transform 0.3s ease;
}

.case-study:hover .case-summary-row {
    transform: translateY(-4px);
}

.case-number {
    font-size: clamp(2.2rem, 3vw, 2.8rem);
    font-weight: 100;
    line-height: 1;
    color: var(--text-secondary);
    transition: color 0.3s ease;
}

.case-study:hover .case-number {
    color: var(--neutral-bright);
}

.case-tag {
    display: inline-block;
    font-family: var(--font-body, 'Open Sans'), sans-serif;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-secondary);
    margin-bottom: 0.9rem;
}

.case-title {
    font-size: clamp(1.5rem, 2.2vw, 2rem);
    font-weight: 300;
    color: var(--text-primary);
    margin-bottom: 0.75rem;
    transition: color 0.3s ease;
}

.case-study:hover .case-title {
    color: var(--neutral-bright);
}

.case-highlight {
    font-size: 1.05rem;
    font-weight: 150;
    color: var(--text-secondary);
    line-height: 1.6;
    margin-bottom: 1.25rem;
}

.case-services {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem 1.5rem;
    margin-bottom: 2rem;
}

.case-services li {
    position: relative;
    padding-left: 1rem;
    font-family: var(--font-body, 'Open Sans'), sans-serif;
    font-size: 0.9rem;
    font-weight: 400;
    color: var(--text-secondary);
}

.case-services li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.55em;
    width: 5px;
    height: 5px;
    background: var(--neutral-mid);
}

.case-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    background: transparent;
    border: none;
    border-bottom: 1px solid var(--accent-hover);
    padding: 0 0 0.4rem;
    color: var(--text-primary);
    font-family: var(--font-body, 'Open Sans'), sans-serif;
    font-size: 0.9rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    cursor: pointer;
    transition: color 0.3s ease, border-color 0.3s ease, gap 0.3s ease, transform 0.3s ease;
}

.case-toggle i {
    font-size: 0.8rem;
    transition: transform 0.3s ease;
}

.case-toggle:hover {
    color: var(--accent-hover);
    border-color: var(--accent-hover);
    gap: 1rem;
    transform: translateX(3px);
}

.case-study:hover .case-toggle i {
    transform: translateY(2px);
}

.case-toggle[aria-expanded="true"] i {
    transform: rotate(180deg);
}

.case-study:hover .case-toggle[aria-expanded="true"] i {
    transform: rotate(180deg) translateY(2px);
}

/* Bottom "Collapse" button — quieter than the main toggle since it's a
   secondary/convenience action for closing a long expanded panel. */
.case-collapse {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    background: transparent;
    border: none;
    border-bottom: 1px solid var(--border);
    padding: 0 0 0.4rem;
    margin-top: 3rem;
    color: var(--text-secondary);
    font-family: var(--font-body, 'Open Sans'), sans-serif;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    cursor: pointer;
    transition: color 0.3s ease, border-color 0.3s ease, gap 0.3s ease, transform 0.3s ease;
}

.case-collapse i {
    font-size: 0.75rem;
    transition: transform 0.3s ease;
}

.case-collapse:hover {
    color: var(--accent-hover);
    border-color: var(--accent-hover);
    gap: 1rem;
    transform: translateX(3px);
}

.case-collapse:hover i {
    transform: translateY(-2px);
}

/* Expanding panel — height is animated via JS (0 -> scrollHeight -> auto),
   this just defines the transition and the collapsed baseline. */
.case-details {
    height: 0;
    overflow: hidden;
    transition: height 300ms ease-in-out;
}

.case-details-inner {
    padding-top: 3rem;
    opacity: 0;
    transition: opacity 250ms ease-in-out;
}

.case-study.is-open .case-details-inner {
    opacity: 1;
    transition-delay: 100ms;
}

.case-block {
    margin-bottom: 2.5rem;
}

.case-block:last-child {
    margin-bottom: 0;
}

.case-block h4 {
    font-family: var(--font-body, 'Open Sans'), sans-serif;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--neutral-bright);
    margin-bottom: 1rem;
}

.case-block p {
    font-size: 1.05rem;
    font-weight: 150;
    color: var(--text-secondary);
    line-height: 1.75;
    max-width: 65ch;
    margin-bottom: 1rem;
}

.case-list {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 0.75rem 2rem;
    max-width: 65ch;
}

.case-list li {
    position: relative;
    padding-left: 1rem;
    font-family: var(--font-body, 'Open Sans'), sans-serif;
    font-size: 1.05rem;
    font-weight: 400;
    color: var(--text-secondary);
    line-height: 1.5;
}

.case-list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.55em;
    width: 5px;
    height: 5px;
    background: var(--neutral-mid);
}

.case-results {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 1.5rem 2rem;
}

.case-results li {
    border-top: 1px solid var(--border);
    padding-top: 0.9rem;
}

.case-results strong {
    display: block;
    font-size: 1.6rem;
    font-weight: 300;
    color: var(--text-primary);
    margin-bottom: 0.2rem;
}

.case-results span {
    font-family: var(--font-body, 'Open Sans'), sans-serif;
    font-size: 0.85rem;
    color: var(--text-secondary);
}

/* Project media — every item is the same size; clicking one opens it
   large in a lightbox instead of swapping a "featured" slot. At the
   900px max grid width, minmax(150px, 1fr) fits 5 tiles per row and no
   more — 6 would need 968px, past the 900px cap. Fewer items still
   stretch to fill the row via the 1fr track. */
.case-media-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 0.85rem;
    max-width: 900px;
}

.case-media-tile {
    position: relative;
    aspect-ratio: 4 / 3;
    border: 1px solid var(--border);
    background: transparent;
    padding: 0;
    overflow: hidden;
    cursor: pointer;
    transition: border-color 0.2s ease;
}

/* No thumbnail could be resolved (e.g. a Vimeo/Drive link with no
   explicit thumbnail set) — fall back to a solid tile instead of a
   broken image, so the play icon still reads as intentional. */
.case-media-tile.no-thumb {
    background: var(--bg-secondary);
}

.case-media-tile img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: grayscale(100%) contrast(1.05);
    transition: filter 0.3s ease, transform 0.3s ease;
}

.case-media-tile:hover,
.case-media-tile:focus-visible {
    border-color: var(--neutral-bright);
}

.case-media-tile:hover img,
.case-media-tile:focus-visible img {
    filter: grayscale(20%) contrast(1.05);
    transform: scale(1.05);
}

.case-media-tile .play-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--neutral-bright);
    border-radius: 50%;
    background: rgba(20, 20, 20, 0.55);
    color: var(--text-primary);
    font-size: 0.7rem;
    pointer-events: none;
}

/* Lightbox — shared overlay that any media tile on the page can open */
.media-lightbox {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 2000;
    align-items: center;
    justify-content: center;
    padding: 2rem;
}

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

.media-lightbox-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(10, 10, 10, 0.9);
}

.media-lightbox-panel {
    position: relative;
    width: 100%;
    max-width: 900px;
    max-height: 85vh;
}

.media-lightbox-body img {
    display: block;
    width: 100%;
    max-height: 85vh;
    object-fit: contain;
    border: 1px solid var(--border);
    background: var(--bg-secondary);
}

.media-lightbox-video {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    border: 1px solid var(--border);
    background: var(--bg-secondary);
    overflow: hidden;
}

.media-lightbox-video img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: grayscale(30%) contrast(1.05);
}

.media-lightbox-video iframe,
.media-lightbox-video video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

.media-lightbox-video video {
    background: #000;
    object-fit: contain;
}

.media-lightbox-video .play-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 64px;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--neutral-bright);
    border-radius: 50%;
    background: rgba(20, 20, 20, 0.55);
    color: var(--text-primary);
    font-size: 1rem;
    pointer-events: none;
}

/* Video tiles link out to the real video page instead of embedding —
   sidesteps YouTube's referrer/origin embedding restrictions, and on
   mobile the OS opens the YouTube/Vimeo app automatically if it's
   installed. This card keeps the same thumbnail + play-icon look as
   the embed used to, with a clear "Watch on ..." bar added on top. */
.video-watch-card {
    display: block;
    text-decoration: none;
    color: inherit;
    cursor: pointer;
}

.video-watch-card img {
    transition: filter 0.2s ease, transform 0.2s ease;
}

.video-watch-card:hover img,
.video-watch-card:focus-visible img {
    filter: grayscale(10%) contrast(1.1);
    transform: scale(1.03);
}

.video-watch-card .watch-cta {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.85rem 1rem;
    background: rgba(10, 10, 10, 0.75);
    color: var(--text-primary);
    font-family: var(--font-body, 'Open Sans'), sans-serif;
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    border-top: 1px solid var(--border);
    transition: background 0.2s ease;
}

.video-watch-card .watch-cta i {
    font-size: 0.75rem;
}

.video-watch-card:hover .watch-cta,
.video-watch-card:focus-visible .watch-cta {
    background: rgba(10, 10, 10, 0.92);
}

.media-lightbox-close {
    position: absolute;
    top: -3rem;
    right: 0;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 1px solid var(--border);
    border-radius: 50%;
    color: var(--text-primary);
    cursor: pointer;
    transition: border-color 0.2s ease, color 0.2s ease;
}

.media-lightbox-close:hover {
    border-color: var(--neutral-bright);
    color: var(--neutral-bright);
}

/* Prev/next — positioned relative to the full-screen overlay itself (not
   the panel), so they sit at the screen edges regardless of media size. */
.media-lightbox-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 1px solid var(--border);
    border-radius: 50%;
    color: var(--text-primary);
    cursor: pointer;
    transition: border-color 0.2s ease, color 0.2s ease;
}

.media-lightbox-nav[hidden] {
    display: none;
}

.media-lightbox-nav:hover {
    border-color: var(--neutral-bright);
    color: var(--neutral-bright);
}

.media-lightbox-prev {
    left: 1.5rem;
}

.media-lightbox-next {
    right: 1.5rem;
}

body.modal-open {
    overflow: hidden;
}

@media (max-width: 768px) {
    .media-lightbox-close {
        top: -2.75rem;
        right: 0;
    }

    .media-lightbox-nav {
        width: 38px;
        height: 38px;
    }

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

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

.case-tools {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
}

.case-tool-tag {
    font-family: var(--font-body, 'Open Sans'), sans-serif;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: var(--text-secondary);
    border: 1px solid var(--border);
    padding: 0.4rem 0.8rem;
}

@media (max-width: 768px) {
    .case-summary-row {
        grid-template-columns: 44px 1fr;
        gap: 1rem;
    }

    .case-number {
        font-size: 1.6rem;
    }

    .case-study {
        padding: 2.25rem 0;
    }

    .case-details-inner {
        padding-top: 2.25rem;
    }

    .case-media-grid {
        max-width: 100%;
    }
}


.testimonial-item {
    padding: 3.75rem 7rem;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    transition: transform 0.3s ease;
    position: relative;
}

.testimonial-item::before {
    content: '"';
    font-size: 6rem;
    color: var(--neutral-mid);
    position: absolute;
    top: -1rem;
    left: 2rem;
    opacity: 0.3;
}

.testimonial-text {
    font-style: italic;
    font-size: 1.25rem;
    font-weight: 200;
    line-height: 1.6;
    margin-bottom: 1.25rem;
    color: var(--text-secondary);
}

.testimonial-author {
    color: var(--neutral-mid);
    font-weight: 400;
}

/* Custom carousel styling */
.carousel-control-prev,
.carousel-control-next {
    /* bottom stops above the indicator strip reserved by .carousel-inner's
       padding-bottom, so centering is calculated against the card itself
       rather than the card + the indicator space below it */
    top: 0;
    bottom: 60px;
    width: 6%;
    color: var(--neutral-mid);
}

.carousel-control-prev-icon,
.carousel-control-next-icon {
    width: 3.9rem;
    height: 3.9rem;
    /* Bootstrap's control is a flex container; without this, a narrow
       mobile viewport shrinks the icon's width (but not its height) to
       fit inside the control's own width, turning the circle into an
       oval. flex-shrink: 0 keeps it a fixed, true circle at any width. */
    flex-shrink: 0;
    background-color: var(--bg-secondary);
    background-size: 40% 40%;
    border: 1px solid var(--border);
    border-radius: 50%;
    transition: border-color 0.2s ease;
}

.carousel-control-prev:hover .carousel-control-prev-icon,
.carousel-control-next:hover .carousel-control-next-icon {
    border-color: var(--neutral-bright);
}

.carousel-indicators {
    bottom: -50px;
}

.carousel-indicators [data-bs-target] {
    background-color: var(--neutral-mid);
    width: 12px;
    height: 12px;
    border-radius: 50%;
    margin: 0 10px;
}

.carousel-inner {
    padding-bottom: 60px;
}

/* Contact Section */
.contact-content p {
    font-size: 1.25rem;
    font-weight: 300;
}

.contact-info {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2rem;
    margin-bottom: 3rem;
}

.contact-item {
    text-align: left;
    padding: 2rem;
}

.contact-item i {
    font-size: 2.5rem;
    color: var(--neutral-mid);
    margin-bottom: 1rem;
}

.contact-item h5 {
    margin-bottom: 0.5rem;
}

.contact-item p {
    color: var(--text-secondary);
    /* Email addresses have no spaces to break on — without this, a long
       one can overflow straight past the item's right padding instead
       of wrapping, which is what was eating the right-side margin on
       narrow screens. */
    overflow-wrap: break-word;
}

.social-media {
    text-align: left;
    margin-top: 3rem;
}

.social-media h3 {
    margin-bottom: 2rem;
    font-size: 1.5rem;
    font-weight: 450;
}

.social-links {
    display: flex;
    justify-content: left;
    gap: 2rem;
    flex-wrap: wrap;
}

.social-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background-color: transparent;
    border: 2px solid var(--neutral-mid);
    color: var(--neutral-mid);
    text-decoration: none;
    transition: all 0.3s ease;
    font-size: 1.5rem;
}

.social-link:hover {
    background-color: var(--neutral-mid);
    color: var(--neutral-bright);
    transform: translateY(-3px);
}

/* Footer */
.site-footer {
    border-top: 1px solid var(--border);
    padding: 2.5rem 2rem;
}

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

.site-footer-content p {
    font-family: var(--font-body, 'Open Sans'), sans-serif;
    font-size: 0.8rem;
    font-weight: 400;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-secondary);
    margin: 0;
}

.footer-top-link {
    font-family: var(--font-body, 'Open Sans'), sans-serif;
    font-size: 0.8rem;
    font-weight: 400;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-secondary);
    text-decoration: none;
    transition: color 0.3s ease;
}

.footer-top-link:hover,
.footer-top-link:focus-visible {
    color: var(--text-primary);
}

@media (max-width: 768px) {
    .site-footer {
        padding: 2rem 1rem;
    }

    .site-footer-content {
        flex-direction: column;
        text-align: center;
        gap: 0.5rem;
    }
}

@media (max-width: 768px) {
    .social-links {
        gap: 1.5rem;
    }
    
    .social-link {
        width: 50px;
        height: 50px;
        font-size: 1.2rem;
    }
}

/* Mobile menu toggle */
.menu-toggle {
    display: none;
    position: fixed;
    top: 1rem;
    left: 1rem;
    z-index: 1001;
    /* Fixed square + flex centering, rather than sizing the button from
       padding around the icon glyph — icon fonts have line-height baked
       into their metrics, which was making the button render taller
       than it was wide instead of a true square. */
    width: 4.5rem;
    height: 4.5rem;
    align-items: center;
    justify-content: center;
    background: var(--button-bg);
    border: none;
    color: var(--text-primary);
    padding: 0;
    border-radius: 10px;
    cursor: pointer;
    font-size: 2rem;
    transition: background 0.3s ease;
}

.menu-toggle:hover {
    background: var(--button-hover);
}

/* iPad mini specifically. The *current* iPad mini (6th gen, the model
   actually being sold) has a portrait width of 744px, not 768 — only
   the older/classic iPad mini and the base 9.7" iPad report 768px. This
   band covers both so "iPad mini" catches the model people actually
   have today. Sized at 150% of the 4.5rem/72px phone-default button. */
@media (min-width: 740px) and (max-width: 768px) {
    .menu-toggle {
        width: 6.75rem;
        height: 6.75rem;
        top: 1.875rem;
        left: 1.875rem;
        font-size: 3rem;
        border-radius: 12px;
    }
}

/* iPad 11"/13" (Air/Pro) portrait — separate, smaller bump than iPad
   mini above, since these already read larger on their bigger screens. */
@media (min-width: 769px) and (max-width: 1024px) {
    .menu-toggle {
        width: 6.5rem;
        height: 6.5rem;
        top: 1.75rem;
        left: 1.75rem;
        font-size: 2.8rem;
        border-radius: 14px;
    }
}

/* Main Content */
.main-content {
    margin-left: var(--sidebar-width);
    min-height: 100vh;
    width: calc(100% - var(--sidebar-width));
    transition: margin-left 0.3s ease, width 0.3s ease;
}

.container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1rem;
}




/* Tablet Styles — covers iPad mini (768) through iPad 11"/13"
   (820-1024), so every iPad portrait size gets the same burger-menu
   behavior instead of iPad 11"/13" showing the full desktop sidebar
   while iPad mini shows the burger. */
@media (max-width: 1024px) {
    .menu-toggle {
        display: flex;
    }

    .sidebar {
        transform: translateX(-100%);
        width: 250px;
        padding: 2rem 0;
        box-shadow: 2px 0 10px rgba(0, 0, 0, 0.3);
    }

    .sidebar.active {
        transform: translateX(0);
    }

    .main-content {
        margin-left: 0;
        width: 100%;
    }

    .home-content h1 {
        font-size: clamp(3.25rem, 7vw, 6rem);
    }
    
    .section {
        padding: 3rem 1.5rem;
    }

    .home {
        padding-left: 4.5rem;
    }

    /* Services: at most 2 per row here -- balanced rows (above) */

    .nav-links a {
        padding: 1rem 2rem;
        font-size: 1.1rem;
    }

    /* Tablet cap: minmax(185px, 1fr) fits 4 per row at up to the 900px
       max grid width (5 would need 979px). */
    .case-media-grid {
        grid-template-columns: repeat(auto-fill, minmax(185px, 1fr));
    }
}

/* Mobile Styles */
@media (max-width: 768px) {
    .main-content {
        margin-left: 0;
        width: 100%;
    }

    .section {
        padding: 7.5rem 1rem;
    }

    .home {
        text-align: center;
    }

    .testimonial-item {
        padding: 2.5rem 1.5rem;
    }

    .testimonial-item::before {
        font-size: 3.5rem;
        top: -0.5rem;
        left: 1rem;
    }

    .home-content h1 {
        font-size: clamp(3.25rem, 14vw, 5rem);
        margin-bottom: 1.5rem;
    }

    .hero-name-word {
        display: block;
    }

    .home-content p {
        margin: 0 auto 2rem;
        font-size: clamp(1rem, 4vw, 1.2rem);
    }

    .nav-links a {
        padding: 1rem 2rem;
        font-size: 1.1rem;
        justify-content: flex-start;
    }

    .nav-links i {
        margin-left: 0;
        margin-right: 1rem;
        order: 1;
    }

    .nav-links span {
        order: 2;
    }

    .nav-links a:hover,
    .nav-links a.active {
        transform: translateX(0);
        border-right: none;
        border-left: 3px solid var(--accent);
    }

    .skills,
    .services-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .skill-item,
    .service-item {
        grid-column: auto;
        border-left: none !important;
        border-top: 1px solid var(--border);
    }

    .skill-item:nth-child(n+2),
    .service-item:nth-child(n+2) {
        border-top: none;
    }

    /* Phone cap: minmax(180px, 1fr) fits 2 per row at typical phone
       widths (a 3rd tile needs ~567px+, past any phone). */
    .case-media-grid {
        grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    }
}

/* Small Mobile Styles */
@media (max-width: 480px) {
    .section {
        padding: 7.5rem 0.75rem;
    }

    .container {
        padding: 0 0.5rem;
    }

    .home-content h1 {
        /* Smaller on phones (owner, October 2026): 17vw (54-64px) split even
           7-8 letter names in two. 12vw = ~47px on a 390px phone, ~38px on
           320px; script.js (fitHeroName) shrinks a name further if one of its
           words still doesn't fit. */
        font-size: clamp(2.25rem, 12vw, 3.25rem);
        margin-bottom: 1rem;
    }

    .home-content p {
        margin-bottom: 1.5rem;
        font-size: clamp(0.9rem, 4vw, 1.1rem);
    }

    .sidebar {
        width: 100%;
    }
}

/* Overlay for mobile menu */
.overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 999;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.overlay.active {
    display: block;
    opacity: 1;
}

@media (max-width: 768px) {
    .overlay {
        display: block;
    }
}


/* Smooth scrolling */
html {
    scroll-behavior: smooth;
}

/* Main Content - adjust for mobile */
.main-content {
    margin-left: var(--sidebar-width);
    min-height: 100vh;
    min-width: auto; /* remove fixed width */
}

/* ------------------------------
  Responsive sidebar fix (paste at end)
   - Keeps sidebar visible on desktop
   - Off-canvas only on small screens
-------------------------------*/

/* Default: make sure sidebar is visible unless mobile rules override it */
.sidebar {
  transform: translateX(0) !important;
  left: 0;
  position: fixed;
  width: var(--sidebar-width);
  transition: transform 0.3s ease;
  /* keep the original padding for desktop */
  padding: 7rem 0;
  box-shadow: none;
}

/* Ensure main content uses sidebar width on larger screens */
@media (min-width: 1025px) {
  .menu-toggle { display: none !important; }
  .overlay { display: none !important; opacity: 0 !important; pointer-events: none !important; }

  /* shift main content */
  .main-content {
    margin-left: var(--sidebar-width) !important; /* sidebar width */
    width: calc(100% - var(--sidebar-width)) !important;
  }

  /* optional: if you want to specifically push <main> further */
  main {
    padding-left: 75px; /* same as your sidebar width */
  }

  .home-content p {
    padding-left: 10px;
  }
}


/* Tablet + Mobile: hide sidebar off-canvas, show toggle & overlay.
   1024px (not 768px) so iPad 11"/13" (820-1024px portrait) behaves the
   same as iPad mini (768px) instead of showing the full sidebar. */
@media (max-width: 1024px) {
  .sidebar {
    transform: translateX(-100%) !important; /* hide by default on mobile */
    width: 250px;
    padding: 2rem 0;
    box-shadow: 2px 0 12px rgba(0,0,0,0.35);
    z-index: 1100;
  }

  .sidebar.active {
    transform: translateX(0) !important;
  }

  .menu-toggle {
    display: flex !important;
    z-index: 1110; /* above sidebar */
  }

  .main-content {
    margin-left: 0 !important;
    width: 100% !important;
  }

  /* Overlay hidden until .active */
  .overlay {
    display: block; /* allow it to exist in layout */
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease;
    z-index: 1090;
  }

  .overlay.active {
    opacity: 1;
    pointer-events: auto;
  }
}

/* Small tweak for very small screens */
@media (max-width: 480px) {
  .sidebar { width: 100%; } /* you can keep 250px if you prefer */
}

/* ------------------------------
  Contact email link (script.js renders the email as a mailto: link).
  Looks like the surrounding text; the accent color shows on hover.
-------------------------------*/
.contact-item .contact-email-link {
    color: inherit;
    text-decoration: none;
    border-bottom: 1px solid var(--border);
    transition: color 0.3s ease, border-color 0.3s ease;
    word-break: break-word;
}

.contact-item .contact-email-link:hover,
.contact-item .contact-email-link:focus-visible {
    color: var(--accent-hover);
    border-bottom-color: var(--accent);
}

/* Menu button 25% smaller (owner, October 2026) -- it read as oversized on
   phones and iPads. Same corner positions as before; every size, the icon
   and the rounding scaled by 0.75. Still a comfortable tap (54px+). */
.menu-toggle {
    width: 3.375rem;
    height: 3.375rem;
    font-size: 1.5rem;
    border-radius: 8px;
}
@media (min-width: 740px) and (max-width: 768px) {
    .menu-toggle {
        width: 5.0625rem;
        height: 5.0625rem;
        font-size: 2.25rem;
        border-radius: 9px;
    }
}
@media (min-width: 769px) and (max-width: 1024px) {
    .menu-toggle {
        width: 4.875rem;
        height: 4.875rem;
        font-size: 2.1rem;
        border-radius: 10.5px;
    }
}

/* Long unbroken text (a pasted link, a very long word) wraps instead of
   widening the page on phones (owner, October 2026 -- an 80-letter word in
   an About paragraph made the page 896px wide on a 390px phone and pushed
   the About photo off screen). As in the Pearls. */
p, li, h1, h2, h3, h4, h5, h6, blockquote {
    overflow-wrap: anywhere;
}

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

/* Pricing: long plan names, prices and periods wrap instead of running off
   the side (a long price + period ran 53px past a 900px tablet, 76px past a
   phone). The grid columns above may shrink (minmax(0, 1fr)). */
.pricing-card { min-width: 0; }
.pricing-name,
.pricing-badge,
.pricing-description,
.pricing-amount,
.pricing-period,
.pricing-features li,
.pricing-cta {
    overflow-wrap: anywhere;
}
.pricing-price { flex-wrap: wrap; }
.pricing-amount { min-width: 0; }

/* Testimonials on tablets and phones: the arrows sat over the quote. They
   move under it, to the bottom corners of the strip the carousel already
   keeps free below each card (.carousel-inner's padding-bottom), finger-
   sized; swiping still works. Computers unchanged. */
@media (max-width: 768px) {
    .carousel-control-prev,
    .carousel-control-next {
        top: auto;
        bottom: 6px;
        width: 48px;
        height: 48px;
    }
    .carousel-control-prev-icon,
    .carousel-control-next-icon {
        width: 2.75rem;
        height: 2.75rem;
    }
}

/* 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-item .contact-email-line { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .75rem; }
.contact-item .contact-email-link { overflow-wrap: anywhere; }

/* Copy button in the Contact card (owner, October 2026): the card's rule for
   its big icons (.contact-item i: 2.5rem, 1rem below) also reached the small
   copy icon inside the button, making the button tall and lopsided. The
   button's icon now takes the button's own size, as in the other designs. */
.contact-item .copy-email i {
  font-size: 1em;
  margin: 0;
  color: inherit;
}