/* About story (template-parts/home/about-story.php), converted from the guardrail
   sections/about-story.liquid stylesheet. Per-instance values arrive as --hg-about-* custom
   properties on the section; the fallbacks are the Shopify schema defaults. Two-class selectors
   only where Ecomus styles the element itself (p, h2, a, blockquote, figure, ul, strong). */

.hg-about {
  padding-block: var(--hg-about-pt-m, 56px) var(--hg-about-pb-m, 72px);
  background: var(--hg-about-bg, #0b0b0b);
  color: var(--hg-about-text, #f2ede4);
  font-family: var(--hg-font-body);
  font-size: 14px;
  line-height: 1.6;
}
.hg-about__inner {
  box-sizing: border-box;
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: 20px;
}
.hg-about__head {
  max-width: var(--hg-about-head-w, 760px);
  margin-bottom: 36px;
}
.hg-about .hg-about__eyebrow {
  margin: 0 0 10px;
  color: var(--hg-about-accent, var(--hg-accent));
  font-family: var(--hg-font-body);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  overflow-wrap: anywhere;
}
.hg-about .hg-about__title {
  margin: 0 0 14px;
  color: inherit;
  font-size: var(--hg-about-title-m, 32px);
  line-height: 1;
  letter-spacing: -0.025em;
  overflow-wrap: anywhere;
}
.hg-about .hg-about__lede {
  margin: 0;
  font-size: var(--hg-about-lede, 18px);
  line-height: 1.6;
  opacity: 0.9;
  overflow-wrap: anywhere;
}
.hg-about__body {
  display: flex;
  flex-direction: column;
  gap: var(--hg-about-gap, 40px);
}
.hg-about__chapter {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 18px;
  align-items: center;
}
.hg-about__media {
  position: relative;
  aspect-ratio: var(--hg-about-ratio, 4 / 3);
  overflow: hidden;
  border-radius: 6px;
  background: var(--hg-about-media-bg, #161514);
}
/* The frame rounds the corners; Ecomus rounds images by 10px, which would show inside it. */
.hg-about .hg-about__img {
  display: block;
  width: 100%;
  max-width: none;
  height: 100%;
  border-radius: 0;
  object-fit: cover;
}
.hg-about__placeholder { color: color-mix(in srgb, var(--hg-about-text, #f2ede4) 8%, transparent); }
/* While a chapter's photo downloads, the loading shade and spinner (base.css) cover its frame. The
   cover chapter's frame waits its own way (below). */
html.hg-iw .hg-about__chapter:not(.hg-about__chapter--cover) > .hg-about__media:has(> img:not(.hg-img-ok))::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--hg-wait);
  pointer-events: none;
  animation: var(--hg-wait-late);
}
html.hg-iw .hg-about__chapter:not(.hg-about__chapter--cover) > .hg-about__media:has(> img:not(.hg-img-ok))::after {
  content: "";
  position: absolute;
  inset: 0;
  width: 18px;
  height: 18px;
  margin: auto;
  background: var(--hg-wait-spinner) center / contain no-repeat;
  pointer-events: none;
  animation: var(--hg-wait-late), var(--hg-wait-spin);
}
.hg-about__text { min-width: 0; }
.hg-about__label {
  display: inline-block;
  margin-bottom: 8px;
  color: var(--hg-about-accent, var(--hg-accent));
  font-family: var(--hg-font-heading);
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.14em;
  overflow-wrap: anywhere;
}
.hg-about .hg-about__chapter-title {
  margin: 0 0 10px;
  color: inherit;
  font-size: clamp(var(--hg-about-ch-m, 24px), 5vw, var(--hg-about-ch, 36px));
  line-height: 1.05;
  letter-spacing: -0.025em;
  overflow-wrap: anywhere;
}
.hg-about__rte {
  font-size: var(--hg-about-body, 16px);
  line-height: 1.7;
  opacity: 0.88;
  overflow-wrap: anywhere;
}
.hg-about .hg-about__rte p { margin: 0 0 12px; }
.hg-about .hg-about__rte strong { font-weight: 700; }
.hg-about .hg-about__rte a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
}
/* Cover chapter: the photo fills the chapter and the copy sits straight on it, lifted by a layered
   shadow. A soft dark halo behind the copy (no box, no blur) keeps it readable over the busy
   photo; the label becomes an accent pill because the dark red accent would vanish on the photo. */
.hg-about__chapter--cover {
  position: relative;
  isolation: isolate;
  align-items: end;
  min-height: clamp(460px, 135vw, 640px);
  padding: 20px;
  overflow: hidden;
  border-radius: 6px;
  background: var(--hg-about-media-bg, #161514);
}
.hg-about__chapter--cover .hg-about__media {
  position: absolute;
  inset: 0;
  z-index: -1;
  aspect-ratio: auto;
  border-radius: 0;
}
.hg-about__chapter--cover .hg-about__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgb(0 0 0 / 0) 35%, rgb(0 0 0 / 0.5));
  pointer-events: none;
}
/* While the cover photo downloads, the loading shade (base.css) covers it, under its gradient. The
   spinner hangs on the chapter, in the photo's layer behind the copy, painted after the photo. */
html.hg-iw .hg-about__chapter--cover > .hg-about__media:has(> img:not(.hg-img-ok))::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--hg-wait);
  pointer-events: none;
  animation: var(--hg-wait-late);
}
html.hg-iw .hg-about__chapter--cover:has(> .hg-about__media > img:not(.hg-img-ok))::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  width: 18px;
  height: 18px;
  margin: auto;
  background: var(--hg-wait-spinner) center / contain no-repeat;
  pointer-events: none;
  animation: var(--hg-wait-late), var(--hg-wait-spin);
}
.hg-about__chapter--cover .hg-about__img { object-position: 36% 50%; }
.hg-about__chapter--cover .hg-about__text {
  position: relative;
  text-shadow: 0 1px 1px rgb(0 0 0 / 0.6), 0 3px 8px rgb(0 0 0 / 0.55), 0 12px 32px rgb(0 0 0 / 0.6);
}
.hg-about__chapter--cover .hg-about__text::before {
  content: "";
  position: absolute;
  inset: -35% -30%;
  z-index: -1;
  background: radial-gradient(closest-side, rgb(0 0 0 / 0.6), rgb(0 0 0 / 0.5) 60%, rgb(0 0 0 / 0.38) 82%, rgb(0 0 0 / 0));
  pointer-events: none;
}
.hg-about__chapter--cover .hg-about__label {
  margin-bottom: 12px;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--hg-about-accent, var(--hg-accent));
  box-shadow: 0 4px 14px rgb(0 0 0 / 0.35);
  color: var(--hg-about-btn-text, #fff);
  font-size: 12px;
  text-shadow: none;
}
.hg-about__chapter--cover .hg-about__chapter-title { text-wrap: balance; }
.hg-about__chapter--cover .hg-about__rte {
  opacity: 1;
  text-wrap: pretty;
}
.hg-about .hg-about__quote {
  margin: 0;
  padding-block: 6px;
  padding-inline: 18px 0;
  border-inline-start: 3px solid var(--hg-about-accent, var(--hg-accent));
  font-weight: 600;
  line-height: 1.35;
}
.hg-about .hg-about__quote blockquote {
  position: static;
  margin: 0;
  padding: 0;
  border: 0;
  box-shadow: none;
  color: inherit;
  font-size: clamp(20px, 4.5vw, 28px);
  font-style: normal;
  font-weight: inherit;
  line-height: inherit;
  overflow-wrap: anywhere;
}
.hg-about .hg-about__quote blockquote::before,
.hg-about .hg-about__quote blockquote::after { content: none; }
.hg-about .hg-about__quote figcaption {
  margin-top: 10px;
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0.7;
}
.hg-about .hg-about__values {
  display: grid;
  grid-template-columns: repeat(var(--hg-about-values-m, 3), minmax(0, 1fr));
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.hg-about .hg-about__value {
  min-width: 0;
  margin: 0;
  padding-top: 10px;
  border-top: 2px solid var(--hg-about-accent, var(--hg-accent));
  font-size: 13px;
  line-height: 1.6;
  overflow-wrap: anywhere;
}
.hg-about .hg-about__value-title {
  display: block;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.hg-about__value-text {
  display: block;
  margin-top: 3px;
  opacity: 0.7;
}
.hg-about__buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 8px;
}
.hg-about .hg-about__btn {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 50px;
  padding: 0 24px;
  border: 0;
  border-radius: var(--hg-about-btn-radius, 4px);
  background: var(--hg-about-accent, var(--hg-accent));
  color: var(--hg-about-btn-text, #fff);
  font-family: var(--hg-font-heading);
  font-size: 14px;
  font-weight: 800;
  line-height: 1.6;
  letter-spacing: 0.08em;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  transition: filter 0.2s ease, background-color 0.2s ease, color 0.2s ease;
}
.hg-about .hg-about__btn--outline {
  border: 2px solid var(--hg-about-text, #f2ede4);
  background: transparent;
  color: var(--hg-about-text, #f2ede4);
}
.hg-about .hg-about__btn--primary:hover { filter: brightness(1.08); }
.hg-about .hg-about__btn--outline:hover {
  background: var(--hg-about-text, #f2ede4);
  color: var(--hg-about-bg, #0b0b0b);
}
.hg-about .hg-about__btn:focus-visible {
  outline: 2px solid var(--hg-about-text, #f2ede4);
  outline-offset: 3px;
}

@media (max-width: 749px) {
  .hg-about--vis-desktop { display: none; }
}
@media (min-width: 750px) {
  .hg-about { padding-block: var(--hg-about-pt, 56px) var(--hg-about-pb, 72px); }
  .hg-about .hg-about__values { grid-template-columns: repeat(var(--hg-about-values, 3), minmax(0, 1fr)); }
  .hg-about--vis-mobile { display: none; }
  .hg-about__chapter--cover {
    justify-items: end;
    padding: 36px;
  }
  .hg-about__chapter--cover .hg-about__text { max-width: 460px; }
}
@media (min-width: 768px) {
  .hg-about .hg-about__title { font-size: calc(var(--hg-about-title, 63px) * 0.818); }
}
@media (min-width: 990px) {
  .hg-about__inner { padding-inline: 40px; }
  .hg-about__chapter {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 56px;
  }
  .hg-about__chapter--flip .hg-about__media { order: 2; }
  /* One cell; the box keeps the photo's 16 / 9 and grows only if the copy needs more height. */
  .hg-about__chapter--cover {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    min-height: auto;
    aspect-ratio: 16 / 9;
    padding: 56px;
  }
  .hg-about__chapter--cover .hg-about__text { max-width: 480px; }
}
@media (min-width: 1200px) {
  .hg-about .hg-about__title { font-size: var(--hg-about-title, 63px); }
}
@media (prefers-reduced-motion: reduce) {
  .hg-about .hg-about__btn { transition: none; }
}