/* ==========================================================================
   More pages: About, Our Coffees, Catalogue, FAQs, Insights, article, legal, thank you, 404.
   Loaded after styles.css on those page templates.
   ========================================================================== */

/* Legal pages (privacy, terms) ------------------------------------------- */
.page-hero--inner { min-height: 480px; }
.legal__layout { display: grid; grid-template-columns: 240px minmax(0, 720px); gap: 120px; max-width: 1080px; margin-inline: auto; align-items: start; }
.legal__contents { position: sticky; top: 112px; display: flex; flex-direction: column; gap: 16px; }
.legal__contents .eyebrow { margin: 0; }
.legal__contents ol { display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 0; list-style: none; }
.legal__contents a { display: flex; gap: 12px; padding: 4px 0; font-size: 14px; line-height: 22px; color: var(--text-secondary); transition: color 0.2s; }
.legal__contents a span { color: var(--text-accent); font-weight: 600; }
.legal__contents a:hover { color: var(--text-primary); }
.legal__content { display: flex; flex-direction: column; gap: 40px; }
.legal__note { margin: 0; padding: 14px 18px 14px 36px; position: relative; background: var(--surface-subtle); border-radius: var(--radius-sm); font-size: 14px; line-height: 22px; color: var(--text-secondary); }
.legal__note::before { content: ""; position: absolute; left: 16px; top: 22px; width: 8px; height: 8px; border-radius: 50%; background: var(--cherry-600); }
.legal__section { display: flex; flex-direction: column; gap: 12px; scroll-margin-top: 96px; }
.legal__num { font-size: 14px; line-height: 20px; font-weight: 600; color: var(--text-accent); }
.legal__section .h3 { margin: 0; }
.legal__section p { margin: 0; font-size: 16px; line-height: 26px; color: var(--text-secondary); }
.legal__questions { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding-top: 32px; border-top: 1px solid var(--border-default); }
.legal__questions p { margin: 0; }
@media (max-width: 1023px) {
  .legal__layout { grid-template-columns: 1fr; gap: 40px; }
  .legal__contents { position: static; }
  .legal__questions { flex-direction: column; align-items: flex-start; }
}

/* FAQs page --------------------------------------------------------------- */
.faq-groups__layout { display: grid; grid-template-columns: 280px minmax(0, 800px); gap: 120px; max-width: var(--content); margin-inline: auto; align-items: start; }
.faq-groups__topics { position: sticky; top: 112px; display: flex; flex-direction: column; gap: 14px; }
.faq-groups__topics .eyebrow { margin: 0; color: var(--text-secondary); }
.faq-groups__topics a { position: relative; padding-left: 0; font-size: 16px; line-height: 26px; color: var(--text-secondary); transition: color 0.2s, padding-left 0.25s; }
.faq-groups__topics a:hover { color: var(--text-primary); }
.faq-groups__topics a.is-active { padding-left: 13px; font-size: 18px; font-weight: 600; letter-spacing: -0.09px; color: var(--text-primary); }
.faq-groups__topics a.is-active::before { content: ""; position: absolute; left: 0; top: 3px; width: 3px; height: 20px; background: var(--action-primary); }
.faq-groups__questions { display: flex; flex-direction: column; gap: 64px; }
.faq-group { display: flex; flex-direction: column; gap: 20px; scroll-margin-top: 104px; }
.faq-group .h3 { margin: 0; }
@media (max-width: 1023px) {
  .faq-groups__layout { grid-template-columns: 1fr; gap: 40px; }
  .faq-groups__topics { position: static; flex-direction: row; flex-wrap: wrap; gap: 8px 16px; }
  .faq-groups__topics .eyebrow { flex-basis: 100%; }
  .faq-groups__topics a.is-active { padding-left: 0; font-size: 16px; }
  .faq-groups__topics a.is-active::before { display: none; }
}

/* Shared tiles (feature cards), section heads, thank you, 404 --------------- */
.section-head--left { align-items: flex-start; text-align: left; max-width: var(--content); width: 100%; margin-inline: auto; }
.tiles { display: grid; gap: 24px; width: 100%; max-width: var(--content); margin-inline: auto; }
.tiles--3 { grid-template-columns: repeat(3, 1fr); }
.tiles--4 { grid-template-columns: repeat(4, 1fr); }
.tile { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; padding: 32px; background: var(--surface-card); border: 1px solid var(--border-default); border-radius: var(--radius-md); transition: translate 0.4s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.4s, border-color 0.3s; }
a.tile:hover { border-color: var(--cherry-600); }
.tile:hover { translate: 0 -4px; box-shadow: 0 14px 30px rgba(38, 14, 10, 0.08); }
.tile:hover .tile__link { color: var(--cherry-700); }
.tile__icon { display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: var(--radius-pill); background: var(--cherry-100); }
.tile .h3 { margin: 0; }
.tile p { margin: 0; color: var(--text-secondary); }
.tile__link { margin-top: auto; font-size: 15px; line-height: 22px; font-weight: 600; color: var(--text-accent); transition: color 0.2s; }
.next-steps, .wait, .popular { display: flex; flex-direction: column; gap: 56px; }
.next-steps__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; width: 100%; max-width: var(--content); margin: 0 auto; padding: 0; list-style: none; }
.next-steps__card { display: flex; flex-direction: column; gap: 14px; min-height: 232px; padding: 32px; background: var(--surface-card); border: 1px solid var(--border-default); border-radius: var(--radius-md); }
.next-steps__num { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: var(--radius-pill); background: var(--cherry-600); color: var(--text-inverse); font-size: 14px; font-weight: 500; }
.next-steps__card .h3 { margin: 0; }
.next-steps__card p { margin: 0; color: var(--text-secondary); }
.request { padding-top: 0; }
.request__card { max-width: 800px; margin-inline: auto; padding: 28px 40px; background: var(--surface-card); border: 1px solid var(--border-default); border-radius: var(--radius-md); }
.request__head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding-bottom: 16px; border-bottom: 1px solid var(--border-default); }
.request__head h2 { margin: 0; }
.request__head span { font-size: 12px; line-height: 18px; color: var(--text-secondary); }
.request dl { margin: 0; }
.request dl div { display: flex; justify-content: space-between; gap: 24px; padding: 14px 0; border-bottom: 1px solid var(--border-default); }
.request dl div:last-child { border-bottom: 0; padding-bottom: 0; }
.request dt { color: var(--text-secondary); }
.request dd { margin: 0; font-weight: 600; text-align: right; }
.page-hero--404 { min-height: 760px; }
.nf-code { margin: 0; font-size: 120px; line-height: 1; font-weight: 300; letter-spacing: -4px; color: var(--jute-300); }
.nf-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; }
@media (max-width: 1023px) {
  .tiles--3, .next-steps__grid { grid-template-columns: 1fr; }
  .tiles--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 639px) {
  .tiles--4 { grid-template-columns: 1fr; }
  .request__card { padding: 24px; }
  .nf-code { font-size: 88px; }
}

/* About ------------------------------------------------------------------- */
.story { background: var(--surface-subtle); }
.story__inner { display: grid; grid-template-columns: 520px minmax(0, 584px); gap: 96px; max-width: var(--content); margin-inline: auto; align-items: start; }
.story__lead { display: flex; flex-direction: column; gap: 24px; }
.story__lead .eyebrow { margin: 0; }
.story__quote { margin: 0; font-size: 40px; line-height: 48px; font-weight: 300; font-style: italic; letter-spacing: -0.8px; color: var(--text-primary); }
.story__caption { margin: 0; font-size: 14px; line-height: 22px; color: var(--text-secondary); }
.story__copy { display: flex; flex-direction: column; gap: 20px; }
.story__copy p { margin: 0; font-size: 18px; line-height: 30px; color: var(--text-secondary); }
.story__stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; max-width: var(--content); margin: 64px auto 0; }
.story__stats div { display: flex; flex-direction: column; gap: 8px; padding-top: 20px; border-top: 1px solid var(--border-default); }
.story__stats dt { font-size: 40px; line-height: 48px; font-weight: 300; letter-spacing: -0.8px; }
.story__stats dd { margin: 0; font-size: 14px; line-height: 22px; color: var(--text-secondary); }

.values, .facilities, .source, .team { display: flex; flex-direction: column; gap: 56px; }

.facilities__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 96px; width: 100%; max-width: var(--content); margin-inline: auto; }
.facilities__head > div { display: flex; flex-direction: column; gap: 16px; max-width: 640px; }
.facilities__head .h1 { margin: 0; }
.facilities__head > p { width: 400px; flex: none; margin: 0; color: var(--text-secondary); }
.facilities__image { width: 100%; max-width: var(--content); height: 420px; margin-inline: auto; border-radius: var(--radius-sm); }

.bento { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; width: 100%; max-width: var(--content); margin-inline: auto; }
.bento__card { position: relative; display: block; height: 320px; overflow: hidden; border-radius: var(--radius-md); color: var(--text-inverse); }
.bento__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s cubic-bezier(0.22, 0.61, 0.36, 1); }
.bento__card:hover .bento__img { transform: scale(1.08); }
.bento__shade { position: absolute; inset: 0; background: linear-gradient(to top, rgba(38, 14, 10, 0.88) 0%, rgba(38, 14, 10, 0.2) 55%, rgba(38, 14, 10, 0) 100%); }
.bento__body { position: absolute; left: 24px; right: 64px; bottom: 24px; display: flex; flex-direction: column; gap: 4px; }
.bento__body small { font-size: 12px; line-height: 16px; letter-spacing: 1.44px; text-transform: uppercase; color: var(--jute-300); }
.bento__body .h3 { margin: 0; }
.bento__text { max-height: 0; overflow: hidden; opacity: 0; font-size: 14px; line-height: 22px; color: var(--text-inverse-muted); transition: max-height 0.5s, opacity 0.5s; }
.bento__card:hover .bento__text { max-height: 80px; opacity: 1; }
.bento__arrow { position: absolute; right: 20px; bottom: 20px; display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; background: rgba(255, 255, 255, 0.2); transition: background-color 0.3s; }
.bento__card:hover .bento__arrow { background: var(--cherry-600); }

.team__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; width: 100%; max-width: var(--content); margin-inline: auto; align-items: start; }
.person { display: flex; flex-direction: column; gap: 6px; }
.person__photo { height: 400px; margin-bottom: 12px; border-radius: var(--radius-md); overflow: hidden; }
.person__photo--empty { display: flex; align-items: center; justify-content: center; background: var(--jute-100); color: var(--text-secondary); font-size: 56px; font-weight: 300; }
.person .h3 { margin: 0; }
.person p { margin: 0; color: var(--text-secondary); }
.team__talk { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; padding: 40px 32px; min-height: 400px; background: var(--surface-inverse); color: var(--text-inverse); border-radius: var(--radius-md); }
.team__talk .h3 { margin: 0; }
.team__talk p { margin: 0 0 auto; color: var(--text-inverse-muted); }

@media (max-width: 1199px) {
  .story__inner { grid-template-columns: 1fr 1fr; gap: 56px; }
  .facilities__head { gap: 48px; }
  .facilities__head > p { width: 320px; }
}
@media (max-width: 1023px) {
  .story__inner, .values__grid { grid-template-columns: 1fr; }
  .story__stats { grid-template-columns: repeat(2, 1fr); }
  .values__lead { min-height: 320px; }
  .facilities__head { flex-direction: column; gap: 20px; }
  .facilities__head > p { width: auto; }
  .facilities__image { height: 320px; }
  .bento, .team__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 639px) {
  .values__list, .bento, .team__grid { grid-template-columns: 1fr; }
  .story__quote { font-size: 30px; line-height: 38px; }
  .story__stats { grid-template-columns: 1fr; }
}

/* Coffee catalogue -------------------------------------------------------- */
.cat__inner { display: flex; flex-direction: column; gap: 32px; max-width: var(--content); margin-inline: auto; }
.cat__inner > * { min-width: 0; }
.cat__table { position: relative; max-width: 100%; }
.cat__filters { display: flex; flex-direction: column; gap: 14px; padding: 28px 32px; background: var(--surface-subtle); border-radius: var(--radius-md); }
.cat__group { display: flex; align-items: center; gap: 24px; }
.cat__label { flex: none; width: 80px; font-size: 12px; line-height: 16px; font-weight: 600; letter-spacing: 1.44px; text-transform: uppercase; color: var(--text-secondary); }
.cat__chips { display: flex; flex-wrap: wrap; gap: 8px; }
.cat__chip { padding: 8px 16px; border: 1px solid var(--border-default); border-radius: var(--radius-pill); background: #fff; color: var(--text-primary); font: 500 14px/20px var(--font); cursor: pointer; transition: background-color 0.2s, color 0.2s, border-color 0.2s; }
.cat__chip:hover { border-color: var(--jute-500); }
.cat__chip.is-active { background: var(--action-secondary); border-color: var(--action-secondary); color: var(--text-inverse); }
.cat__bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.cat__bar p { margin: 0; color: var(--text-secondary); }
.cat__bar strong { color: var(--text-primary); }
.cat__table { background: var(--surface-card); border: 1px solid var(--border-default); border-radius: var(--radius-sm); overflow-x: auto; }
.lots { width: 100%; min-width: 1040px; table-layout: fixed; border-collapse: collapse; text-align: left; }
/* Fixed column widths keep every row the same shape, whatever the text. */
.lots th:nth-child(1) { width: 11%; }
.lots th:nth-child(2) { width: 14%; }
.lots th:nth-child(3) { width: 12%; }
.lots th:nth-child(4) { width: 11%; }
.lots th:nth-child(5) { width: 17%; }
.lots th:nth-child(6) { width: 6%; }
.lots th:nth-child(7) { width: 15%; }
.lots th:nth-child(8) { width: 14%; }
.lots thead th { padding: 14px 16px; background: var(--surface-subtle); border-bottom: 1px solid var(--border-default); font-size: 12px; line-height: 16px; font-weight: 600; letter-spacing: 1.44px; text-transform: uppercase; color: var(--text-secondary); }
.lots td, .lots tbody th { padding: 20px 16px; border-bottom: 1px solid var(--border-default); font-size: 15px; line-height: 22px; vertical-align: middle; }
.lots tbody tr { transition: background-color 0.2s; }
.lots tbody tr:hover { background: var(--surface-page); }
.lots .cell-main { display: block; font-weight: 500; color: var(--text-primary); white-space: nowrap; }
.lots .cell-sub { display: block; font-size: 13px; line-height: 20px; color: var(--text-secondary); white-space: nowrap; }
.lots__cup span { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; color: var(--text-secondary); }
.lots__bags { font-variant-numeric: tabular-nums; font-weight: 500; }
.lots__action { text-align: right; }
.lots tbody td:nth-child(3) { white-space: nowrap; }
.lots tbody th { font-size: 16px; font-weight: 600; white-space: nowrap; }
.lots tbody tr:last-child td, .lots tbody tr:last-child th { border-bottom: 0; }
.lots tr[hidden] { display: none; }
.lots .link-arrow { padding: 0; white-space: nowrap; }
.chip--soon { background: transparent; box-shadow: inset 0 0 0 1px var(--border-default); color: var(--text-secondary); }
.chip--limited { background: var(--cherry-100); color: var(--cherry-700); }
.cat__empty { margin: 0; padding: 40px; text-align: center; color: var(--text-secondary); }
.cat__note { margin: 0; font-size: 13px; line-height: 20px; color: var(--text-secondary); }
@media (max-width: 1023px) {
  .cat__group { flex-direction: column; align-items: flex-start; gap: 10px; }
  .cat__bar { flex-direction: column; align-items: flex-start; }
}

/* Insights + article ------------------------------------------------------ */
.articles__inner { display: flex; flex-direction: column; gap: 48px; max-width: var(--content); margin-inline: auto; }
.articles__cats { display: flex; flex-wrap: wrap; gap: 8px; }
.featured { display: grid; grid-template-columns: 640px 1fr; gap: 56px; align-items: center; }
.featured[hidden], .acard[hidden] { display: none; }
.featured__img { display: block; height: 440px; border-radius: var(--radius-md); }
.featured__body { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.featured__title { font-size: 40px; line-height: 48px; font-weight: 600; letter-spacing: -0.8px; }
.featured__text { color: var(--text-secondary); font-size: 18px; line-height: 30px; }
.acard__cat { font-size: 12px; line-height: 16px; font-weight: 600; letter-spacing: 1.44px; text-transform: uppercase; color: var(--text-accent); }
.acard__meta { font-size: 13px; line-height: 20px; color: var(--text-secondary); }
.articles__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 48px 24px; align-items: start; }
.acard { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.acard__img { display: block; width: 100%; height: 240px; margin-bottom: 8px; border-radius: var(--radius-md); }
.acard .h3 { font-size: 22px; line-height: 30px; letter-spacing: -0.22px; transition: color 0.2s; }
.acard:hover .h3 { color: var(--text-accent); }
.acard__text { color: var(--text-secondary); font-size: 14px; line-height: 22px; }
.articles__foot { display: flex; justify-content: center; }
.newsletter { background: var(--surface-inverse); color: var(--text-inverse); }
.newsletter__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 40px; max-width: var(--content); margin-inline: auto; }
.newsletter__copy { display: flex; flex-direction: column; gap: 16px; max-width: 760px; }
.newsletter__copy .h1, .newsletter__copy p { margin: 0; }
.newsletter__copy .body-l { color: var(--text-inverse-muted); }
.newsletter__form { display: flex; gap: 8px; align-items: center; }
.newsletter__form .input { width: 420px; max-width: 100%; }
.newsletter .form-status { flex-basis: 100%; color: var(--text-inverse-muted); margin: 0; }

.article__layout { display: grid; grid-template-columns: 240px minmax(0, 720px); gap: 120px; max-width: 1080px; margin-inline: auto; align-items: start; }
.article__side { position: sticky; top: 112px; display: flex; flex-direction: column; gap: 40px; }
.article__toc { display: flex; flex-direction: column; gap: 12px; }
.article__toc .eyebrow { margin: 0 0 4px; color: var(--text-secondary); }
.article__toc a { font-size: 14px; line-height: 22px; color: var(--text-secondary); transition: color 0.2s; }
.article__toc a:hover { color: var(--text-accent); }
.article__share { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.article__share p { margin: 0 0 4px; font-size: 13px; color: var(--text-secondary); }
.article__share a, .article__share button { padding: 0; border: 0; background: none; font: 500 14px/22px var(--font); color: var(--text-primary); cursor: pointer; }
.article__share a:hover, .article__share button:hover { color: var(--text-accent); }
.article__body { display: flex; flex-direction: column; gap: 32px; }
.article__lead { margin: 0; font-size: 22px; line-height: 34px; color: var(--text-primary); }
.article__section { display: flex; flex-direction: column; gap: 16px; scroll-margin-top: 104px; }
.article__section .h2 { margin: 8px 0 0; font-size: 32px; line-height: 40px; }
.article__section p { margin: 0; font-size: 18px; line-height: 30px; color: var(--text-secondary); }
.article__quote { margin: 16px 0; padding: 8px 0 8px 28px; border-left: 3px solid var(--cherry-600); font-size: 28px; line-height: 38px; font-weight: 300; font-style: italic; letter-spacing: -0.28px; }
.grade-table { width: 100%; border-collapse: collapse; text-align: left; background: var(--surface-card); border: 1px solid var(--border-default); }
.grade-table th, .grade-table td { padding: 16px 20px; border-bottom: 1px solid var(--border-default); font-size: 15px; line-height: 22px; }
.grade-table thead th { background: var(--surface-subtle); font-size: 12px; font-weight: 600; letter-spacing: 1.44px; text-transform: uppercase; color: var(--text-secondary); }
.grade-table tbody th { font-weight: 600; }
.article__callout { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 32px; background: var(--surface-inverse); color: var(--text-inverse); border-radius: var(--radius-md); }
.article__callout .h3 { margin: 0 0 8px; display: block; }
.article__callout p { margin: 0; color: var(--text-inverse-muted); }
.article__author { display: flex; gap: 16px; align-items: center; padding-top: 32px; border-top: 1px solid var(--border-default); }
.article__avatar { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 52px; height: 52px; border-radius: 50%; background: var(--cherry-600); color: var(--text-inverse); font-size: 20px; font-weight: 600; }
.article__author strong { display: block; }
.article__author p { margin: 2px 0 0; color: var(--text-secondary); font-size: 14px; }
.related { display: flex; flex-direction: column; gap: 48px; background: var(--surface-subtle); }
.articles__grid--3 { width: 100%; max-width: var(--content); margin-inline: auto; }
@media (max-width: 1199px) { .featured { grid-template-columns: 1fr 1fr; gap: 32px; } }
@media (max-width: 1023px) {
  .featured { grid-template-columns: 1fr; }
  .featured__img { height: 320px; }
  .articles__grid { grid-template-columns: repeat(2, 1fr); }
  .article__layout { grid-template-columns: 1fr; gap: 40px; }
  .article__side { position: static; }
  .article__callout { flex-direction: column; align-items: flex-start; }
  .newsletter__form { flex-wrap: wrap; width: 100%; }
}
@media (max-width: 639px) {
  .articles__grid { grid-template-columns: 1fr; }
  .featured__title { font-size: 30px; line-height: 38px; }
}

/* Our Coffees ------------------------------------------------------------- */
.bento-sec, .explorer, .wheel, .guide { display: flex; flex-direction: column; gap: 56px; }
.bento-sec__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 96px; width: 100%; max-width: var(--content); margin-inline: auto; }
.bento-sec__head > div { display: flex; flex-direction: column; gap: 16px; max-width: 520px; }
.bento-sec__head .h1 { margin: 0; }
.bento-sec__head > p { width: 560px; flex: none; margin: 0; color: var(--text-secondary); }
.ptiles { display: grid; grid-template-columns: 588px 1fr 1fr; grid-template-rows: 288px 288px; gap: 24px; width: 100%; max-width: var(--content); margin-inline: auto; }
.ptile { position: relative; display: flex; flex-direction: column; justify-content: flex-end; overflow: hidden; padding: 28px; border-radius: var(--radius-md); color: var(--text-inverse); }
.ptile--1 { grid-row: span 2; }
.ptile--2 { grid-column: span 2; }
.ptile__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s cubic-bezier(0.22, 0.61, 0.36, 1); }
.ptile:hover .ptile__img { transform: scale(1.06); }
.ptile__shade { position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(38, 14, 10, 0) 0%, rgba(38, 14, 10, 0.15) 45%, rgba(38, 14, 10, 0.85) 100%); }
.ptile__arrow { position: absolute; top: 28px; right: 28px; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; background: rgba(255, 255, 255, 0.18); font-size: 18px; transition: background-color 0.3s; }
.ptile:hover .ptile__arrow { background: var(--cherry-600); }
.ptile__body { position: relative; display: flex; flex-direction: column; gap: 10px; }
.ptile__body small { font-size: 12px; line-height: 16px; font-weight: 600; letter-spacing: 1.44px; text-transform: uppercase; color: var(--text-inverse-muted); }
.ptile__body .h3 { margin: 0; color: var(--text-inverse); }
.tiles--feature .tile--dark { background: var(--surface-inverse); border-color: var(--espresso-700, #3d261c); }
.tiles--feature .tile--dark .h3 { color: var(--text-inverse); }
.tiles--feature .tile--dark p { color: var(--text-inverse-muted); }
.tiles--feature .tile--dark .tile__icon { background: var(--cream-100); }

.explorer { background: var(--surface-subtle); }
.explorer__head { display: flex; flex-direction: column; gap: 16px; max-width: var(--content); width: 100%; margin-inline: auto; }
.explorer__head .h1, .explorer__head p { margin: 0; }
.explorer__head .body-l { color: var(--text-secondary); max-width: 640px; }
.ptabs { display: flex; flex-direction: column; gap: 40px; width: 100%; max-width: var(--content); margin-inline: auto; }
.ptabs__bar { display: flex; flex-wrap: wrap; gap: 8px; }
.ptabs__bar button { display: inline-flex; align-items: center; gap: 10px; padding: 14px 24px; border: 1px solid var(--border-default); border-radius: var(--radius-pill); background: transparent; color: var(--text-primary); font: 500 14px/20px var(--font); cursor: pointer; transition: background-color 0.25s, color 0.25s; }
.ptabs__bar button span { font-size: 12px; font-weight: 400; color: var(--text-secondary); }
.ptabs__bar button[aria-selected="true"] { background: var(--action-secondary); border-color: var(--action-secondary); color: var(--text-inverse); }
.ptabs__bar button[aria-selected="true"] span { color: var(--text-inverse-muted); }
.ptabs__panel { display: grid; grid-template-columns: 560px 1fr; gap: 64px; align-items: center; }
.ptabs__panel[hidden] { display: none; }
.ptabs__img { height: 480px; border-radius: var(--radius-md); }
.ptabs__copy { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; }
.ptabs__copy .eyebrow { margin: 0; }
.ptabs__name { margin: 0; font-size: 48px; line-height: 56px; font-weight: 600; letter-spacing: -0.96px; }
.ptabs__tag { margin: 0; font-size: 28px; line-height: 38px; font-weight: 300; font-style: italic; letter-spacing: -0.28px; color: var(--text-secondary); }
.ptabs__copy .body-l { margin: 0; color: var(--text-secondary); }
.ptabs__copy .specs { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 16px; width: 100%; margin: 0; }
.ptabs__copy .spec { display: flex; flex-direction: column; gap: 4px; padding: 14px 0; border-top: 1px solid var(--border-default); }
.ptabs__copy .spec dt { font-size: 12px; line-height: 16px; font-weight: 600; letter-spacing: 1.44px; text-transform: uppercase; color: var(--text-secondary); }
.ptabs__copy .spec dd { margin: 0; }

.wheel__card { display: grid; grid-template-columns: 580px 1fr; gap: 80px; align-items: center; width: 100%; max-width: var(--content); margin-inline: auto; }
.wheel__svg { width: 100%; height: auto; overflow: visible; font-family: var(--font); }
.wheel__svg path { stroke: #fbf8f2; stroke-width: 2.5; stroke-linejoin: round; }
.wheel__seg { cursor: pointer; outline: none; opacity: 0.62; transition: opacity 0.3s; }
.wheel__seg:hover, .wheel__seg:focus-visible { opacity: 0.9; }
.wheel__seg.is-active { opacity: 1; }
.wheel__cat { font-size: 14px; font-weight: 600; fill: #fff; pointer-events: none; }
.wheel__note { font-size: 12px; font-weight: 500; fill: var(--text-primary); pointer-events: none; }
.wheel__hub { font-size: 15px; font-weight: 600; fill: var(--text-inverse); }
.wheel__hub2 { font-size: 11px; fill: var(--text-inverse-muted); }
.wheel__panel { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; }
.wheel__panel[hidden] { display: none; }
.wheel__panel p { margin: 0; }
.wheel__panel .eyebrow--accent { color: var(--text-accent); }
.wheel__panel .body-l { color: var(--text-secondary); }
.wheel__name { display: flex; align-items: center; gap: 12px; }
.wheel__dot { width: 18px; height: 18px; border-radius: 50%; flex: none; }
.wheel__title { margin: 0; font-size: 48px; line-height: 56px; font-weight: 600; letter-spacing: -0.96px; }
.wheel__group { display: flex; flex-direction: column; gap: 10px; width: 100%; }
.wheel__group .eyebrow { margin: 0; color: var(--text-secondary); }
.wheel__chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.wheel__chips li { padding: 8px 14px; border-radius: var(--radius-pill); font-size: 14px; line-height: 22px; color: var(--text-primary); }
.wheel__chips--outline li { border: 1px solid var(--cherry-600); color: var(--text-accent); }
.wheel__bar { width: 100%; padding: 12px 16px; background: var(--surface-subtle); border-radius: 10px; font-size: 14px; line-height: 22px; color: var(--text-primary); }
.wheel__credit { font-size: 12px; line-height: 18px; color: var(--text-secondary); }
.sca { display: flex; align-items: center; gap: 40px; width: 100%; max-width: var(--content); margin-inline: auto; padding: 40px 48px; background: var(--surface-inverse); border-radius: 16px; }
.sca__ring { flex: none; width: 112px; height: 112px; }
.sca__copy { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.sca__copy .eyebrow { margin: 0; color: var(--text-inverse-muted); }
.sca__copy .h3 { margin: 0; color: var(--text-inverse); max-width: 640px; }
.sca__copy p:last-child { margin: 0; color: var(--text-inverse-muted); max-width: 640px; }
.sca .btn { flex: none; }

@media (max-width: 1199px) {
  .bento-sec__head { gap: 48px; }
  .bento-sec__head > p { width: 400px; }
  .ptiles { grid-template-columns: 1fr 1fr; grid-template-rows: auto; }
  .ptile--1 { grid-row: auto; grid-column: span 2; min-height: 420px; }
  .ptile--2 { grid-column: span 2; }
  .ptile { min-height: 260px; }
  .ptabs__panel { grid-template-columns: 420px 1fr; gap: 40px; }
  .wheel__card { grid-template-columns: 440px 1fr; gap: 40px; }
}
@media (max-width: 1023px) {
  .bento-sec__head { flex-direction: column; gap: 20px; }
  .bento-sec__head > p { width: auto; }
  .ptabs__panel, .wheel__card { grid-template-columns: 1fr; }
  .ptabs__img { height: 340px; }
  .wheel__svg { max-width: 460px; margin-inline: auto; }
  .sca { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 639px) {
  .ptiles { grid-template-columns: 1fr; }
  .ptile--1, .ptile--2 { grid-column: auto; }
  .ptabs__name { font-size: 38px; line-height: 46px; }
  .ptabs__tag { font-size: 22px; line-height: 30px; }
  .wheel__cat { font-size: 21px; }
  .wheel__note { font-size: 17px; }
  .wheel__title { font-size: 38px; line-height: 46px; }
  .sca { padding: 28px 24px; }
}

/* Generic hero extras: check mark, actions, Resources tabs ------------------ */
.page-hero__check { display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: 50%; background: var(--cherry-600); color: var(--text-inverse); font-size: 26px; font-weight: 600; }
.page-hero__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.page-hero__tabs { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.page-hero__tabs a { padding: 8px 16px; border: 1px solid var(--espresso-500, #6b4d3e); border-radius: var(--radius-pill); font-size: 14px; line-height: 22px; color: var(--text-inverse); transition: background-color 0.2s; }
.page-hero__tabs a:hover { background: rgba(255, 255, 255, 0.12); }
.page-hero__tabs a.is-active { background: var(--surface-page); border-color: var(--surface-page); color: var(--text-primary); }

/* About: "what we stand for" (photo tile + four cards) and shared dark tiles --- */
.tile--dark { background: var(--surface-inverse); border-color: #3d261c; }
.tile--dark .h3 { color: var(--text-inverse); }
.tile--dark p { color: var(--text-inverse-muted); }
.tile--dark .tile__icon { background: var(--cream-100); }
.values__grid { display: grid; grid-template-columns: 588px 1fr; gap: 24px; width: 100%; max-width: var(--content); margin-inline: auto; }
.values__tile { min-height: 560px; }
.values__list { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.values__list .tile { min-height: 268px; }
@media (max-width: 1279px) { .values__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); } .values__tile { min-height: 480px; } .values__list { grid-template-columns: 1fr; } }
@media (max-width: 1023px) { .values__grid { grid-template-columns: 1fr; } .values__tile { min-height: 360px; } .values__list { grid-template-columns: 1fr 1fr; } }
@media (max-width: 639px) { .values__list { grid-template-columns: 1fr; } }

/* Process explorer: sliding pill, image wipe, staggered copy ------------------ */
.ptabs__bar { position: relative; }
.ptabs__pill { position: absolute; top: 0; left: 0; z-index: 0; border-radius: var(--radius-pill); background: var(--action-secondary); pointer-events: none; transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1), width 0.5s cubic-bezier(0.22, 1, 0.36, 1), height 0.5s; }
.ptabs__bar button { position: relative; z-index: 1; }
.ptabs__bar.has-pill button[aria-selected="true"] { background: transparent; border-color: transparent; }
.ptabs__bar button:not([aria-selected="true"]):hover { background: rgba(31, 18, 13, 0.05); }
.ptabs__bar button:focus-visible { outline: 2px solid var(--cherry-600); outline-offset: 3px; }
@keyframes ptab-wipe { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes ptab-settle { from { transform: scale(1.18); } to { transform: scale(1); } }
@keyframes ptab-rise { from { opacity: 0; transform: translate3d(0, 22px, 0); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: no-preference) {
  .ptabs__panel:not([hidden]) .ptabs__img { animation: ptab-wipe 0.9s cubic-bezier(0.22, 1, 0.36, 1) both; }
  .ptabs__panel:not([hidden]) .ptabs__img img { animation: ptab-settle 1.5s cubic-bezier(0.22, 1, 0.36, 1) both; }
  .ptabs__panel:not([hidden]) .ptabs__copy > * { animation: ptab-rise 0.7s cubic-bezier(0.22, 1, 0.36, 1) both; }
  .ptabs__panel:not([hidden]) .ptabs__copy > :nth-child(2) { animation-delay: 0.08s; }
  .ptabs__panel:not([hidden]) .ptabs__copy > :nth-child(3) { animation-delay: 0.16s; }
  .ptabs__panel:not([hidden]) .ptabs__copy > :nth-child(4) { animation-delay: 0.24s; }
  .ptabs__panel:not([hidden]) .ptabs__copy > :nth-child(5) { animation-delay: 0.34s; }
  .ptabs__panel:not([hidden]) .ptabs__copy > :nth-child(6) { animation-delay: 0.44s; }
  .ptabs__panel:not([hidden]) .ptabs__copy .spec { animation: ptab-rise 0.6s cubic-bezier(0.22, 1, 0.36, 1) both; }
  .ptabs__panel:not([hidden]) .ptabs__copy .spec:nth-child(1) { animation-delay: 0.36s; }
  .ptabs__panel:not([hidden]) .ptabs__copy .spec:nth-child(2) { animation-delay: 0.44s; }
  .ptabs__panel:not([hidden]) .ptabs__copy .spec:nth-child(3) { animation-delay: 0.52s; }
  .ptabs__panel:not([hidden]) .ptabs__copy .spec:nth-child(4) { animation-delay: 0.6s; }
}