/* Official Wideworld branding and supplied private-label photography */
.site-header {
  padding-top: 12px;
  padding-bottom: 12px;
}

.brand {
  display: flex;
  align-items: center;
  background: #fff;
  padding: .35rem .6rem;
  line-height: 1;
}

.brand img {
  display: block;
  width: clamp(220px, 27vw, 360px);
  height: auto;
}

.footer-brand {
  width: max-content;
  max-width: 260px;
}

.footer-brand img {
  width: 240px;
}

.private-label-images figure:last-child img {
  object-position: center;
}

@media (max-width: 720px) {
  .site-header {
    padding: 10px 14px;
  }

  .brand {
    padding: .25rem .4rem;
  }

  .brand img {
    width: min(56vw, 250px);
  }
}

/* Social responsibility and refreshed story image */
.story-photo { margin: 0; overflow: hidden; min-height: 420px; }
.story-photo img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center 35%; }
.responsibility { padding: clamp(64px, 8vw, 120px) max(5vw, 24px); background: #edf2f5; color: #122433; }
.responsibility-intro { max-width: 780px; margin: 0 auto 40px; }
.responsibility-intro h2 { font-family: 'Barlow Condensed', sans-serif; font-size: clamp(2.5rem, 5vw, 4.7rem); line-height: 1.02; text-transform: uppercase; margin: 12px 0 20px; }
.responsibility-intro > p:last-child { font-size: 1.1rem; line-height: 1.65; }
.responsibility-principles { max-width: 1100px; margin: auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.responsibility-principles > div { padding: 26px; background: white; border-top: 4px solid #d9a73a; }
.responsibility-principles strong { font-size: 1.08rem; }
.responsibility-principles p { line-height: 1.55; }
.responsibility-contact { max-width: 1100px; margin: 28px auto 0; line-height: 1.6; }
.responsibility a { color: #173f6a; }
.compliance-content { max-width: 900px; margin: 0 auto; overflow-wrap: anywhere; }
.compliance-content h2 { font-size: clamp(2rem, 4vw, 3rem); line-height: 1.15; margin: 2rem 0 1.25rem; }
.compliance-content > h2:first-child { margin-top: 0; }
.compliance-content p { font-size: 1rem; line-height: 1.7; margin: 0 0 1.25rem; }
@media (max-width: 720px) { .responsibility-principles { grid-template-columns: 1fr; } .story-photo { min-height: 320px; } }

.contact-details { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 770px; gap: 18px; margin: 38px auto 0; text-align: left; }
.contact-details > div { padding: 25px; background: rgba(255,255,255,.09); border: 1px solid rgba(255,255,255,.2); }
.contact-details strong { display: block; color: #f6c744; margin-bottom: 10px; }
.contact-details address { font-style: normal; line-height: 1.55; }
.contact-details span { display: block; margin-top: 12px; color: #d6e3ef; }
.contact-details a { color: #fff; text-decoration: underline; text-underline-offset: 3px; overflow-wrap: anywhere; }
@media (max-width: 720px) { .contact-details { grid-template-columns: 1fr; } }

/* Keep both blue lifestyle portraits framed around the model and garment. */
.hero .image-frame { background: #88bddc; }
.hero .image-frame img { object-fit: cover; object-position: center 22%; }
.production-card-lifestyle { background: #b7d4e8; }
.production-card-lifestyle img { object-position: center 10%; }

/* Show the actual navy mockneck from the four-color 280M presentation. */
.mockneck-silhouette { width: 100%; height: 100%; min-height: 430px; background: #f5f5f4 url('assets/280m-womens-mockneck.jpg') no-repeat right bottom; background-size: 390% auto; }
@media (max-width: 760px) { .mockneck-silhouette { min-height: 420px; background-size: 350% auto; } }

.private-label-images .hangtag-garment img { object-position: 68% center; }
.private-label-images .hangtag-garment:after { inset: 72% 0 0; }

.production-grid.production-grid-three { grid-template-columns: repeat(3,minmax(0,1fr)); grid-auto-rows: 340px; }
.production-grid-three .production-card:nth-child(n) { grid-column:auto; grid-row:auto; }
.production-grid-three .production-card figcaption { flex-direction:column; align-items:flex-start; }
.production-grid-three .production-card figcaption strong { text-align:left; }
.inquiry-form { max-width:770px; margin:36px auto 0; padding:32px; background:#fff; color:#08121f; text-align:left; }
.inquiry-form h3 { font-size:2.4rem; line-height:1.1; }
.inquiry-form p { line-height:1.55; }
.inquiry-fields { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; }
.inquiry-fields label { display:flex; flex-direction:column; gap:8px; font-weight:600; }
.inquiry-fields input,.inquiry-fields select,.inquiry-fields textarea { width:100%; min-width:0; padding:12px; font:inherit; color:#08121f; background:#f4f7fa; border:1px solid #8593a3; border-radius:0; }
.full-field { grid-column:1/-1; }
.inquiry-confirm { display:flex; align-items:flex-start; gap:10px; margin:22px 0; }
.inquiry-confirm input { width:20px; height:20px; flex-shrink:0; }
.inquiry-form .draft-notice { color:#455363; font-size:14px; }
.inquiry-form pre { white-space:pre-wrap; overflow-wrap:anywhere; font:inherit; padding:16px; background:#edf2f5; }
.inquiry-form button { cursor:pointer; font:inherit; }
.inquiry-form :focus-visible { outline:3px solid #1764a2; outline-offset:3px; }
@media(max-width:960px){ .production-grid.production-grid-three { grid-template-columns:1fr; grid-auto-rows:340px; } }
@media(max-width:600px){ .inquiry-form { padding:22px; } .inquiry-fields { grid-template-columns:1fr; } }

.experience-note { margin-top:32px; padding:30px; background:var(--ink); color:#fff; border-left:4px solid var(--yellow); }
.experience-note h3 { font-size:2.3rem; line-height:1.1; color:var(--yellow); }
.experience-note p { max-width:850px; margin:16px 0 0; font-size:1.1rem; line-height:1.65; color:#d6e3ef; }

.form-honeypot { display:none; }
.inquiry-form .form-privacy { color:#455363; font-size:14px; }