/* ==========================================================================
   HOSPITALITY PAGE (Figma node 216:2, "hospitality/sheets") — 2026-09-04
   Basis: 1440x10424 across 14 sections (Hero 860 + Stats 366 + Belief 368 +
   Intro 1275 + Making 1075 + Data 368 + Why-source 790 + Factory 640 +
   Sampling 981 + Range 1096 + Proof 716 + Eco 801 + CTA 668 + Footer 420 = 10424,
   sums exactly). FOOTER + hero's own .nav reuse css/about.css verbatim (both are
   pixel-identical to About Us's own in Figma — see hospitality.html comments).
   Card-style sections (Hero, Belief, Data card, Factory feature, Sampling's top
   card, Proof, Eco, CTA) use absolute positioning within an explicit-height box;
   content-flow sections (Stats, Intro, Making, Why-source, Range) use normal flow
   with padding/gap, same split rationale as inquiry.css.
   ========================================================================== */

/* -------------------------------- HERO (216:3) -------------------------------- */

.hosp-hero {
  position: relative;
  width: 100%;
  height: var(--h-hero);           /* same 860px basis as About Us's own hero */
  overflow: hidden;
  border-radius: 0 0 14px 14px;
  background: linear-gradient(180deg, #4a3826 0%, #2c2016 60%, #160f08 100%);
}
.hosp-hero__bg { position: absolute; inset: 0; }
.hosp-hero__bg img { width: 100%; height: 100%; object-fit: cover; }
.hosp-hero__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(157.77deg, rgba(36, 30, 22, 0.7) 8.574%, rgba(138, 115, 84, 0) 75%);
}
.hosp-hero__eyebrow-left,
.hosp-hero__eyebrow-right {
  position: absolute;
  top: 17.442%;                     /* 150px / 860px */
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 11px;
  letter-spacing: 0.24em;
  color: rgba(255, 255, 255, 0.82);
  white-space: nowrap;
}
.hosp-hero__eyebrow-left { left: 8.333%; }
.hosp-hero__eyebrow-right { right: 8.333%; text-decoration: none; }
.hosp-hero__rule {
  position: absolute;
  left: 8.333%;
  width: 83.333%;
  top: 21.512%;                     /* 185px / 860px */
  height: 1px;
  background: rgba(255, 255, 255, 0.14);
}
.hosp-hero__heading {
  position: absolute;
  left: 50%;
  top: 34.884%;                     /* 300px / 860px */
  transform: translateX(-50%);
  width: 77.778%;
  text-align: center;
  font-family: var(--font-display);
  font-weight: 400;
  /* min() of a width basis and a height basis, not clamp() on width alone. This
     heading's SIZE was width-driven while its `top` — and the sub-line's below it —
     are percentages of a hero whose height is viewport-driven. On a laptop-shaped
     window (wide but short) the type stayed large while the vertical space shrank, so
     the two lines grew straight through the sub-line: measured 19-39px of overlap at
     1280x600 through 1600x700. Shrinking with whichever dimension is tighter fixes it
     at every aspect ratio — same fix as --h-home-sheet and .mission1__heading. */
  font-size: clamp(36px, min(7.5vw, 12vh), 108px);
  line-height: 0.9;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: #fff;
}
.hosp-hero__sub {
  position: absolute;
  left: 50%;
  top: 64%;                         /* was 60% (516px / 860px) — dropped 2026-09-08 per
                                       Arina ("lower"), which also buys clearance under
                                       the heading above; see the note on its size. */
  transform: translateX(-50%);
  width: 100%;
  text-align: center;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 16px;
  color: rgba(255, 255, 255, 0.9);
}

/* -------------------------------- STATS (216:15) -------------------------------- */

.hosp-stats {
  display: flex;
  gap: 40px;
  justify-content: center;
  padding: 80px 60px;
  background: var(--color-cream);
  text-align: center;
}
.hosp-stat { flex: 1 1 0; max-width: 373px; padding: 0 20px; }
.hosp-stat__num {
  margin: 0 0 14px;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(40px, 5vw, 72px);
  line-height: 1;
  color: #2a231c;
}
.hosp-stat__label {
  margin: 0;
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 13px;
  line-height: 1.5;
  color: #6d6153;
}

/* -------------------------------- BELIEF (216:25) -------------------------------- */

.hosp-belief {
  padding: 0 0 40px;
  background: var(--color-cream);
}
.hosp-belief__panel {
  position: relative;
  width: 100%;
  min-height: 368px;
  overflow: hidden;
  padding: 40px 80px;
  background: linear-gradient(139.57deg, rgb(115, 152, 176) 0%, rgb(77, 86, 92) 53.846%, rgb(29, 29, 32) 76.923%);
}
.hosp-belief__bg { position: absolute; inset: 0; }
.hosp-belief__bg img { width: 100%; height: 100%; object-fit: cover; opacity: 0.2; }
.hosp-belief__row {
  position: relative;
  display: flex;
  justify-content: space-between;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 11px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.72);
}
.hosp-belief__quote {
  position: relative;
  max-width: 350px;
  margin: 90px auto 0;
  text-align: center;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.2;
  color: #fff;
}

/* -------------------------------- INTRO — WHY GO GREEN (216:32) -------------------------------- */

.hosp-intro {
  padding: 44px 8.333% 0;
  background: var(--color-cream);
}
.hosp-intro__head { max-width: 1200px; margin: 0 auto; text-align: center; }
.hosp-intro__eyebrow {
  margin: 0 0 20px;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 11px;
  letter-spacing: 0.24em;
  color: var(--color-ink);
}
.hosp-intro__heading {
  margin: 0 0 24px;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(28px, 3.5vw, 44px);
  line-height: 1.08;
  text-transform: uppercase;
  color: #2a231c;
}
.hosp-intro__body {
  max-width: 988px;
  margin: 0 auto 20px;
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 15px;
  line-height: 1.7;
  color: #6d6153;
}
.hosp-intro__body--wide { max-width: 1000px; }
.hosp-intro__cta {
  display: inline-block;
  margin-top: 8px;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 11px;
  letter-spacing: 0.22em;
  color: var(--color-ink);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.hosp-intro__imgstack {
  position: relative;
  left: 50%;
  width: 100vw;
  transform: translateX(-50%);
  margin: 40px 0 0;
  overflow: hidden;
}
.hosp-intro__imgstack img { width: 100%; height: auto; display: block; aspect-ratio: 1440 / 722; object-fit: cover; }
.hosp-intro__imgcaption {
  position: absolute;
  left: 16px;
  bottom: 16px;
  margin: 0;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 9.5px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.85);
}

/* -------------------------------- THE MAKING (216:43) -------------------------------- */

.hosp-making { padding: 64px 5.556% 0; background: var(--color-cream); }
.hosp-making__head { margin: 0 0 64px; }
.hosp-making__hrow { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 22px; }
.hosp-making__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(40px, 6vw, 86px);
  letter-spacing: 0.02em;
  color: #2a231c;
  white-space: nowrap;
}
.hosp-making__meta {
  margin: 0;
  text-align: right;
  font-family: var(--font-body);
  font-size: 11px;
  letter-spacing: 0.24em;
  white-space: nowrap;
}
.hosp-making__meta p:first-child { margin: 0 0 6px; color: #9c8e7c; }
.hosp-making__meta p:last-child { margin: 0; color: #6d6153; }
.hosp-making__rule { height: 1px; background: rgba(42, 35, 28, 0.14); }

.hosp-cap-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px 90px;
  margin-bottom: 64px;
}
.hosp-cap { display: flex; gap: 22px; align-items: flex-start; }
.hosp-cap__icon { flex-shrink: 0; width: 30px; height: 30px; margin-top: 4px; border-radius: 50%; }
.hosp-cap__icon--ring1 { width: 28px; height: 28px; border: 1px solid rgba(36, 30, 22, 0.55); }
.hosp-cap__icon--ring2 { width: 28px; height: 28px; background: #241e16; }
.hosp-cap__icon--moon-waxing { background: linear-gradient(90deg, #241e16 50%, transparent 50%); border: 1px solid rgba(36, 30, 22, 0.55); }
.hosp-cap__icon--moon-cycle1 { border: 1.3px solid #8b8171; position: relative; }
.hosp-cap__icon--moon-cycle1::after { content: ''; position: absolute; inset: 35%; border-radius: 50%; background: #8b8171; }
.hosp-cap__icon--moon-cycle2 { border: 1.3px solid #868179; position: relative; }
.hosp-cap__icon--moon-cycle2::after { content: ''; position: absolute; inset: 17%; border-radius: 50%; background: #241e16; }
.hosp-cap__icon--marker { width: 40px; height: 40px; border: 1px solid #8b8171; position: relative; }
.hosp-cap__icon--marker::after { content: ''; position: absolute; inset: 26%; border-radius: 50%; background: #3a342c; }
.hosp-cap__col { display: flex; flex-direction: column; gap: 8px; }
.hosp-cap__kicker { margin: 0; font-family: var(--font-body); font-weight: 400; font-size: 10px; letter-spacing: 0.24em; text-transform: uppercase; color: #9c8e7c; }
.hosp-cap__title { margin: 0; font-family: var(--font-display); font-weight: 400; font-size: 22px; letter-spacing: 0.03em; color: #2a231c; }
.hosp-cap__body { margin: 0; font-family: var(--font-body); font-weight: 300; font-size: 14px; line-height: 1.65; color: #6d6153; }

.hosp-dyes { padding: 26px 0 90px; display: flex; flex-direction: column; gap: 26px; }
.hosp-dyes__label { margin: 0; font-family: var(--font-body); font-weight: 400; font-size: 10px; letter-spacing: 0.24em; text-transform: uppercase; color: #9c8e7c; }
.hosp-dyes__intro { margin: 0; max-width: 860px; font-family: var(--font-body); font-weight: 300; font-size: 14px; line-height: 1.65; color: #6d6153; }
.hosp-dye-benefits { display: grid; grid-template-columns: repeat(4, 1fr); gap: 34px 60px; }
.hosp-dye-benefit__title { margin: 0 0 10px; font-family: var(--font-display); font-weight: 400; font-size: 22px; letter-spacing: 0.03em; color: #2a231c; }
.hosp-dye-benefit__body { margin: 0; font-family: var(--font-body); font-weight: 300; font-size: 14px; line-height: 1.65; color: #6d6153; }

/* -------------------------------- DATA CARD (216:97) -------------------------------- */

.hosp-data-wrap { padding: 40px 5.556%; background: var(--color-cream); }
.hosp-data-card {
  position: relative;
  max-width: 1440px;
  margin: 0 auto;
  min-height: 240px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: 14px;
  padding: 36px 44px;
  background: #a89478;
}
.hosp-data-card__content { position: relative; text-align: center; max-width: 430px; }
.hosp-data-card__pill {
  display: inline-block;
  margin: 0 0 16px;
  padding: 6px 20px;
  border-radius: 20px;
  background: #d4d0c8;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 10px;
  letter-spacing: 0.2em;
  color: var(--color-ink);
}
.hosp-data-card__num {
  margin: 0 0 16px;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 52px;
  line-height: 1;
  color: #fff;
}
.hosp-data-card__body {
  margin: 0;
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 12.5px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.85);
}
.hosp-data-card__cotton {
  position: absolute;
  right: 40px;
  top: 50%;
  transform: translateY(-50%) rotate(-56.66deg);
  width: 200px;
  opacity: 0.6;
}
.hosp-data-card__cotton img { width: 100%; display: block; }
.hosp-data-card__deco { position: absolute; top: 0; bottom: 0; pointer-events: none; }
.hosp-data-card__deco--left { left: 16%; }
.hosp-data-card__deco--right { right: 6%; }
.hosp-data-card__deco span { position: absolute; border: 1px solid rgba(139, 129, 113, 0.4); }
.hosp-data-card__deco--left span:nth-child(1) { top: 40%; left: 0; width: 94px; height: 102px; }
.hosp-data-card__deco--left span:nth-child(2) { top: 0; left: 60px; width: 63px; height: 68px; }
.hosp-data-card__deco--right span:nth-child(1) { top: 20%; right: 0; width: 94px; height: 100px; }
.hosp-data-card__deco--right span:nth-child(2) { top: 45%; right: 70px; width: 84px; height: 59px; }

/* -------------------------------- WHY SOURCE WITH US (216:110) -------------------------------- */

.hosp-why-source {
  display: flex;
  gap: 90px;
  align-items: center;
  padding: 90px 8.333%;
  background: var(--color-cream);
}
.hosp-why-source__img { flex-shrink: 0; width: 420px; height: 480px; border-radius: 14px; overflow: hidden; }
.hosp-why-source__img img { width: 100%; height: 100%; object-fit: cover; }
.hosp-why-source__right { flex: 1 1 0; min-width: 0; }
.hosp-why-source__eyebrow { margin: 0 0 20px; font-family: var(--font-body); font-weight: 400; font-size: 11px; letter-spacing: 0.24em; color: #9c8e7c; }
.hosp-why-source__heading { margin: 0 0 30px; font-family: var(--font-display); font-weight: 400; font-size: clamp(32px, 4vw, 56px); line-height: 1; color: #2a231c; }

.hosp-accordion__rule { height: 1px; background: rgba(42, 35, 28, 0.14); }
.hosp-accordion__item { padding: 22px 0; }
.hosp-accordion__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
  text-align: left;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 23px;
  color: #2a231c;
}
.hosp-accordion__chevron {
  flex-shrink: 0;
  width: 13px;
  height: 7px;
  margin-left: 20px;
  background: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13.3' height='6.5' viewBox='0 0 13.3 6.49613' fill='none'%3E%3Cpath d='M0.65 0.65L6.65 5.65L12.65 0.65' stroke='%232A231C' stroke-width='1.3' stroke-linecap='round'/%3E%3C/svg%3E");
  transition: transform 0.25s ease;
}
.hosp-accordion__item.is-open .hosp-accordion__chevron { transform: rotate(180deg); }
.hosp-accordion__body {
  display: grid;
  grid-template-rows: 0fr;
  margin: 0;
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 14px;
  line-height: 1.65;
  color: #6d6153;
  transition: grid-template-rows 0.3s ease;
  overflow: hidden;
}
.hosp-accordion__body:not(:empty) { display: block; height: 0; opacity: 0; transition: height 0.3s ease, opacity 0.3s ease, margin-top 0.3s ease; }
.hosp-accordion__item.is-open .hosp-accordion__body:not(:empty) { height: auto; opacity: 1; margin-top: 16px; }

/* -------------------------------- FACTORY FEATURE (216:138) -------------------------------- */

.hosp-factory-wrap { padding: 0 0 40px; background: var(--color-cream); }
.hosp-factory-feature {
  position: relative;
  width: 100%;
  min-height: 400px;
  aspect-ratio: 1440 / 640;
  overflow: hidden;
}
.hosp-factory-feature__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: #000; }
.hosp-factory-feature__scrim { position: absolute; inset: 0; background: linear-gradient(161.57deg, rgba(58, 44, 30, 0.25) 0%, rgba(36, 28, 21, 0.25) 42.857%, rgba(23, 16, 9, 0.25) 71.429%); transition: opacity 0.3s ease; }
.hosp-factory-feature.is-playing .hosp-factory-feature__scrim,
.hosp-factory-feature.is-playing .hosp-factory-feature__text,
.hosp-factory-feature.is-playing .hosp-factory-feature__play {
  opacity: 0;
  pointer-events: none;
}
.hosp-factory-feature__text {
  position: absolute;
  left: 8.333%;
  bottom: 8%;
  max-width: 54%;
  display: flex;
  flex-direction: column;
  gap: 14px;
  transition: opacity 0.3s ease;
}
.hosp-factory-feature__caption {
  margin: 0;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 11px;
  letter-spacing: 0.24em;
  color: rgba(255, 255, 255, 0.75);
}
.hosp-factory-feature__heading {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(22px, 3vw, 38px);
  line-height: 1.06;
  text-transform: uppercase;
  color: #fff;
}
.hosp-factory-feature__play {
  position: absolute;
  right: 8.333%;
  bottom: 8%;
  width: 74px;
  height: 74px;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
  transition: opacity 0.3s ease;
}
.hosp-factory-feature__play svg { width: 100%; height: 100%; }

/* -------------------------------- SAMPLING (216:143) -------------------------------- */

.hosp-sampling { display: flex; flex-direction: column; gap: 40px; padding: 90px 5.556%; background: var(--color-cream); }
.hosp-sampling__card {
  position: relative;
  width: 100%;
  aspect-ratio: 1280 / 478;
  min-height: 340px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  overflow: hidden;
  border-radius: 14px;
  padding: 36px 40px;
  text-align: center;
}
.hosp-sampling__bg { position: absolute; inset: 0; }
.hosp-sampling__bg img { width: 100%; height: 100%; object-fit: cover; opacity: 0.9; }
.hosp-sampling__card::before { content: ''; position: absolute; inset: 0; background: #241e16; opacity: 0.35; }
/* The ::before above never actually darkened anything: a pseudo-element is its host's
   FIRST child, so it paints before .hosp-sampling__bg and the photo covers it. The
   markup already carries an empty <div class="hosp-sampling__scrim"> for this job —
   it sits after the image and before the text — but it had no rule at all, so the card
   has been running with no scrim and cream text straight onto a bright, busy photo.
   Styling the element that was built for it (2026-09-09, per Arina: "make bg overlay
   dark semitransparent so text is better readable"). */
.hosp-sampling__scrim {
  position: absolute;
  inset: 0;
  background: #241e16;
  opacity: 0.42;
  pointer-events: none;
}
.hosp-sampling__eyebrow { position: relative; margin: 0; font-family: var(--font-body); font-weight: 400; font-size: 11px; letter-spacing: 0.24em; color: #fdfaf2; }
.hosp-sampling__heading { position: relative; margin: 0; font-family: var(--font-display); font-weight: 400; font-size: clamp(28px, 3.5vw, 42px); text-transform: uppercase; color: #fdfaf2; }
.hosp-sampling__body { position: relative; margin: 0; max-width: 524px; font-family: var(--font-body); font-weight: 300; font-size: 14.5px; line-height: 1.65; color: #fdfaf2; }

.hosp-leadtime-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  width: 100%;
  padding: 36px 40px;
  border-radius: 14px;
  background: #a89478;
}
.hosp-leadtime-card__title { margin: 0; font-family: var(--font-display); font-weight: 400; font-size: 30px; letter-spacing: 0.24em; color: rgba(255, 255, 255, 0.75); }
.hosp-leadtime-card__list { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 40px; width: 100%; }
.hosp-leadtime-card__list p { flex: 1 1 260px; max-width: 291px; margin: 0; font-family: var(--font-body); font-weight: 300; font-size: 14px; color: rgba(255, 255, 255, 0.95); text-align: center; }

/* -------------------------------- THE RANGE (216:161) -------------------------------- */

.hosp-range { padding: 0 8.333% 90px; background: var(--color-cream); }
.hosp-range__head { margin: 0 0 40px; }
.hosp-range__hrow { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 22px; }
.hosp-range__title { margin: 0; font-family: var(--font-display); font-weight: 400; font-size: clamp(40px, 6vw, 86px); letter-spacing: 0.02em; color: #2a231c; }
.hosp-range__meta { margin: 0; text-align: right; font-family: var(--font-body); font-size: 11px; letter-spacing: 0.24em; white-space: nowrap; }
.hosp-range__meta p:first-child { margin: 0 0 6px; color: #9c8e7c; }
.hosp-range__meta p:last-child { margin: 0; color: #6d6153; }

.hosp-textile-lists { display: grid; grid-template-columns: 1fr 1fr; gap: 20px 60px; margin-bottom: 40px; }
.hosp-textile-list p {
  position: relative;
  margin: 0 0 20px;
  padding-left: 18px;
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 14px;
  line-height: 1.6;
  color: #6d6153;
}
.hosp-textile-list p::before { content: ''; position: absolute; left: 0; top: 6px; width: 6px; height: 6px; border-radius: 50%; background: #a98c63; }
.hosp-textile-list p strong { font-family: var(--font-display); font-weight: 400; font-size: 16px; color: #2a231c; }
.hosp-textile-list p:last-child { margin-bottom: 0; }

.hosp-product-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; margin-bottom: 64px; }
.hosp-product-card__img { position: relative; height: 230px; border-radius: 12px; overflow: hidden; margin-bottom: 10px; }
.hosp-product-card__img img { width: 100%; height: 100%; object-fit: cover; }
.hosp-product-card__imgtag { position: absolute; left: 14px; bottom: 22px; margin: 0; font-family: var(--font-body); font-size: 9px; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(255, 255, 255, 0.85); }
.hosp-product-card__kicker { margin: 0 0 6px; font-family: var(--font-body); font-weight: 400; font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; color: #9c8e7c; }
.hosp-product-card__title { margin: 0 0 10px; font-family: var(--font-display); font-weight: 400; font-size: 23px; color: #2a231c; }
.hosp-product-card__body { margin: 0; font-family: var(--font-body); font-weight: 300; font-size: 13.5px; line-height: 1.6; color: #6d6153; }

.hosp-toweling { display: flex; flex-direction: column; gap: 24px; padding-top: 24px; }
.hosp-toweling__label { margin: 0; font-family: var(--font-body); font-weight: 400; font-size: 11px; letter-spacing: 0.24em; text-transform: uppercase; color: #2a231c; }
.hosp-toweling__groups { display: flex; flex-wrap: wrap; gap: 30px 24px; }
.hosp-toweling__group { flex: 1 1 200px; max-width: 220px; }
.hosp-toweling__group-label { margin: 0 0 10px; font-family: var(--font-body); font-weight: 400; font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: #8b8171; }
.hosp-toweling__group-items { margin: 0; font-family: var(--font-body); font-weight: 300; font-size: 13.5px; line-height: 1.6; color: #6d6153; }

/* -------------------------------- THE PROOF (216:219) -------------------------------- */

.hosp-proof-wrap { padding: 0 8.333% 90px; background: var(--color-cream); }
.hosp-proof {
  position: relative;
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  gap: 70px;
  align-items: center;
  min-height: 400px;
  overflow: hidden;
  border-radius: 16px;
  padding: 80px;
  background: linear-gradient(135deg, #3a2f24 0%, #241d17 100%);
}
.hosp-proof__bg { position: absolute; inset: 0; opacity: 0.5; }
.hosp-proof__bg img { width: 100%; height: 100%; object-fit: cover; }
.hosp-proof__img { position: relative; flex-shrink: 0; width: 420px; height: 380px; border-radius: 12px; overflow: hidden; }
.hosp-proof__img img { width: 100%; height: 100%; object-fit: cover; }
.hosp-proof__imgtag { position: absolute; left: 16px; bottom: 16px; margin: 0; font-family: var(--font-body); font-size: 9.5px; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(255, 255, 255, 0.85); }
.hosp-proof__content { position: relative; flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 22px; }
.hosp-proof__eyebrow { margin: 0; font-family: var(--font-body); font-weight: 400; font-size: 11px; letter-spacing: 0.24em; color: rgba(255, 255, 255, 0.6); }
.hosp-proof__heading { margin: 0; font-family: var(--font-display); font-weight: 400; font-size: clamp(26px, 3vw, 40px); line-height: 1.12; text-transform: uppercase; color: #fff; }
.hosp-proof__sub { margin: 0; font-family: var(--font-body); font-weight: 400; font-size: 11px; letter-spacing: 0.22em; color: rgba(255, 255, 255, 0.6); }
/* Plain white/invert filters destroyed several of these logos' full-color artwork
   (GOTS, SA8000, Fair Trade Certified all read as unrecognizable blobs when forced
   monochrome) — a light chip behind each keeps every logo in its real colors and
   legible against the dark panel instead, matching how cert logos are chipped
   elsewhere on the site (e.g. the homepage trust-band cards). */
.hosp-proof__logos { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: 4px; }
.hosp-proof__logos img {
  height: 30px;
  width: auto;
  max-width: 78px;
  object-fit: contain;
  padding: 8px 14px;
  border-radius: 8px;
  background: #fdfaf2;
}

/* -------------------------------- ECO FACTORY (216:227) -------------------------------- */

.hosp-eco-wrap { padding: 0 8.333% 90px; background: var(--color-cream); }
.hosp-eco {
  display: flex;
  max-width: 1200px;
  margin: 0 auto;
  min-height: 500px;
  border-radius: 16px;
  overflow: hidden;
  background: linear-gradient(164.38deg, rgb(239, 228, 210) 0%, rgb(227, 211, 189) 66.667%);
}
.hosp-eco__text { flex: 1 1 0; min-width: 0; padding: 80px 60px 80px 72px; display: flex; flex-direction: column; gap: 24px; }
.hosp-eco__eyebrow { margin: 0; font-family: var(--font-body); font-weight: 400; font-size: 11px; letter-spacing: 0.24em; color: #9c8e7c; }
.hosp-eco__heading { margin: 0; font-family: var(--font-display); font-weight: 400; font-size: clamp(32px, 4vw, 58px); line-height: 1; color: #2a231c; }
.hosp-eco__body { margin: 0; font-family: var(--font-body); font-weight: 300; font-size: 15px; line-height: 1.7; color: #6d6153; }
.hosp-eco__badges { display: flex; flex-wrap: wrap; gap: 16px 18px; padding-top: 12px; }
.hosp-eco__badge { display: flex; align-items: center; gap: 10px; font-family: var(--font-body); font-weight: 400; font-size: 10px; letter-spacing: 0.14em; color: #2a231c; }
.hosp-eco__badge img { height: 34px; width: auto; max-width: 56px; object-fit: contain; }
.hosp-eco__badge-icon { display: inline-block; width: 32px; height: 32px; background: no-repeat center / contain; }
.hosp-eco__badge-icon--organic { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='34' height='34' viewBox='0 0 34 34' fill='none'%3E%3Cpath d='M8.98 25.02C3 15.05 10.98 5.07 27.93 6.07 28.93 23.03 18.95 31.01 8.98 25.02Z' stroke='%232a231c' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M21 13L6 28' stroke='%232a231c' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.hosp-eco__badge-icon--cloud { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32' fill='none'%3E%3Cpath d='M10 16c0-1.98.59-3.91 1.69-5.56A9.98 9.98 0 0116.17 6.76a10 10 0 019.6 15.03A9.98 9.98 0 0120 26H9a7 7 0 01-6.94-7.88A7 7 0 0110.74 12.2' stroke='%232a231c' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.hosp-eco__badge-icon--farm { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32' fill='none'%3E%3Cpath d='M3 15c7.8 0 15.4 3 21.6 8.5M3 19c7.3 0 14.4 2.9 19.6 8M3 23c4.7 0 9.3 1.4 13.3 4M10 15.8V10l8-6 8 6v5.1M15 17.3V12h6v4' stroke='%232a231c' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.hosp-eco__img { position: relative; flex: 0 0 39%; overflow: hidden; }
.hosp-eco__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hosp-eco__imgtag { position: absolute; left: 16px; top: 16px; margin: 0; font-family: var(--font-body); font-size: 9.5px; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(255, 255, 255, 0.85); }

/* -------------------------------- CTA (216:257) -------------------------------- */

.hosp-cta {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 44px;
  padding: 140px 8.333%;
  overflow: hidden;
  background: #e4ded2;
  text-align: center;
}
.hosp-cta__bg { position: absolute; inset: 0; }
.hosp-cta__bg img { width: 100%; height: 100%; object-fit: cover; }
.hosp-cta__bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 90% 66.8% at 50% 120%, rgba(200, 168, 128, 0.26) 0%, rgba(200, 168, 128, 0) 100%);
}
.hosp-cta__eyebrow { position: relative; margin: 0; font-family: var(--font-body); font-weight: 400; font-size: 11px; letter-spacing: 0.24em; color: rgba(255, 255, 255, 0.6); }
.hosp-cta__heading { position: relative; margin: 0; max-width: 1000px; font-family: var(--font-display); font-weight: 400; font-size: clamp(32px, 5vw, 60px); line-height: 1.05; letter-spacing: 0.01em; color: #fff; }
.hosp-cta__pills { position: relative; display: flex; flex-wrap: wrap; justify-content: center; gap: 18px; }
.hosp-cta__pill {
  display: inline-flex;
  align-items: center;
  padding: 18px 34px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.4);
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 11px;
  letter-spacing: 0.2em;
  color: #fff;
}
.hosp-cta__pill--solid { border-color: #a98c63; background: #a98c63; }

@media (max-width: 900px) {
  .hosp-cap-grid { grid-template-columns: 1fr; }
  .hosp-dye-benefits { grid-template-columns: 1fr 1fr; }
  .hosp-textile-lists { grid-template-columns: 1fr; }
  .hosp-product-cards { grid-template-columns: 1fr 1fr; }
  .hosp-why-source { flex-direction: column; }
  .hosp-why-source__img { width: 100%; height: 320px; }
  .hosp-eco { flex-direction: column; }
  .hosp-proof { flex-direction: column; padding: 40px; }
  .hosp-proof__img { width: 100%; }
}

/* ---------------------------- MOBILE (2026-09-08) ----------------------------
   The 900px block above only covers the grid/flex sections. Everything patched here
   was still sized for the 1440px desktop frame and was pushing the page into real
   horizontal scroll on a phone: nowrap headings/meta rows wider than the viewport,
   and a centered stats row whose content overflowed on BOTH sides (justify-content:
   center overflows symmetrically, which is why one stat measured at a negative x).
   ---------------------------------------------------------------------------- */
@media (max-width: 640px) {
  /* Hero: long nowrap eyebrows + the centered heading/sub all exceeded the frame. */
  .hosp-hero__eyebrow-left,
  .hosp-hero__eyebrow-right {
    position: static;
    display: block;
    white-space: normal;
    font-size: 10px;
    letter-spacing: 0.18em;
  }
  .hosp-hero__eyebrow-left { padding: 96px 8.333% 0; }
  .hosp-hero__eyebrow-right { padding: 10px 8.333% 0; }
  .hosp-hero__rule { display: none; }
  .hosp-hero__heading { width: 83.333%; font-size: clamp(34px, 11vw, 52px); }
  .hosp-hero__sub { width: 83.333%; font-size: 14px; }

  /* Stats: stack instead of three-across. */
  .hosp-stats {
    flex-direction: column;
    gap: 36px;
    padding: 56px 8.333%;
  }
  .hosp-stat { max-width: none; padding: 0; }

  /* Section header rows: title and meta stack, and neither stays nowrap. */
  .hosp-making__hrow,
  .hosp-range__hrow {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }
  .hosp-making__title,
  .hosp-range__title {
    white-space: normal;
    font-size: clamp(32px, 9vw, 44px);
  }
  .hosp-making__meta,
  .hosp-range__meta {
    text-align: left;
    white-space: normal;
  }

  /* Remaining multi-column blocks that the 900px step left at two-across. */
  .hosp-dye-benefits { grid-template-columns: 1fr; }
  .hosp-product-cards { grid-template-columns: 1fr; }
  .hosp-proof { padding: 32px 8.333%; }

  /* SAMPLING — the card is locked to aspect-ratio 1280/478 with overflow:hidden, a
     wide desktop banner. At phone width that box is far shorter than the eyebrow +
     heading + 380-character body need, so the copy was clipped at the bottom edge.
     Let the card size to its own content here instead. */
  .hosp-sampling { padding: 56px 5.556%; }
  .hosp-sampling__card {
    aspect-ratio: auto;
    min-height: 0;
    padding: 34px 22px;
  }
  /* Heavier still on a phone: the photo is busy and high-key — green caps, pink
     sleeves, white cotton — and at this width the body copy runs nearly edge to edge
     across it, so every line crosses several bright patches. Desktop sets far fewer
     characters over the same photo and stays at the lighter 0.42. */
  .hosp-sampling__scrim { opacity: 0.66; }

  /* "Lead Time & MOQs" wrapped onto two lines — 30px display type with 0.24em of
     tracking is wider than the card at this size. Scaled with the viewport and the
     tracking eased so it holds one line (per Arina). */
  .hosp-leadtime-card { padding: 30px 22px; }
  .hosp-leadtime-card__title {
    font-size: clamp(17px, 5.2vw, 30px);
    letter-spacing: 0.12em;
    white-space: nowrap;
  }

  /* ECO FACTORY — 8.333% wrapper padding plus the panel's own 72px inner padding left
     roughly 104px of dead margin each side on a phone, squeezing the copy into a
     narrow ribbon. Both reduced (per Arina: "less padding on the sides"). */
  .hosp-eco-wrap { padding: 0 5.556% 56px; }
  .hosp-eco { min-height: 0; }
  .hosp-eco__text { padding: 34px 24px; gap: 18px; }
  .hosp-eco__img { flex: 0 0 auto; height: 260px; }
}