/* Site-wide responsive safety layer. Loaded after page-specific styles. */

html,
body {
  max-width: 100%;
}

.page-wrapper,
main,
section,
[class*="_component"],
[class*="_layout"],
[class*="_grid"] {
  min-width: 0;
}

h1,
h2,
h3,
h4,
h5,
h6,
p,
a,
span,
label {
  overflow-wrap: break-word;
}

input,
select,
textarea,
button {
  max-width: 100%;
  font: inherit;
}

iframe,
video,
svg {
  max-width: 100%;
}

@media (max-width: 1100px) {
  :root {
    --spacing-page: clamp(20px, 3vw, 32px);
    --spacing-6xl: 120px;
    --spacing-5xl: 100px;
  }

  .container-large,
  .container-medium,
  .container-small {
    min-width: 0;
  }
}

@media (max-width: 991px) {
  .portfolio-home_header,
  .portfolio-home_showcase {
    grid-template-columns: 1fr;
  }

  .portfolio-home_header {
    align-items: start;
  }

  .portfolio-home_intro {
    max-width: 620px;
  }

  .portfolio-home_showcase {
    min-height: 0;
  }

  .portfolio-home_card.is-featured {
    min-height: 500px;
  }

  .portfolio-home_grid .portfolio-home_card {
    min-height: 300px;
  }

  .pricing_hero_heading,
  .portfolio_hero_heading {
    font-size: clamp(3.5rem, 13vw, 7rem);
  }

  .admin_card {
    overflow-x: auto;
  }
}

@media (max-width: 767px) {
  :root {
    --font-size-display: clamp(2.5rem, 14vw, 4.75rem);
    --font-size-h1: clamp(2.25rem, 10vw, 3.75rem);
    --font-size-h2: clamp(1.9rem, 8vw, 3rem);
    --font-size-h3: clamp(1.6rem, 6vw, 2.4rem);
    --font-size-h4: clamp(1.35rem, 5vw, 2rem);
    --font-size-h5: clamp(1.15rem, 4vw, 1.55rem);
    --spacing-page: 18px;
    --spacing-6xl: 80px;
    --spacing-5xl: 72px;
    --spacing-4xl: 64px;
    --spacing-3xl: 52px;
    --spacing-2xl: 44px;
    --spacing-xl: 36px;
    --spacing-lg: 26px;
    --radius-2xl: 28px;
    --radius-xl: 24px;
    --radius-lg: 18px;
  }

  .text-size-large {
    font-size: 17px;
  }

  .navbar_component {
    grid-template-columns: minmax(44px, 1fr) auto minmax(44px, 1fr);
    column-gap: 12px;
  }

  .navbar_logo_img {
    width: auto;
    max-width: min(132px, 38vw);
    max-height: 32px;
  }

  .navbar_sidebar {
    gap: 18px;
    padding-top: 72px;
    padding-bottom: 32px;
  }

  .navbar_sidebar_link {
    font-size: 1rem;
  }

  .section_hero-home,
  .section_hero-services,
  .section_hero-pricing,
  .section_hero-portfolio,
  .section_hero-team,
  .section_hero-contact,
  .section_hero-blog {
    min-height: auto;
  }

  .hero-home_heading,
  .pricing_hero_heading,
  .portfolio_hero_heading,
  .blog_hero_heading {
    max-width: 100%;
    font-size: clamp(2.5rem, 13vw, 4.25rem);
    line-height: 0.98;
  }

  .hero-home_actions,
  .cta-home_actions,
  .portfolio-home_footer,
  .services_grid_intro,
  .pricing_section_header,
  .pricing_hero_bottom,
  .team-grid_header {
    align-items: stretch;
    flex-direction: column;
  }

  .hero-home_actions .button,
  .cta-home_actions .button,
  .portfolio-home_footer .button,
  .services_grid_intro .button,
  .pricing_section_header .button {
    width: 100%;
  }

  .hero-home_media,
  .hero-home_image {
    min-height: 340px;
  }

  .agency-intro_frame {
    min-height: auto;
  }

  .agency-intro_image,
  .agency-intro_image.is-tall,
  .agency-intro_image.is-square {
    position: static;
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    border: 0;
  }

  .agency-intro_frame {
    display: grid;
    gap: 14px;
  }

  .agency-intro_floating-card {
    position: static;
  }

  .services-bento_grid,
  .portfolio-home_grid,
  .portfolio-home_showcase,
  .blog_card_grid,
  .pricing_cards,
  .services_grid,
  .portfolio_grid,
  .team-grid_list,
  .stats-about_component,
  .team-preview_grid,
  .contact_cards-block,
  .contact_form-grid {
    grid-template-columns: 1fr;
  }

  .services-bento_card--0,
  .services-bento_card--1,
  .services-bento_card--2,
  .services-bento_card--3,
  .services-bento_card--4,
  .services-bento_card--5 {
    grid-column: auto;
    grid-row: auto;
    order: 0;
    min-height: 280px;
  }

  .portfolio-home_card.is-featured,
  .portfolio-home_grid .portfolio-home_card {
    min-height: 340px;
  }

  .portfolio-home_card-content,
  .portfolio-home_grid .portfolio-home_card-content {
    right: 18px;
    bottom: 18px;
    left: 18px;
  }

  .portfolio-home_card-arrow,
  .portfolio-home_grid .portfolio-home_card-arrow {
    top: 16px;
    right: 16px;
    width: 42px;
    height: 42px;
  }

  .portfolio-home_number,
  .portfolio-home_grid .portfolio-home_number {
    top: 18px;
    left: 18px;
  }

  .pricing_toggle {
    width: 100%;
    min-width: 0;
  }

  .pricing_toggle label {
    min-width: 0;
    padding-right: 12px;
    padding-left: 12px;
    font-size: 16px;
  }

  .pricing_faq_media,
  .pricing_faq_media img,
  .services_benefits_media,
  .services_benefits_media img,
  .case_feature_media,
  .contact_office-panels {
    min-height: 360px;
  }

  .contact_form,
  .contact_form input,
  .contact_form select,
  .contact_form textarea {
    width: 100%;
  }

  .contact_faq-summary,
  .services_faq_question,
  .pricing_faq_question {
    gap: 12px;
    font-size: clamp(1rem, 5vw, 1.35rem);
  }

  .contact_office-menu {
    grid-template-columns: 1fr;
  }

  .footer_component {
    gap: 36px;
  }

  .footer_brand_block,
  .footer_action_block,
  .footer_newsletter {
    width: 100%;
    max-width: none;
  }

  .footer_links {
    gap: 18px 24px;
  }

}

@media (max-width: 479px) {
  :root {
    --font-size-display: clamp(2.25rem, 15vw, 3.75rem);
    --font-size-h1: clamp(2rem, 11vw, 3.1rem);
    --font-size-h2: clamp(1.7rem, 9vw, 2.5rem);
    --font-size-body: 15px;
    --spacing-page: 16px;
    --spacing-4xl: 56px;
    --spacing-3xl: 44px;
  }

  .navbar_component {
    min-height: 66px;
  }

  .navbar_logo_img {
    max-width: 112px;
    max-height: 28px;
  }

  .navbar_menu_button {
    width: 42px;
    height: 42px;
    padding: 10px;
  }

  .hero-home_media,
  .hero-home_image {
    min-height: 290px;
  }

  .services-bento_card--0,
  .services-bento_card--1,
  .services-bento_card--2,
  .services-bento_card--3,
  .services-bento_card--4,
  .services-bento_card--5,
  .portfolio-home_card.is-featured,
  .portfolio-home_grid .portfolio-home_card {
    min-height: 280px;
  }

  .services-bento_content {
    right: 16px;
    bottom: 16px;
    left: 16px;
  }

  .services-bento_arrow {
    top: 14px;
    right: 14px;
    width: 42px;
    height: 42px;
  }

  .pricing_hero_heading,
  .portfolio_hero_heading,
  .blog_hero_heading {
    font-size: clamp(2.25rem, 14vw, 3.5rem);
  }

  .pricing_card_body,
  .case_feature_content,
  .careers-cta_component,
  .blog_featured_content,
  .blog_newsletter,
  .admin_card {
    padding: 18px;
  }

  .pricing_faq_media,
  .pricing_faq_media img,
  .services_benefits_media,
  .services_benefits_media img,
  .case_feature_media,
  .contact_office-panels {
    min-height: 300px;
  }

  .footer_newsletter_row {
    align-items: stretch;
    flex-direction: column;
    gap: 10px;
  }

  .footer_newsletter_row button {
    width: 100%;
    min-height: 48px;
  }

  .footer_socials {
    flex-wrap: wrap;
  }

  .admin_topbar {
    align-items: flex-start;
  }

  .admin_topbar > form .button {
    min-width: 0;
    padding-right: 14px;
    padding-left: 14px;
  }
}

/* Keep the mobile navigation attached to the viewport, not the sticky header. */
@media (max-width: 991px) {
  .section_navbar {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  .navbar_sidebar {
    position: fixed !important;
    inset: 0 auto 0 0 !important;
    z-index: 1000 !important;
    width: 100vw !important;
    max-width: none !important;
    height: 100vh !important;
    height: 100dvh !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    transform: translateX(100vw) !important;
  }

  .navbar_state:checked ~ .navbar_sidebar {
    transform: translateX(0) !important;
  }

  .navbar_overlay {
    z-index: 999 !important;
  }
}