/* Phone and tablet adjustments for the local ARK template. */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

@media (max-width: 850px) {
  .header {
    padding-left: max(var(--pad), env(safe-area-inset-left));
    padding-right: max(var(--pad), env(safe-area-inset-right));
  }

  .brand, .hero-logo-name, .project-meta strong, .dialog-bar h2 {
    min-width: 0;
  }

  .menu-toggle, .dialog-close, .dialog-controls button, .back-top {
    min-width: 44px;
    min-height: 44px;
  }

  .mobile-nav {
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: calc(108px + env(safe-area-inset-top))
      max(24px, env(safe-area-inset-right))
      max(24px, env(safe-area-inset-bottom))
      max(24px, env(safe-area-inset-left));
  }

  .mobile-nav a, .mobile-nav > [data-open-quote] {
    gap: 16px;
    padding: 18px 0;
    min-height: 56px;
    font-size: clamp(21px, 4vw, 27px);
    line-height: 1.35;
  }

  .mobile-nav a > span, .mobile-nav > [data-open-quote] > span {
    flex-shrink: 0;
  }

  .mobile-nav p { margin-top: 28px; }

  .button-arrow {
    flex: 0 0 40px;
  }

  .quote-fields input, .quote-fields select, .quote-fields textarea {
    font-size: 16px;
    min-height: 48px;
    scroll-margin-block: 70px;
  }

  .quote-fields select {
    text-overflow: ellipsis;
  }

  .quote-dialog, .gallery-dialog {
    overscroll-behavior: contain;
    max-height: calc(100svh - 24px);
    max-height: calc(100dvh - 24px);
  }

  .quote-note, .quote-status {
    overflow-wrap: anywhere;
  }

  .dialog-bar h2 {
    line-height: 1.35;
    overflow-wrap: anywhere;
  }
}

@media (max-width: 600px) {
  :root { --pad: 24px; }

  .header {
    height: calc(82px + env(safe-area-inset-top));
    padding-top: env(safe-area-inset-top);
  }

  .header.is-scrolled {
    height: calc(72px + env(safe-area-inset-top));
  }

  .header .brand-name > span {
    font-size: 7px;
    letter-spacing: 1px;
  }

  .hero {
    min-height: min(680px, 100svh);
    background-position: 20% center;
  }

  .hero-content {
    padding-top: calc(132px + env(safe-area-inset-top));
    padding-bottom: 36px;
  }

  .hero .hero-logo {
    --logo-size: clamp(88px, 25vw, 148px);
    margin-bottom: 26px;
  }

  .hero-logo-name > span {
    font-size: clamp(8px, .058em, 15px);
  }

  .hero-slogan {
    font-size: clamp(27px, 6.8vw, 40px);
    line-height: 1.25;
  }

  .hero-description {
    max-width: 30ch;
    margin: 16px 0 25px;
    font-size: 14px;
    line-height: 1.6;
  }

  .hero-actions {
    width: 100%;
    gap: 10px;
  }

  .hero-actions .button {
    width: 100%;
    min-width: 0;
    max-width: none;
    min-height: 56px;
    padding: 8px 10px 8px 18px;
    gap: 12px;
    font-size: 13px;
    line-height: 1.4;
    text-align: left;
  }

  .hero-gallery-link {
    min-height: 44px;
    font-size: 13px;
  }

  .hero-bottom { margin-bottom: 24px; }

  .services { padding: 26px var(--pad); }

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

  .service-row li {
    min-height: 48px;
    padding: 10px 0;
    gap: 14px;
    align-items: baseline;
    border-bottom: 1px solid var(--line);
    font-size: 16px;
    line-height: 1.5;
  }

  .service-row li:last-child { border-bottom: 0; }
  .service-row li > span { flex-shrink: 0; font-size: 10px; }

  .spaces { padding-top: 38px; }
  .gallery-heading p { font-size: 13px; line-height: 1.6; }
  .project-meta { align-items: baseline; gap: 12px; }
  .project-meta strong { font-size: 17px; line-height: 1.4; }
  .project-meta > span { flex-shrink: 0; }
  .gallery-hint { font-size: 12px; }
  .gallery-more > button { min-height: 48px; font-size: 13px; }

  .quote-dialog {
    width: calc(100vw - 16px);
    max-width: 100%;
    max-height: calc(100svh - 16px);
    max-height: calc(100dvh - 16px);
    padding: 28px 20px max(24px, env(safe-area-inset-bottom));
  }

  .quote-dialog > .dialog-close {
    position: sticky;
    top: 0;
    float: right;
    width: 44px;
    height: 44px;
    margin: -12px -4px 6px 8px;
    box-shadow: 0 2px 10px #15201b15;
  }

  .quote-dialog > .eyebrow {
    min-height: 22px;
    font-size: 9px;
    letter-spacing: 1px;
    margin-right: 46px;
  }

  .quote-dialog > h2 { clear: both; font-size: 36px; }
  .quote-fields label { font-size: 12px; }
  .quote-fields label .field-optional, .quote-fields .field-hint { font-size: 11px; }
  .quote-fields textarea { min-height: 130px; }
  .quote-note { font-size: 12px; }
  .quote-save { min-height: 54px; font-size: 13px; }
  .quote-copy { min-height: 48px; font-size: 13px; }
  .quote-consultation-note { padding: 12px 14px; }

  .gallery-dialog {
    width: calc(100vw - 16px);
    max-width: 100%;
  }

  .gallery-dialog > .dialog-close { width: 44px; height: 44px; }
  .gallery-dialog > img { max-height: 60svh; }
  .dialog-controls button { width: 44px; height: 44px; }
  .dialog-controls > span { font-size: 12px; }
  .footer { padding-bottom: max(26px, env(safe-area-inset-bottom)); }
  .footer > p { font-size: 11px; }
  .back-top { font-size: 12px; }
}

@media (max-width: 360px) {
  :root { --pad: 20px; }
  .hero-content { padding-top: calc(120px + env(safe-area-inset-top)); }
  .hero-actions .button { font-size: 12px; }
  .service-row li { font-size: 15px; }
  .gallery-heading h2 { font-size: 34px; }
  .quote-dialog > h2 { font-size: 34px; }
}

@media (max-width: 850px) and (max-height: 500px) and (orientation: landscape) {
  .hero { min-height: 0; }
  .hero-content { padding-top: 120px; padding-bottom: 30px; }
  .mobile-nav { padding-top: 90px; }
}

@media (hover: none) {
  .button:hover, .project-card:hover img { transform: none; }
}