/* Show a four-project preview until a specific category is selected. */
.sp-home-page #portfolio-section:not(:has(#portfolio-filters [data-filter]:not([data-filter="all"])[aria-pressed="true"]))
  #portfolio-grid > .portfolio-item:nth-child(n + 5) {
  display: none;
}

.sp-home-page #portfolio-filters .portfolio-filter-btn {
  min-height: clamp(44px, 3.33vw, 60px);
  padding: 0.55rem clamp(14px, 1.67vw, 30px);
  border-radius: clamp(12px, 0.98vw, 18px);
  font-size: clamp(14px, 1.05vw, 19px);
  font-weight: 500;
  line-height: 1.35;
}

.sp-home-page #testimonials-section :is(#testimonialsPrevBtn, #testimonialsNextBtn) {
  width: clamp(60px, 5.21vw, 100px);
  height: clamp(44px, 3.9vw, 75px);
  border-radius: clamp(14px, 1.25vw, 24px);
}

.sp-home-page #testimonials-section :has(> #testimonialsPrevBtn) {
  gap: clamp(5px, 0.35vw, 7px);
}

@media (min-width: 1024px) {
  @supports (zoom: calc(1280 / 1500)) {
    .sp-home-page {
      --sp-home-desktop-scale: calc(1280 / 1500);
    }

    /* Scale the content while letting the header and footer span the viewport. */
    .sp-home-page :is(.site-header-space, .page-builder-wrapper, #footer-section) {
      zoom: var(--sp-home-desktop-scale);
    }

    .sp-home-page .page-builder-wrapper {
      inline-size: 100vw;
      margin-inline: auto;
    }

    /* Size the hero frame in viewport pixels and keep its contents on the scaled layout. */
    .sp-home-page .hero-home-box {
      --sp-home-hero-layout-width: min(100vw, 1920px);
      --sp-home-hero-frame-width: calc(var(--sp-home-hero-layout-width) / var(--sp-home-desktop-scale));
      inline-size: var(--sp-home-hero-frame-width);
      max-inline-size: none;
      margin-inline: calc((100% - var(--sp-home-hero-frame-width)) / 2);
    }

    .sp-home-page .hero-home-box .hero-title-block {
      max-inline-size: var(--sp-home-hero-layout-width);
      margin-inline: auto;
    }

    .sp-home-page .hero-home-box .hero-main-image {
      max-inline-size: calc(var(--sp-home-hero-layout-width) / 2);
    }

    .sp-home-page .site-header__inner {
      max-inline-size: 100vw;
    }

    .sp-home-page #footer-section {
      --sp-footer-rail: var(--sp-home-rail);
    }

    .sp-home-page #wizard-modal {
      zoom: var(--sp-home-desktop-scale);
    }
  }
}

/* Desktop layout from the 1920px homepage design. Keep the existing narrow layouts. */
@media (min-width: 1024px) {
  .sp-home-page {
    --sp-home-unit: clamp(0.62px, 0.05208333vw, 1px);
    --sp-home-rail: min(1500px, max(78.125vw, min(960px, 100vw - 48px)));
    --sp-home-section-gap: calc(200 * var(--sp-home-unit));
    --sp-home-panel-radius: calc(64 * var(--sp-home-unit));
  }

  .sp-home-page :is(.hero-home-box, #creativity-section > .container) {
    border-radius: var(--sp-home-panel-radius);
  }

  .sp-home-page :is(.site-header .primary-button, #why-choose-section .primary-button, #banner-section .light-button) {
    border-radius: calc(16 * var(--sp-home-unit));
  }

  .sp-home-page :is(#portfolio-filters, #package-filters) > .sp-filter-row {
    display: flex;
    flex: 0 0 100%;
    flex-wrap: wrap;
    justify-content: center;
    gap: inherit;
  }

  .sp-home-page :is(#services-section, #about-section, #portfolio-section, #why-choose-section, #packages-section, #banner-section, #creative-process-section, #testimonials-section) > .container {
    width: var(--sp-home-rail);
    padding-inline: 0;
  }

  .sp-home-page :is(#services-section, #creativity-section, #about-section, #portfolio-section, #why-choose-section, #packages-section, #banner-section, #creative-process-section, #clients-section) {
    margin-block-end: var(--sp-home-section-gap);
  }

  .sp-home-page :is(#services-section, #creativity-section, #about-section, #portfolio-section, #why-choose-section, #packages-section, #creative-process-section, #clients-section, #testimonials-section) h2 {
    font-size: calc(48 * var(--sp-home-unit));
    line-height: 1.18;
  }

  .sp-home-page .hero-home-box {
    --sp-hero-extra-height: calc(104 * var(--sp-home-unit));
    min-height: calc(min(857px, 880 * var(--sp-home-unit)) + var(--sp-hero-extra-height));
    padding-block-start: calc(59 * var(--sp-home-unit));
  }

  .sp-home-page .hero-title-block {
    margin-bottom: 0;
  }

  .sp-home-page .hero-title-block h1 {
    font-size: calc(76 * var(--sp-home-unit));
  }

  .sp-home-page .hero-title-block p {
    font-size: clamp(14px, 0.94vw, 18px);
  }

  .sp-home-page .hero-cards-grid {
    position: absolute;
    /* Move the cards down by the same amount as the bottom-anchored portrait. */
    inset: calc(35% + 0.65 * var(--sp-hero-extra-height)) 0 auto;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr)) minmax(0, 0.74fr) repeat(2, minmax(0, 1fr));
    width: var(--sp-home-rail);
    gap: calc(16 * var(--sp-home-unit));
    padding: 0;
  }

  .sp-home-page .hero-cards-grid > .contents {
    display: contents;
  }

  .sp-home-page .hero-card {
    grid-row: 1;
    min-height: 0;
    height: auto;
    aspect-ratio: 229 / 131;
    padding: calc(28 * var(--sp-home-unit));
    border-radius: calc(38 * var(--sp-home-unit));
  }

  .sp-home-page .hero-card--fresh { grid-column: 1; }
  .sp-home-page .hero-card--web { grid-column: 2; }
  .sp-home-page .hero-card--social { grid-column: 4; }
  .sp-home-page .hero-card--branding { grid-column: 5; }

  .sp-home-page :is(.hero-card--web, .hero-card--social) {
    margin-top: calc(87 * var(--sp-home-unit));
  }

  .sp-home-page .hero-card p {
    font-size: clamp(13px, 1.04vw, 20px);
    line-height: 1.2;
  }

  .sp-home-page .hero-card--web p {
    max-width: 15ch;
    margin-inline: auto;
  }

  .sp-home-page #services-section {
    padding-block-start: calc(72 * var(--sp-home-unit));
  }

  .sp-home-page .sp-services-intro {
    margin-bottom: calc(104 * var(--sp-home-unit));
  }

  .sp-home-page .sp-services-intro p {
    font-size: clamp(15px, 1.04vw, 20px);
  }

  .sp-home-page .sp-services-grid {
    gap: calc(60 * var(--sp-home-unit));
    margin-bottom: calc(96 * var(--sp-home-unit));
  }

  .sp-home-page .sp-service-card {
    --sp-service-inset: calc(10 * var(--sp-home-unit));
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    min-width: 0;
    padding: var(--sp-service-inset);
    border-radius: calc(64 * var(--sp-home-unit));
  }

  /* Reserve the design ratio, while allowing longer copy to grow the row. */
  .sp-home-page .sp-service-card::before {
    grid-area: 1 / 1 / 2 / -1;
    align-self: start;
    justify-self: stretch;
    aspect-ratio: 540 / 228;
    margin: calc(-1 * var(--sp-service-inset));
    content: "";
  }

  .sp-home-page .sp-service-content {
    grid-area: 1 / 1;
    min-width: 0;
    gap: calc(16 * var(--sp-home-unit));
    padding: calc(32 * var(--sp-home-unit)) calc(40 * var(--sp-home-unit)) calc(36 * var(--sp-home-unit));
  }

  .sp-home-page .sp-service-content h3 {
    max-inline-size: 15ch;
    font-size: clamp(18px, 1.46vw, 28px);
  }

  .sp-home-page .sp-service-content p {
    font-size: clamp(12px, 0.76vw, 15px);
  }

  .sp-home-page .sp-service-link {
    width: clamp(56px, 5.2vw, 100px);
    height: clamp(44px, 3.9vw, 75px);
    border-radius: calc(24 * var(--sp-home-unit));
  }

  .sp-home-page .sp-service-art {
    grid-area: 1 / 2;
    position: relative;
    min-width: 0;
    border-radius: 0 calc(58 * var(--sp-home-unit)) calc(58 * var(--sp-home-unit)) 0;
    background-image: linear-gradient(to right, transparent, rgb(109 210 192 / 28%));
  }

  .sp-home-page .sp-service-art img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
  }

  .sp-home-page #creativity-section > .container {
    padding-block: calc(114 * var(--sp-home-unit));
  }

  .sp-home-page .sp-impact-intro {
    margin-bottom: calc(120 * var(--sp-home-unit));
  }

  .sp-home-page .creativity-bg > .container {
    width: min(100%, calc(1172 * var(--sp-home-unit)));
    padding-inline: 0;
  }

  .sp-home-page .sp-impact-grid {
    gap: calc(40 * var(--sp-home-unit));
    margin-bottom: calc(64 * var(--sp-home-unit));
  }

  .sp-home-page .sp-impact-card {
    aspect-ratio: 273 / 244;
    border-radius: calc(42 * var(--sp-home-unit));
    padding: calc(10 * var(--sp-home-unit));
  }

  .sp-home-page .sp-impact-card:nth-child(2) {
    margin-block-start: calc(186 * var(--sp-home-unit));
  }

  .sp-home-page .sp-impact-art {
    margin-block-start: calc(-80 * var(--sp-home-unit));
  }

  .sp-home-page .sp-impact-card h3 {
    font-size: clamp(16px, 1.15vw, 22px);
  }

  .sp-home-page .sp-impact-card p {
    font-size: clamp(12px, 0.84vw, 16px);
  }

  .sp-home-page #about-section > .container > div {
    display: grid;
    grid-template-columns: minmax(0, 52fr) minmax(0, 48fr);
    gap: calc(44 * var(--sp-home-unit));
  }

  .sp-home-page #about-section:has([data-sp-about-art]) {
    /* The approved artwork includes a transparent area beneath its last card. */
    margin-block-end: calc(80 * var(--sp-home-unit));
  }

  .sp-home-page #about-section [data-sp-about-art] {
    width: min(calc(812 * var(--sp-home-unit)), calc(100% + 100 * var(--sp-home-unit)));
    justify-self: end;
    margin-inline-end: calc(-100 * var(--sp-home-unit));
  }

  .sp-home-page #about-section h3 {
    font-size: clamp(23px, 2.19vw, 42px);
    margin-bottom: calc(70 * var(--sp-home-unit));
  }

  .sp-home-page #about-section p {
    font-size: clamp(14px, 1.1vw, 21px);
    margin-bottom: calc(75 * var(--sp-home-unit));
  }

  .sp-home-page #portfolio-grid {
    gap: calc(28 * var(--sp-home-unit));
  }

  .sp-home-page #portfolio-grid .portfolio-item {
    min-width: 0;
    height: auto;
    aspect-ratio: 16 / 9;
    border-radius: calc(38 * var(--sp-home-unit));
  }

  .sp-home-page .sp-portfolio-card-content {
    padding: calc(40 * var(--sp-home-unit));
  }

  .sp-home-page .sp-portfolio-card-content h3 {
    font-size: clamp(16px, 1.2vw, 24px);
  }

  .sp-home-page #why-choose-section .grid > div {
    height: auto;
    min-height: calc(205 * var(--sp-home-unit));
    padding: calc(40 * var(--sp-home-unit)) calc(62 * var(--sp-home-unit));
  }

  .sp-home-page #why-choose-section .grid h3 {
    font-size: clamp(15px, 1.16vw, 22px);
  }

  .sp-home-page #why-choose-section .grid p {
    font-size: clamp(12px, 0.86vw, 16px);
    line-height: 1.45;
  }

  .sp-home-page #packages-grid {
    --sp-package-gap: calc(36 * var(--sp-home-unit));
    container-type: inline-size;
    gap: var(--sp-package-gap);
  }

  .sp-home-page #packages-grid .sp-package-card {
    min-width: 0;
    padding: calc(54 * var(--sp-home-unit));
    border-radius: calc(42 * var(--sp-home-unit));
  }

  .sp-home-page #packages-grid .sp-package-card:not([class~="lg:col-span-3"]) {
    /* Use the width of one of the three columns as the basis for a 3:4 minimum. */
    min-height: calc((100cqw - 2 * var(--sp-package-gap)) * 4 / 9);
  }

  .sp-home-page #packages-grid .sp-package-card > h3 {
    margin-block-end: calc(36 * var(--sp-home-unit));
    font-size: calc(51 * var(--sp-home-unit));
  }

  .sp-home-page .sp-package-price {
    flex-wrap: wrap;
    align-items: baseline;
    margin-block-end: calc(28 * var(--sp-home-unit));
    font-size: calc(56 * var(--sp-home-unit));
  }

  .sp-home-page .sp-package-price > span + span {
    margin-bottom: 0;
    font-size: clamp(12px, 0.88vw, 17px);
  }

  .sp-home-page #packages-grid .sp-package-card > p.font-medium {
    margin-block-end: calc(8 * var(--sp-home-unit));
    font-size: clamp(15px, 1.22vw, 23px);
    line-height: 1.3;
  }

  .sp-home-page #packages-grid .sp-package-card > p.font-light {
    min-block-size: 2.9em;
    margin-block-end: calc(46 * var(--sp-home-unit));
    color: #666;
  }

  .sp-home-page #packages-grid .sp-package-card > p.font-medium:has(+ ul) {
    margin-block-end: calc(16 * var(--sp-home-unit));
    font-size: clamp(14px, 1.1vw, 21px);
  }

  .sp-home-page #packages-grid .sp-package-card > p.font-light,
  .sp-home-page #packages-grid .sp-package-card > ul > li {
    font-size: clamp(12px, 0.87vw, 17px);
    line-height: 1.45;
  }

  .sp-home-page #packages-grid .sp-package-card > ul {
    gap: calc(4 * var(--sp-home-unit));
    margin-block-end: 0;
  }

  .sp-home-page #packages-grid .sp-package-card > ul > li > svg {
    flex: none;
    width: calc(14 * var(--sp-home-unit));
    height: auto;
  }

  @supports (grid-template-rows: subgrid) {
    /* Cards in the same row share text baselines even when one description wraps. */
    .sp-home-page #packages-grid .sp-package-card:not([class~="lg:col-span-3"]) {
      display: grid;
      grid-row: span 6;
      grid-template-rows: subgrid;
      row-gap: 0;
    }

    .sp-home-page #packages-grid .sp-package-card > h3 { grid-row: 1; }
    .sp-home-page #packages-grid .sp-package-card > .sp-package-price { grid-row: 2; }
    .sp-home-page #packages-grid .sp-package-card > p.font-medium { grid-row: 3; }
    .sp-home-page #packages-grid .sp-package-card > p.font-light { grid-row: 4; }
    .sp-home-page #packages-grid .sp-package-card > p.font-medium:has(+ ul) { grid-row: 5; }
    .sp-home-page #packages-grid .sp-package-card > ul { grid-row: 6; }
  }

  .sp-home-page #banner-section {
    margin-top: calc(384 * var(--sp-home-unit));
  }

  .sp-home-page #banner-section > .container {
    border-radius: calc(64 * var(--sp-home-unit));
  }

  .sp-home-page #banner-section .sp-banner-layout {
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    height: calc(348 * var(--sp-home-unit));
    padding-inline: calc(94 * var(--sp-home-unit));
  }

  .sp-home-page .sp-banner-art {
    width: calc(448 * var(--sp-home-unit));
  }

  .sp-home-page .sp-banner-heading h2 {
    font-size: clamp(21px, 1.93vw, 37px);
  }

  .sp-home-page #creative-process-section .grid > div {
    min-width: 0;
    min-height: calc(190 * var(--sp-home-unit));
    padding: calc(28 * var(--sp-home-unit));
    border-radius: calc(42 * var(--sp-home-unit));
  }

  .sp-home-page #creative-process-section .grid > div > :first-child {
    margin-bottom: calc(12 * var(--sp-home-unit));
  }

  .sp-home-page #creative-process-section .grid > div > :first-child :is(svg, img) {
    width: auto;
    height: auto;
    max-inline-size: calc(50 * var(--sp-home-unit));
    max-block-size: calc(32 * var(--sp-home-unit));
  }

  .sp-home-page #creative-process-section .grid h3 {
    font-size: clamp(14px, 1.04vw, 20px);
  }

  .sp-home-page #creative-process-section .grid p {
    font-size: clamp(12px, 0.82vw, 16px);
    line-height: 1.4;
  }

  .sp-home-page #clients-section > .container {
    padding-block: calc(128 * var(--sp-home-unit)) calc(90 * var(--sp-home-unit));
    border-radius: calc(66 * var(--sp-home-unit));
  }

  .sp-home-page .sp-client-logos .client-row {
    gap: calc(42 * var(--sp-home-unit));
  }

  .sp-home-page .sp-client-logos .client-row > div {
    width: calc(304 * var(--sp-home-unit));
    height: calc(164 * var(--sp-home-unit));
    border-radius: calc(42 * var(--sp-home-unit));
  }

  .sp-home-page .sp-testimonials-card {
    --sp-testimonial-divider-height: calc(152 * var(--sp-home-unit));
    padding: 0 calc(62 * var(--sp-home-unit));
  }

  .sp-home-page .sp-testimonials-card > :first-child {
    gap: calc(16 * var(--sp-home-unit));
    margin-bottom: calc(20 * var(--sp-home-unit));
  }

  .sp-home-page .sp-testimonials-card > :first-child > :first-child {
    width: calc(46 * var(--sp-home-unit));
    height: calc(46 * var(--sp-home-unit));
    flex: none;
  }

  .sp-home-page .sp-testimonials-card h3 {
    font-size: clamp(14px, 1vw, 19px);
  }

  .sp-home-page .sp-testimonials-card > p {
    margin-bottom: calc(22 * var(--sp-home-unit));
    font-size: clamp(13px, 0.9vw, 17px);
    line-height: 1.5;
  }

}

@media (min-width: 1280px) {
  .sp-home-page .site-header__inner {
    width: max(var(--sp-home-rail), 70rem);
    padding-inline: 0;
  }

  .sp-home-page #creative-process-section .grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: calc(72 * var(--sp-home-unit));
  }
}

@media (min-width: 1024px) and (max-width: 1279px) {
  .sp-home-page #creative-process-section .border-dashed {
    display: none;
  }
}