/* Interior content pages (Our Story, Experiences, Sustainability).
   These pages use the homepage's own section vocabulary -- centred
   .section-title-block headings, .padding-section-medium rhythm, alternating
   bg-light / bg-brand-dark bands, pill .button with the arrow icon. Only the
   few things the homepage has no equivalent for live here. */

* { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
body { background: var(--offwhite, #f8f8e8); color: var(--color-text, #5d5c4b); margin: 0; }

/* ---- Page hero: the homepage hero's type, over a green band ------------ */
.ch-page-hero { background-color: var(--accent, #3b4126); position: relative; }
.ch-page-hero__body { padding-top: clamp(2rem, 5vw, 4rem); padding-bottom: clamp(3rem, 7vw, 5.5rem); }
.ch-page-hero__eyebrow {
  color: var(--brand, #efeed5); opacity: .7; margin: 0 0 1.25rem;
  font-size: .875rem; font-weight: 600; letter-spacing: .01em;
  line-height: 1.1; text-transform: uppercase;
}
.ch-page-hero .heading-style-h1 { color: var(--brand, #efeed5); margin: 0; }
.ch-page-hero__lead {
  color: var(--brand, #efeed5); opacity: .85; margin: 1.5rem auto 0; max-width: 46ch;
}

/* ---- Prose inside a centred section ----------------------------------- */
/* The homepage sets long-form copy at .heading-style-h3 (see the story
   section). Body-size runs of text get a readable measure and stay centred. */
.ch-prose { max-width: 62ch; margin-left: auto; margin-right: auto; }
.ch-prose p { margin: 0 0 1.15rem; line-height: 1.75; }
.ch-prose p:last-child { margin-bottom: 0; }
.ch-prose a { color: inherit; text-decoration: underline; text-underline-offset: .18em; }
/* .bg-brand-dark in the exported CSS is cream, identical to .bg-light -- the name
   is misleading. This is a genuinely dark band, echoing the hero. */
.ch-section--accent { background-color: var(--accent, #3b4126); }
.ch-section--accent .heading-style-h1,
.ch-section--accent .heading-style-h3,
.ch-section--accent .ch-prose { color: var(--brand, #efeed5); }

/* ---- Card grid: the .cabin-item body, without the image --------------- */
.ch-cards {
  display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  margin: 0; padding: 0; list-style: none; text-align: center;
}
.ch-cards li {
  background: var(--brand-secondary, #f7f5e1);
  border: 1px solid var(--border--accent-20, #3b412633);
  border-radius: var(--radius--16, 1rem);
  padding: 2rem 1.5rem;
}
.ch-section--accent .ch-cards li { background: #434a2c; border-color: #ffffff26; }
.ch-section--accent .ch-cards li p { color: var(--brand, #efeed5); opacity: .82; }
.ch-section--accent .ch-cards h3 { color: var(--brand, #efeed5); }
.ch-cards h3 { margin: 0 0 .6rem; }
.ch-cards p { margin: 0; line-height: 1.7; }

/* ---- Bulleted lists, centred to match the sections around them -------- */
.ch-list { list-style: none; padding: 0; margin: 0 auto; max-width: 52ch; }
.ch-list li { position: relative; padding: .7rem 0; line-height: 1.7; border-bottom: 1px solid var(--border--accent-20, #3b412633); }
.ch-list li:last-child { border-bottom: 0; }

/* ---- Award badge beside a line of copy --------------------------------- */
.ch-award { display: flex; align-items: center; justify-content: center; gap: 1.75rem; text-align: left; }
.ch-award img { width: 104px; height: auto; flex: none; }
.ch-award p { margin: 0; max-width: 40ch; }
@media (max-width: 479px) { .ch-award { flex-direction: column; text-align: center; } }

@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }