/*
 * VALTERRA TRADING responsive layout refinements.
 * Loaded after the base, slider, contact and navigation styles.
 * Desktop (over 900px) is deliberately left unchanged.
 */
@media (max-width: 900px) {
  .intro,
  .approach,
  .market-layout,
  .contact-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .intro > div,
  .approach-title,
  .steps,
  .market-layout > *,
  .contact-grid > div,
  .service-grid,
  .service {
    min-width: 0;
  }

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

  .site-header .brand {
    min-width: 0;
  }
}

@media (max-width: 600px) {
  /* Logo and navigation use separate, touch-friendly space. */
  .site-header {
    height: 76px;
    padding-inline: 5vw;
  }

  .site-header .brand {
    gap: 9px;
  }

  .site-header .brand-emblem {
    width: 42px;
    height: 42px;
  }

  .site-header .brand-name,
  .footer-brand .brand-name {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    white-space: nowrap;
    font-size: 11px;
    line-height: 1.3;
    letter-spacing: .1em;
  }

  .site-header .brand-name b,
  .footer-brand .brand-name b {
    font-size: 9px;
    font-weight: 500;
    letter-spacing: .24em;
    color: #d2a06e;
  }

  .site-header .menu-toggle {
    flex-shrink: 0;
    margin-left: 10px;
    min-width: 64px;
    min-height: 44px;
  }

  .site-header nav {
    top: 70px;
    right: 5vw;
    width: min(280px, 90vw);
  }

  /* Let the hero grow vertically instead of squeezing its contents. */
  .hero {
    height: auto;
    min-height: 100svh;
    padding: clamp(110px, 18svh, 145px) 6vw 52px;
  }

  .hero .hero-content {
    width: 100%;
    max-width: 100%;
  }

  .eyebrow {
    margin-bottom: 18px;
    font-size: 11px;
    line-height: 1.55;
    letter-spacing: .14em;
  }

  .hero h1 {
    font-size: clamp(38px, 10.8vw, 54px);
    line-height: 1.04;
    letter-spacing: -.055em;
  }

  .hero-copy {
    margin: 23px 0 25px;
    max-width: 45ch;
    font-size: 15.5px;
    line-height: 1.6;
  }

  .slider-controls {
    align-self: flex-start;
    margin-top: 30px;
    gap: 7px;
  }

  .slider-controls button {
    min-width: 44px;
    min-height: 44px;
    padding: 8px 10px;
    font-size: 12px;
  }

  /* Fluid headlines and comfortable reading measure on phones. */
  .section-pad {
    padding: 64px 6vw 70px;
  }

  .section-pad h2,
  .intro h2,
  .approach-title h2,
  .market-layout h2,
  .contact-grid h2 {
    font-size: clamp(32px, 9.1vw, 44px);
    line-height: 1.12;
    letter-spacing: -.045em;
    overflow-wrap: normal;
    word-break: normal;
    text-wrap: balance;
  }

  .section-label {
    font-size: 11px;
    line-height: 1.5;
    letter-spacing: .16em;
  }

  .intro {
    gap: 17px;
  }

  .intro > div > p,
  .market-copy > p,
  .contact-grid > div > p {
    font-size: 16px;
    line-height: 1.65;
  }

  .intro > div > p {
    margin-top: 23px;
  }

  /* Single-column capability cards rather than cramped mini-panels. */
  .service-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .service {
    min-height: 0;
    gap: 19px;
    padding: 28px 22px 31px;
    border-right: 0;
  }

  .service.featured {
    margin-top: 16px;
  }

  .service h3 {
    margin: 0;
    font-size: clamp(26px, 7vw, 32px);
    line-height: 1.2;
  }

  .service p {
    margin: 0;
    font-size: 15px;
    line-height: 1.65;
  }

  .approach {
    gap: 34px;
  }

  .approach-title h2 {
    margin-top: 18px;
  }

  .steps article {
    grid-template-columns: 34px minmax(0, 1fr);
    gap: 12px;
    padding: 23px 0;
  }

  .steps h3 {
    font-size: 21px;
    line-height: 1.3;
  }

  .steps p {
    font-size: 15px;
    line-height: 1.6;
  }

  .market-layout {
    margin-top: 24px;
    gap: 26px;
  }

  .market-copy {
    padding-top: 0;
  }

  .market-copy > p:first-child {
    margin-top: 0;
  }

  .tags {
    margin-top: 27px;
    gap: 8px;
  }

  .tags span {
    padding: 7px 12px;
    font-size: 12px;
  }

  .contact-grid {
    margin-top: 25px;
    gap: 25px;
  }

  .contact-grid > div > p {
    margin-top: 0;
  }

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

  .contact-form {
    gap: 17px;
    margin-top: 24px;
  }

  .contact-form input {
    min-height: 44px;
  }

  footer {
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
    padding: 42px 6vw;
  }

  .footer-brand .brand-emblem {
    width: 44px;
    height: 44px;
  }

  footer > div {
    flex-wrap: wrap;
    gap: 16px;
    justify-content: flex-start;
  }
}

@media (max-width: 350px) {
  .site-header .brand-emblem {
    width: 38px;
    height: 38px;
  }

  .site-header .brand-name {
    font-size: 10px;
  }

  .hero h1 {
    font-size: 38px;
  }

  .section-pad h2,
  .intro h2,
  .approach-title h2,
  .market-layout h2,
  .contact-grid h2 {
    font-size: 31px;
  }
}

@media (max-width: 600px) and (max-height: 640px) {
  .hero {
    padding-top: 108px;
    padding-bottom: 42px;
  }

  .slider-controls {
    margin-top: 23px;
  }
}