/* Brand refinements: give the supplied navy-and-blue mark a calm, white field. */
.header { height: clamp(96px, 7vw, 132px); gap: 24px; white-space: nowrap; }
/* Larger wordmark, capped responsively so the navigation remains usable. */
.logo img { width: min(380px, 28vw); height: auto; }
.header nav { gap: 22px; white-space: nowrap; }
.header nav a { font-size: 12px; }

/* Supplied textile image with a dark reading field for the hero copy. */
.hero-photo {
  background-image: url('assets/hero-textile.jpg');
  background-position: center;
  filter: saturate(.82) contrast(1.05) brightness(.72);
}
.hero-shade {
  background: linear-gradient(90deg, rgba(4,15,29,.88) 0%, rgba(4,15,29,.68) 38%, rgba(4,15,29,.24) 67%, rgba(4,15,29,.10) 100%), linear-gradient(0deg, rgba(4,15,29,.32), transparent 58%);
}
footer {
  background: #fff;
  color: var(--navy);
  border-top: 1px solid var(--line);
}
footer img { width: 205px; padding: 0; background: transparent; }
footer p, footer span { color: #526178; }
footer { display: block; padding: 20px 8vw; text-align: center; font-size: 10px; letter-spacing: .03em; }

@media (max-width: 600px) {
  .header { height: 92px; }
  .logo img { width: min(300px, 70vw); height: auto; }
  .header nav.open { top: 92px; }
}

.contact-info { min-width: 255px; border-left: 1px solid rgba(255,255,255,.36); padding-left: 36px; }
.contact-label { font: 500 10px 'DM Mono', monospace; letter-spacing: .08em; text-transform: uppercase; margin: 0 0 14px; }
.contact-info ul { list-style: none; padding: 0; margin: 0 0 28px; }
.contact-info li { font-size: 11px; line-height: 1.65; margin: 6px 0; }
.contact-info li::before { content: '— '; color: #8fc7e5; }
.contact-details { border-top: 1px solid rgba(255,255,255,.36); padding-top: 18px; margin: 24px 0 28px; }
.contact-details dl { margin: 0; }
.contact-details dl div { display: grid; grid-template-columns: 84px 1fr; padding: 7px 0; }
.contact-details dt { font: 500 10px 'DM Mono', monospace; color: #a6c9e6; }
.contact-details dd { margin: 0; font-size: 11px; color: #fff; }
@media (max-width: 800px) { .contact-info { border-left: 0; padding-left: 0; } }

/* Supplied mesh, color-treated for SEON's material palette and shown as a dimensional surface. */
.fabric-photo {
  background-image: linear-gradient(135deg, rgba(65, 161, 151, .83), rgba(20, 59, 82, .46)), url('assets/spacer-mesh-source.png');
  background-size: cover, 42% auto;
  background-position: center, center;
  background-repeat: no-repeat, repeat;
  filter: none;
  position: relative;
  overflow: hidden;
}
.fabric-photo::after {
  content: "";
  position: absolute;
  width: 110%; height: 64%; left: 7%; top: 16%;
  background: inherit;
  background-size: 42% auto;
  background-position: center;
  border-radius: 50% 8% 46% 10% / 18% 12% 36% 20%;
  transform: rotate(-14deg) skewX(-9deg);
  box-shadow: -28px 32px 44px rgba(4, 21, 31, .42), inset 16px 14px 36px rgba(235, 255, 246, .24), inset -18px -16px 30px rgba(0, 23, 31, .45);
}

/* Process imagery */
.yarn {
  background: url('assets/yarn-cones.png') center / cover no-repeat;
}
.machine {
  background: url('assets/knitting-machine.png') center / cover no-repeat;
}
.testing {
  background: linear-gradient(135deg, rgba(16,43,82,.15), rgba(67,169,220,.04)), url('https://www.tktk.ee/wp-content/uploads/2022/02/DSF2728_1_vaike-1024x683.jpg') center / cover no-repeat;
}
.mesh {
  background: url('assets/finishing-mesh-editorial.jpg') center / cover no-repeat;
}
.color {
  background: url('assets/pantone-color-guide.png') center / cover no-repeat;
}

/* Natural spacer mesh: soft neutral mint, without illustration overlays. */
.fabric-photo {
  background-image: linear-gradient(115deg, rgba(76, 159, 150, .22), rgba(6, 34, 49, .08)), url('https://ecdn6.globalso.com/public/img/2025-06-12/4459510739_1.png');
  background-size: cover;
  background-position: center;
}
.fabric-photo::after { display: none; }

.quality-steps { margin: 31px 0; border-top: 1px solid var(--line); }
.quality-steps div { display: grid; grid-template-columns: 42px 1fr; gap: 9px; padding: 12px 0; border-bottom: 1px solid var(--line); align-items: baseline; }
.quality-steps b { font: 10px 'DM Mono', monospace; color: var(--blue); }
.quality-steps span { font-size: 11px; font-weight: 700; color: var(--navy); }
.quality-tags { margin: 24px 0 0; }
.quality-tags span { color: var(--navy); border-color: #9aa6b5; }
.contact-brand { margin: 0 0 16px; font-size: 15px; letter-spacing: .05em; font-weight: 800; color: #fff; }
.contact-details { margin: 0; }
.contact-details dl div.office { padding-top: 13px; }
.contact-details dd { line-height: 1.55; }

/* Keep the full navigation visible on tablets; switch to the menu only on phones. */
@media (min-width: 601px) and (max-width: 800px) {
  .header nav { display: flex; gap: 12px; }
  .header nav a { font-size: 10px; }
  .header-button { display: inline-flex; font-size: 9px; padding: 10px 12px; gap: 14px; }
  .menu { display: none; }
  .cards { grid-template-columns: repeat(5, 1fr); gap: 8px; }
  .card-art { height: 110px; }
  .cards h3 { margin: 12px 9px 6px; font-size: 9px; }
  .cards p { margin: 0 9px; font-size: 9px; }
}