/* Mobile composition: keep the desktop layout in style.css intact. */
@media (max-width: 45.999rem) {
  :root {
    /* Keep the content column usable when the browser's default text is enlarged. */
    --mobile-icon-size: min(5.5rem, 88px);
    --gutter: min(1.25rem, 24px);
    --card-padding: min(clamp(1.25rem, 2vw, 1.5rem), 24px);
    --section-space: min(clamp(3rem, calc(2.5rem + 2vw), 4.25rem), 68px);
    --heading-space: min(clamp(1.75rem, 3vw, 2.5rem), 2rem);
    --grid-gap: min(clamp(1rem, 2vw, 1.5rem), 1.5rem);
    --control-height: min(3.5rem, 72px);
    --button-width: min(12rem, 280px);
  }

  .header__inner {
    grid-template-columns: minmax(0, 1fr) min-content;
    min-block-size: 0;
    padding-block: min(0.75rem, 12px);
  }

  .header__brand {
    inline-size: 100%;
    gap: min(0.625rem, 10px);
    flex-wrap: wrap;
  }

  .header__brand picture {
    inline-size: min(clamp(4.75rem, 7vw, 6rem), 96px);
  }

  .header__slogan {
    min-inline-size: 0;
    white-space: normal;
  }

  .menu-toggle {
    inline-size: min(2.8rem, 44px);
    block-size: min(2.8rem, 44px);
    gap: min(0.38rem, 6px);
    padding: min(0.55rem, 9px);
  }

  /* Keep the offer and action together before the full-width umbrella. */
  .hero__content {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    padding-block: min(2rem, 32px) min(2.25rem, 36px);
  }

  .hero__copy {
    display: contents;
  }

  .hero__title {
    grid-row: 1;
  }

  .hero__logo {
    inline-size: min(clamp(11rem, 48vw, 14rem), 14rem);
  }

  .hero__umbrella {
    grid-row: 4;
    inline-size: min(100%, 28rem);
    max-inline-size: none;
    margin-block: min(1rem, 16px) max(-.5rem, -8px);
  }

  .hero__text {
    grid-row: 2;
    margin: min(1.25rem, 20px) 0 min(1.5rem, 24px);
  }

  .hero__copy > .button {
    grid-row: 3;
  }

  /* All five steps stay visible, with a separate fixed window for each icon. */
  .process__list {
    grid-template-columns: minmax(0, 1fr);
    gap: min(1.5rem, 24px);
  }

  .process-card,
  .process-card:last-child {
    display: grid;
    grid-template-columns: var(--mobile-icon-size) minmax(0, 1fr);
    grid-template-rows: auto auto;
    grid-column: auto;
    inline-size: 100%;
    justify-self: stretch;
    align-items: start;
    column-gap: min(1rem, 16px);
    row-gap: min(0.25rem, 4px);
    text-align: left;
  }

  .process-card__image {
    --process-art-height: var(--mobile-icon-size);
    grid-column: 1;
    grid-row: 1 / span 2;
    inline-size: var(--mobile-icon-size);
    block-size: var(--mobile-icon-size);
    justify-self: start;
    align-self: center;
    margin: 0;
  }

  .process-card h3,
  .process-card p {
    grid-column: 2;
    inline-size: auto;
    max-inline-size: none;
    margin-inline: 0;
    min-inline-size: 0;
  }

  .process-card h3 {
    margin-block: 0;
    align-self: end;
    font-size: 1rem;
    line-height: 1.25rem;
  }

  .process-card p {
    margin-block: 0;
    font-size: 0.875rem;
    line-height: 1.25rem;
  }

  /* Keep the heading readable at 320px and give the umbrella its own space. */
  .benefits__layout {
    gap: min(2rem, 32px);
  }

  .benefits__intro {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "title" "art";
    align-items: center;
    gap: min(0.75rem, 12px);
  }

  .benefits__image {
    display: block;
    inline-size: min(7rem, 112px);
    block-size: auto;
    margin: 0;
  }

  .benefits__list {
    gap: min(1.5rem, 24px);
  }

  /* The six extras form one scan-friendly 2 × 3 grid before the explanation. */
  .extras__list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--grid-gap);
    row-gap: 1.25rem;
    inline-size: 100%;
  }

  .extras h2 {
    margin-block-end: var(--heading-space);
  }

  .extra {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: var(--mobile-icon-size) auto;
    justify-items: center;
    align-items: start;
    gap: 0.5rem;
    min-inline-size: 0;
    font-size: 0.875rem;
    line-height: 1.25rem;
    text-align: center;
  }

  .extra picture.icon-art {
    --icon-window: var(--mobile-icon-size);
    display: grid;
    inline-size: var(--icon-window);
    block-size: var(--icon-window);
    margin: 0;
    place-items: center;
  }

  .extra img {
    inline-size: 100%;
    block-size: 100%;
    object-fit: contain;
  }

  .extra span {
    min-inline-size: 0;
  }

  .extras__details {
    gap: min(1.25rem, 20px);
    margin-block: min(2rem, 32px) 0;
  }

  .service__description {
    margin-block-start: min(0.875rem, 14px);
  }

  .service__card {
    grid-template-columns: var(--mobile-icon-size) minmax(0, 1fr);
    column-gap: min(0.5rem, 8px);
    align-items: center;
  }

  .service__card h3 {
    align-self: center;
  }

  .service__image {
    --icon-window: var(--mobile-icon-size);
    inline-size: var(--mobile-icon-size);
    block-size: var(--mobile-icon-size);
  }

  .service__pricing {
    margin-block-start: min(1rem, 16px);
    padding-block-start: min(0.875rem, 14px);
  }

  .service--design .service__rates {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }

  .service--design .service__rates > div {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: baseline;
    gap: min(0.75rem, 12px);
    min-inline-size: 0;
    padding-block: 0.75rem;
    border: 0;
  }

  .service--design .service__rates > div:first-child {
    padding-block-start: 0;
  }

  .service--design .service__rates > div:last-child {
    padding-block-end: 0;
  }

  .service--design .service__rates > div + div {
    border-block-start: 1px solid var(--color-line);
  }

  .service--design .service__rates dd {
    margin: 0;
    padding: 0;
    font-size: 0.9375rem;
  }

  .service--strategy .service__rates {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 4.25rem), 1fr));
    gap: min(0.5rem, 8px);
  }

  .service--strategy .service__rates > div,
  .service--strategy .service__rates > div + div {
    display: block;
    min-inline-size: 0;
    padding: 0;
    border: 0;
  }

  .service--strategy .service__rates dt {
    font-size: 0.75rem;
    line-height: 1rem;
  }

  .service--strategy .service__rates dd {
    margin-block-start: 0.25rem;
    font-size: 0.875rem;
    line-height: 1.125rem;
  }

  .extras__action {
    order: 3;
  }

  .extras__art {
    order: 2;
    inline-size: min(9rem, 144px);
    justify-self: center;
    margin: 0;
  }

  .button {
    padding-block: min(0.875rem, 12px);
    padding-inline: min(1rem, 16px);
  }

  .extras__copy {
    order: 1;
  }

  .service__starting-price dt {
    display: none;
  }

  .service__starting-price dd {
    margin-block-start: 0;
  }

  .plans__layout {
    gap: 1.25rem;
  }

  .plans__chooser:not([hidden]) {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 8.5rem), 1fr));
  }

  .plan__price {
    margin-block: 0.75rem 1rem;
  }

  .plan dl {
    gap: 0.75rem;
  }

  .plan dl > div {
    padding-block-start: 0.75rem;
  }

  .plan dt {
    margin-block-end: 0.25rem;
  }

  /* Direct contacts should be reached before the final decorative illustration. */
  .contact__layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0 1rem;
  }

  .contact__intro {
    display: contents;
  }

  .contact__intro h2,
  .contact__intro > p {
    order: initial;
  }

  .contact__intro h2 {
    grid-column: 1;
    grid-row: 1;
    margin-block-end: var(--heading-copy-space);
  }

  .contact__intro > p {
    grid-column: 1 / -1;
    grid-row: 2;
  }

  .contact-card {
    grid-column: 1 / -1;
    grid-row: 3;
    margin-block-start: min(1.25rem, 20px);
  }

  .contact-card__eyebrow,
  .contact-card h3,
  .contact-channel__arrow {
    display: none;
  }

  .contact-channels {
    gap: min(0.5rem, 8px);
  }

  .contact-channel {
    grid-template-columns: min(2rem, 32px) minmax(0, 1fr);
    align-items: start;
    gap: min(0.75rem, 12px);
    min-block-size: min(3.5rem, 4.5rem);
    padding: min(0.5rem, 8px) min(0.625rem, 10px);
  }

  .contact-channel__icon {
    inline-size: min(2rem, 32px);
    block-size: min(2rem, 32px);
    margin-block-start: min(0.3125rem, 5px);
  }

  .contact-channel__text strong {
    font-size: 0.875rem;
    line-height: 1.25rem;
  }

  .contact-channel__icon svg {
    inline-size: 24px;
    block-size: 24px;
  }

  .contact-card__schedule {
    margin-block-start: min(1rem, 16px);
    padding-block-start: min(0.75rem, 12px);
  }

  .contact__image {
    grid-column: 1;
    grid-row: 4;
    order: initial;
    inline-size: min(100%, 15rem);
    align-self: start;
    justify-self: center;
    margin: min(1.5rem, 24px) 0 0;
  }

  .footer {
    padding-block: min(1.5rem, 24px);
  }

  .footer__grid {
    grid-template-columns: minmax(0, 1fr) min(2.75rem, 44px);
    gap: min(1rem, 16px);
  }

  .footer__about {
    grid-column: 1 / -1;
  }

  .footer__about > p {
    display: none;
  }

  .footer__brand .logo {
    inline-size: min(clamp(5.5rem, 23vw, 6.75rem), 108px);
  }

  .footer__slogan {
    white-space: normal;
    overflow-wrap: anywhere;
  }

  .footer__nav {
    grid-column: 1;
    grid-row: 2;
  }

  .footer__contacts {
    display: none;
  }

  .footer__nav h2,
  .footer__community h2 {
    display: none;
  }

  .footer__nav li {
    margin: 0;
  }

  .footer__nav a {
    display: flex;
    align-items: center;
    min-block-size: min(2.75rem, 3.5rem);
    padding-block: min(.25rem, 4px);
    font-size: .875rem;
    line-height: 1.25rem;
  }

  .footer__nav ul {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 min(1rem, 16px);
  }

  .footer__community {
    display: block;
    grid-column: 2;
    grid-row: 2;
    align-self: center;
  }

  .community-mark {
    inline-size: min(2.75rem, 44px);
    block-size: min(2.75rem, 44px);
  }

  .footer__bottom {
    gap: min(.75rem, 12px);
    padding-block-start: min(.75rem, 12px);
  }
}