/* Phone-only refinements (max 767px). Desktop and tablets are untouched. */
.mobile-call { display: none !important; }

@media (max-width: 767px) {
  :root {
    --heading-h1-size: 2rem;
    --heading-h2-size: 1.65rem;
    --heading-h3-size: 1.2rem;
    --heading-h4-size: 1.1rem;
    --heading-h5-size: 1.05rem;
    --text-large-size: 1.02rem;
    --text-medium-size: .95rem;
    --text-regular-size: .93rem;
    --text-small-size: .82rem;
    --page-padding: 1.15rem;
    --section-padding-large: 2.5rem;
    --section-padding-medium: 2rem;
    --section-padding-small: 1.5rem;
    --gap-section-content: 1.6rem;
    --gap-grid-row: 1.1rem;
    --gap-element-large: 1.1rem;
    --gap-grid-column-card-3: .65rem;
    --gap-grid-column-card-4: .65rem;
    --gap-grid-column-4: .75rem;
    --gap-grid-column-2: .75rem;
    --card-padding-large: 1.25rem;
    --card-padding-xlarge: 1.25rem;
    --button-font-size: .92rem;
  }

  body { -webkit-text-size-adjust: 100%; }

  /* ---------- header: logo left, call button opposite ---------- */
  .navbar { min-height: 3.5rem; }
  .navbar-container { gap: .6rem; }
  .company-logo { height: 2.1rem; width: auto; }
  .mobile-call {
    display: inline-flex !important;
    margin-left: auto;
    padding: .5rem .85rem;
    font-size: .85rem;
    white-space: nowrap;
    gap: .4rem;
  }
  .mobile-call svg { width: 1rem; height: 1rem; flex: none; }

  /* ---------- promo (red zone) ---------- */
  #promo-zone section.section {
    background-image:
      radial-gradient(120% 55% at 50% 0%, rgba(255,255,255,.22), rgba(255,255,255,0) 62%),
      linear-gradient(180deg, rgba(0,0,0,0) 55%, rgba(0,0,0,.22) 100%);
    padding-top: calc(1.6rem + var(--navbar-offset, 0rem));
    padding-bottom: 2rem;
  }
  #promo-zone .tagline {
    margin: 0 auto;
    background: rgba(255,255,255,.14);
    border: 1px solid rgba(255,255,255,.45);
    border-radius: 999px;
    padding: .3rem .85rem;
    font-size: .68rem;
    letter-spacing: .14em;
    font-weight: 700;
    color: #fff;
  }
  #promo-zone h2 {
    font-size: 1.85rem;
    line-height: 1.12;
    font-weight: 800;
    text-wrap: balance;
  }
  #promo-zone .promo-colon { display: none; }
  #promo-zone .promo-accent {
    display: table;
    margin: .5rem auto 0;
    padding: .02em .4em .08em;
    background: #FFF1CC;
    color: #A62B24;
    border-radius: .5rem;
    transform: rotate(-2deg);
    box-shadow: 0 6px 16px rgba(0,0,0,.25);
    font-size: 1.2em;
    white-space: nowrap;
  }
  #promo-zone .promo-old { text-decoration: line-through; opacity: .8; }
  #promo-zone .promo-new {
    display: inline-block;
    font-size: 1.9rem;
    font-weight: 800;
    line-height: 1;
    color: #FFF1CC;
    margin: 0 .1em;
    vertical-align: -.1em;
  }
  #promo-zone .button-group { width: 100%; }
  #promo-zone .button-group .button {
    width: 100%;
    max-width: 19rem;
    padding-top: .85rem;
    padding-bottom: .85rem;
    font-weight: 700;
    box-shadow: 0 8px 20px rgba(0,0,0,.25);
  }
  /* two jackets per row */
  #promo-zone .grid-column-card-4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .65rem;
  }
  #promo-zone .gallery-item-media-wrapper {
    position: relative;
    border-radius: 1rem;
    overflow: hidden;
    box-shadow: 0 8px 18px rgba(0,0,0,.28);
    border: 2px solid rgba(255,255,255,.25);
  }
  #promo-zone .gallery-item-media-wrapper::after {
    content: "-10$";
    position: absolute;
    top: .5rem;
    right: .5rem;
    background: #FFF1CC;
    color: #A62B24;
    font-weight: 800;
    font-size: .8rem;
    line-height: 1;
    padding: .35rem .55rem;
    border-radius: 999px;
    box-shadow: 0 3px 8px rgba(0,0,0,.25);
    pointer-events: none;
  }
  html[lang^="en"] #promo-zone .gallery-item-media-wrapper::after { content: "-$10"; }

  /* ---------- hero ---------- */
  #sc-hero-header-horizontal .grid-column-2 { gap: 1.25rem; }
  #sc-hero-header-horizontal h1 { font-size: 1.95rem; line-height: 1.1; }
  #sc-hero-header-horizontal .media-wrapper.aspect-portrait {
    aspect-ratio: 16 / 10 !important;
    max-height: 13rem;
    border-radius: 1rem;
    overflow: hidden;
  }
  #sc-hero-header-horizontal .button-group {
    flex-direction: column;
    align-items: stretch;
    gap: .6rem;
  }
  #sc-hero-header-horizontal .button-group .button { width: 100%; }

  /* ---------- services: compact two-up cards ---------- */
  #sc-feature-list-section-vertical .grid-column-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: .65rem;
    row-gap: .65rem;
  }
  #sc-feature-list-section-vertical .grid-column-2 > .stack {
    gap: .6rem;
    background: #fff;
    border-radius: 1rem;
    padding: .5rem .5rem .8rem;
    box-shadow: 0 2px 12px rgba(7,7,7,.07);
  }
  #sc-feature-list-section-vertical .media-wrapper { border-radius: .75rem; overflow: hidden; }
  #sc-feature-list-section-vertical .aspect-landscape { aspect-ratio: 4 / 3; }
  #sc-feature-list-section-vertical h3 { font-size: 1rem; line-height: 1.2; }
  #sc-feature-list-section-vertical p { font-size: .8rem; line-height: 1.4; }
  #sc-feature-list-section-vertical .stack.fill-height { padding: 0 .3rem; gap: .35rem; }

  /* ---------- why us: icon cards, two-up ---------- */
  #sc-feature-list-section-vertical-2 .grid-column-4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .65rem;
  }
  #sc-feature-list-section-vertical-2 .grid-column-4 > .stack {
    gap: .6rem;
    background: var(--scheme1-background-secondary);
    border-radius: 1rem;
    padding: 1rem .9rem 1.1rem;
  }
  #sc-feature-list-section-vertical-2 h4 { font-size: .98rem; line-height: 1.2; }
  #sc-feature-list-section-vertical-2 p { font-size: .8rem; line-height: 1.4; }

  /* ---------- gallery: tighter two-up ---------- */
  #sc-gallery-list-vertical .grid-column-card-3 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .5rem;
  }
  #sc-gallery-list-vertical .media-wrapper { border-radius: .75rem; overflow: hidden; }

  /* ---------- steps ---------- */
  #sc-process-section-list-vertical { background: var(--scheme1-background-secondary); }
  #sc-process-section-list-vertical section.section { background: transparent; }
  #sc-process-section-list-vertical h4 { font-size: 1.02rem; }

  /* ---------- faq / form / contact / footer ---------- */
  #sc-faq-flat-vertical h2, #sc-contact-foreground-card-horizontal h2,
  #sc-contact-list-vertical h2 { font-size: 1.55rem; }
  #sc-contact-foreground-card-horizontal form { gap: .9rem; }
  #sc-contact-foreground-card-horizontal .media-wrapper { max-height: 12rem; }
  #sc-contact-foreground-card-horizontal .media-wrapper img { max-height: 12rem; object-fit: cover; }
  #sc-footer-menu-horizontal section.section { padding-top: 2rem; padding-bottom: 1.5rem; }

  h1, h2, h3, h4 { text-wrap: balance; }
}