/* ================================================================
   WOLFE PHONE AND TABLET LAYOUT
   Edit the settings below to change mobile spacing and text sizes.
   Rules inside @media apply only at widths of 920px or less.
   ================================================================ */

/* Group wrappers leave the original desktop grid positions intact. */
.phone-group { display: contents; }

@media screen and (max-width: 920px) {
  /* 1. PAGE WIDTH AND SECTION SPACING */
  .page {
    --phone-section-space: 36px;
    --phone-side-space: 20px;
    --phone-item-space: 20px;
    --phone-body-size: 17px;
    width: 100%; max-width: 100%; min-width: 0;
  }
  .page, .page * { box-sizing: border-box; }
  .page .block:not(.precision-hero) {
    display: block !important;
    width: 100% !important; max-width: 100% !important;
    min-height: 0 !important; height: auto !important;
    isolation: isolate;
    margin-top: 0 !important;
    padding: var(--phone-section-space) var(--phone-side-space) !important;
  }
  .page .block-layout--layout {
    position: relative !important; z-index: 1;
    display: flex !important; flex-direction: column !important;
    gap: var(--phone-item-space) !important;
    grid-template-columns: none !important;
    grid-template-rows: none !important;
    width: 100% !important; max-width: 740px !important; min-width: 0 !important;
    min-height: 0 !important; height: auto !important;
    margin: 0 auto !important; padding: 0 !important;
  }
  .page .block-layout--layout .layout-element {
    display: block !important; position: relative !important;
    grid-area: auto !important; order: var(--phone-order, 0);
    width: 100% !important; max-width: 100% !important; min-width: 0 !important;
    height: auto !important; min-height: 0 !important;
    left: auto !important; top: auto !important; rotate: none !important;
    margin: 0 !important; padding: 0 !important;
    align-self: stretch !important;
  }
  .page .block-layout--layout .layout-element__component {
    width: 100% !important; max-width: 100% !important;
    min-width: 0 !important; min-height: 0;
  }
  /* Decorative shapes are backgrounds, so they must not create empty rows. */
  .page .block-layout--layout .phone-decoration { display: none !important; }

  /* 2. RELATED CONTENT: a photo, its caption, and its description stay together. */
  .page .phone-group {
    display: flex; flex-direction: column; gap: 12px;
    order: var(--phone-order, 0);
    width: 100%; max-width: 100%; min-width: 0;
  }
  .page .phone-group--service { gap: 14px; padding-bottom: 20px; }
  .page .phone-group--caption { gap: 10px; padding-bottom: 16px; }
  .page .phone-group--caption .text-box,
  .page .phone-group--caption .text-box * { text-align: center !important; }
  .page .phone-group--caption .text-box h6 { font-size: 19px !important; }
  .page .block-layout--layout.phone-card-layout {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: none !important;
    grid-auto-rows: auto !important; gap: 28px !important;
  }
  .page .block-layout--layout > .layout-element.phone-wide { grid-column: 1 / span 1 !important; }

  /* 3. TEXT: override the old desktop sizes, including sizes on nested spans. */
  .page .text-box, .page .text-box * {
    white-space: normal !important;
    overflow-wrap: break-word; word-break: normal;
    max-width: 100%;
  }
  .page .text-box :is(h1,h2,h3,h4,h5,h6,p) {
    margin: 0 0 12px !important; letter-spacing: normal !important;
  }
  .page .text-box :is(h1,h2,h3,h4,h5,h6,p):last-child { margin-bottom: 0 !important; }
  .page .text-box h1 { font-size: 36px !important; line-height: 1.2 !important; }
  .page .text-box h2 { font-size: 32px !important; line-height: 1.25 !important; }
  .page .text-box h3 { font-size: 28px !important; line-height: 1.3 !important; }
  .page .text-box h4 { font-size: 25px !important; line-height: 1.3 !important; }
  .page .text-box :is(h5,h6) { font-size: 22px !important; line-height: 1.35 !important; }
  .page .text-box p, .page .text-box li {
    font-size: var(--phone-body-size) !important; line-height: 1.6 !important;
  }
  .page .text-box :is(h1,h2,h3,h4,h5,h6,p,li) :is(span,strong,em,a) {
    font-size: inherit !important; line-height: inherit !important;
    letter-spacing: inherit !important;
  }
  .page .text-box ul, .page .text-box ol {
    margin: 8px 0 16px !important; padding-left: 24px !important;
  }
  .page .text-box a { overflow-wrap: anywhere; }
  /* Some original body paragraphs were tagged as headings. */
  .page .text-box.phone-body-heading :is(h3,h4,h5,h6),
  #zj8-xf h3, #zc2wWd h3 {
    font-size: var(--phone-body-size) !important; line-height: 1.65 !important;
  }
  #zyzN_v p { font-size: 36px !important; line-height: 1.2 !important; }
  .page .phone-intro-heading h1 { font-size: 27px !important; line-height: 1.35 !important; }

  /* 4. PHOTOS: remove fixed builder offsets and stop giant/tiny mobile crops. */
  .page .image-wrapper--layout {
    width: 100% !important; height: auto !important;
    max-height: none !important; min-height: 0 !important;
  }
  .page .image-wrapper--layout .image-wrapper--desktop { display: block !important; }
  .page .image-wrapper--layout .image-wrapper--mobile { display: none !important; }
  .page .image-wrapper--layout .image {
    position: relative !important; width: 100% !important;
    height: auto !important; max-height: none !important;
    left: auto !important; top: auto !important; transform: none !important;
  }
  .page .image-wrapper--layout .image__image {
    display: block; position: relative !important;
    width: 100% !important; max-width: 100% !important;
    height: auto !important; min-height: 0 !important; max-height: 420px !important;
    left: auto !important; top: auto !important; transform: none !important;
    object-fit: contain !important; object-position: center !important;
    aspect-ratio: auto !important;
  }
  .page .phone-group--caption .image__image { max-height: 300px !important; }
  /* Keep background photos inside their section and make the text readable. */
  .page .block-background { position: absolute !important; inset: 0 !important; z-index: 0; }
  .page .block-background__image {
    position: absolute !important; inset: 0 !important;
    width: 100% !important; height: 100% !important;
    object-fit: cover !important; transform: none !important;
  }
  .page .phone-dark-section .block-background::after {
    content: ""; position: absolute; inset: 0;
    background: rgba(0, 0, 0, 0.48); pointer-events: none;
  }
  .page .phone-dark-section .text-box,
  .page .phone-dark-section .text-box * { color: #ffffff !important; }

  /* 5. HOME VIDEO AND CENTERED HEADING */
  .page #ai-3dS6g2.precision-hero {
    --hero-height: 520px;
    --hero-title-size: 42px;
    --hero-description-size: 18px;
    --hero-offset-y: 0px;
    --hero-gap: 22px;
    min-height: var(--hero-height) !important;
    margin-top: 0 !important; padding: 64px 20px !important;
  }
  .page #ai-3dS6g2 .precision-hero__content {
    min-width: 0; max-width: 640px; transform: none !important;
  }
  .page #ai-3dS6g2 .precision-hero__title {
    font-size: clamp(32px, 8.5vw, 42px) !important;
    line-height: 1.2 !important; overflow-wrap: break-word;
  }
  .page #ai-3dS6g2 .precision-hero__description { font-size: 18px !important; line-height: 1.55 !important; }
  .page #ai-3dS6g2 .precision-hero__button { min-height: 48px; max-width: 100%; }
  #zCBGAW .block-layout { gap: 18px !important; }
  #zTqAgx .block-layout {
    min-height: 280px !important; gap: 28px !important;
    align-items: center !important; justify-content: center !important;
  }
  #zTqAgx .text-box, #zTqAgx .text-box * { text-align: center !important; }
  #zTqAgx .block-layout::after { font-size: 88px !important; }
  #zEj7jF .block-layout--layout.phone-card-layout {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 12px !important;
  }
  #zEj7jF .layout-element:not(.phone-decoration) {
    padding: 18px 12px !important; background: rgba(0,0,0,0.45);
    border-radius: 8px; display: flex !important;
    align-items: center; justify-content: center;
  }
  #zEj7jF .phone-stat, #zEj7jF .phone-stat * { text-align: center !important; }
  #zEj7jF .phone-stat h3 { font-size: 21px !important; line-height: 1.4 !important; }

  /* 6. TEAM: each person's role, name, and email form one readable card. */
  #zedWXQ .phone-group--person {
    background: #ffffff; border-radius: 10px;
    padding: 22px 18px; gap: 10px;
  }
  #zedWXQ .phone-group--person .text-box,
  #zedWXQ .phone-group--person .text-box * { color: #232c36 !important; text-align: center !important; }
  #zedWXQ .phone-group--person .text-box p { font-size: 16px !important; }

  /* 7. BUTTONS, FORMS, AND THE CONTACT MAP */
  .page .grid-button, .page .layout-element__component--GridButton {
    width: 100% !important; max-width: 100% !important;
    min-width: 0 !important; min-height: 48px !important;
    white-space: normal !important; padding: 12px 18px !important;
  }
  .page .form, .page .form__control {
    width: 100% !important; max-width: 100% !important;
    min-width: 0 !important; height: auto !important;
  }
  .page input:not([type=checkbox]):not([type=hidden]), .page textarea, .page select {
    width: 100% !important; max-width: 100%; min-width: 0;
    font-size: 16px !important;
  }
  .page textarea { min-height: 140px; }
  .page .form__button { min-height: 48px; white-space: normal !important; }
  .page iframe, .page video { max-width: 100%; }
  .page .layout-element__component--GridMap { min-height: 320px !important; }
  .page .grid-map__frame { display: block; width: 100%; height: 340px !important; border: 0; }
  #ai-0c01H3 .phone-group--details { gap: 6px; }
  #ai-0c01H3 .phone-group--details h6 { font-size: 18px !important; }

  /* 8. MOBILE MENU: logo fits beside the hamburger; dropdown can scroll. */
  .block-header { position: relative; background: #232c36; }
  .block-header-layout-desktop { display: none !important; }
  .block-header-layout-mobile { display: grid !important; width: 100%; min-width: 0; padding: 12px 18px !important; }
  .block-header-layout-mobile .block-header__hamburger-menu {
    position: relative !important; width: 44px !important; height: 44px !important;
    margin: 0 !important; padding: 0 !important; border: 0;
    align-self: center; justify-self: end;
  }
  .block-header-layout-mobile .burger__bun,
  .block-header-layout-mobile .burger__meat { left: 10px; width: 24px; }
  .block-header-layout-mobile .burger__bun:first-child { top: 13px; }
  .block-header-layout-mobile .burger__meat { top: 21px; }
  .block-header-layout-mobile .burger__bun:last-child { top: 29px; }
  .block-header-layout-mobile .burger--open .burger__bun:first-child { top: 12px; }
  .block-header-layout-mobile .burger--open .burger__meat { width: 0; }
  .block-header-layout-mobile .block-header-logo { width: 180px !important; max-width: calc(100vw - 110px); }
  .block-header-layout-mobile .block-header-logo__image { display: block; width: 100%; max-width: 100%; height: auto !important; }
  .block-header-layout-mobile__dropdown--open { max-height: 75vh !important; overflow-y: auto !important; }
  .block-header-layout-mobile .block-header__nav { width: 100%; }
  .block-header-layout-mobile .item-content { overflow-wrap: anywhere; }

  /* 9. FOOTER: contact details together, certifications in two columns. */
  #zSiG-O .block-layout--layout.phone-footer-layout {
    display: flex !important; flex-direction: row !important; flex-wrap: wrap !important;
    gap: 24px 16px !important;
  }
  #zSiG-O .phone-group--footer {
    flex: 0 1 calc((100% - 16px) / 2);
    width: calc((100% - 16px) / 2); gap: 8px; align-items: center;
  }
  #zSiG-O .phone-footer-wide,
  #zSiG-O .block-layout > .layout-element:not(.phone-decoration) {
    flex: 0 0 100%; width: 100% !important;
  }
  #zSiG-O .text-box, #zSiG-O .text-box * { text-align: center !important; }
  #zSiG-O .text-box p, #zSiG-O .text-box li { font-size: 15px !important; line-height: 1.5 !important; }
  #zSiG-O .image-wrapper--layout { max-width: 180px !important; margin: 0 auto !important; }
  #zSiG-O .image-wrapper--layout .image__image { max-height: 120px !important; object-fit: contain !important; }
  #zSiG-O #z2uSYG { max-width: 230px !important; }
  #zSiG-O .social-icons { justify-content: center; }
  #zSiG-O .form__button { width: 100%; }
}

/* Small tablets: two columns for service cards, products, and team contacts. */
@media screen and (min-width: 640px) and (max-width: 920px) {
  .page .block-layout--layout.phone-card-layout {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  .page .block-layout--layout > .layout-element.phone-wide { grid-column: 1 / span 2 !important; }
  .page #ai-3dS6g2.precision-hero { --hero-height: 580px; }
}

/* Narrow phones: keep headings and statistics from becoming cramped. */
@media screen and (max-width: 360px) {
  .page { --phone-side-space: 16px; }
  .page .text-box h1 { font-size: 32px !important; }
  #zEj7jF .block-layout--layout.phone-card-layout { grid-template-columns: minmax(0, 1fr) !important; }
}

/* The conflict-minerals policy picture is a document, not a decorative backdrop. */
@media screen and (max-width: 920px) {
  #z6nUg_ .block-background { position: relative !important; inset: auto !important; }
  #z6nUg_ .block-background__image {
    position: relative !important; inset: auto !important;
    display: block; width: 100% !important; height: auto !important;
    object-fit: contain !important;
  }
  #z6nUg_ .block-background::after { display: none; }
  #z6nUg_ .block-layout { display: none !important; }
}