/* PRECEDENCE About V46 — viewport-anchored centering */

body[data-page="about"],
body:has(.about-page-v46:not([hidden])) {
  min-height: 100svh;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  background: #a9412e !important;
}

body[data-page="about"]::before,
body:has(.about-page-v46:not([hidden]))::before {
  content: "" !important;
  position: fixed !important;
  inset: 0 !important;
  z-index: 0 !important;
  display: block !important;
  pointer-events: none !important;
  background:
    linear-gradient(90deg, rgba(42, 11, 5, .10), transparent 18% 82%, rgba(42, 11, 5, .12)),
    linear-gradient(180deg, rgba(255, 239, 204, .04), rgba(42, 11, 5, .08)),
    url("assets/brick-wall-socials.png") center center / cover no-repeat !important;
}

body[data-page="about"]::after,
body:has(.about-page-v46:not([hidden]))::after {
  content: "" !important;
  position: fixed !important;
  inset: 0 !important;
  z-index: 0 !important;
  display: block !important;
  pointer-events: none !important;
  background:
    radial-gradient(circle at 12% 18%, rgba(255,255,255,.07), transparent 22%),
    radial-gradient(circle at 84% 24%, rgba(221,255,0,.045), transparent 24%),
    radial-gradient(circle at 48% 82%, rgba(20,8,4,.10), transparent 34%);
  mix-blend-mode: soft-light;
}

body[data-page="about"] .site-header,
body[data-page="about"] main#top,
body:has(.about-page-v46:not([hidden])) .site-header,
body:has(.about-page-v46:not([hidden])) main#top {
  position: relative;
  z-index: 2;
}

body[data-page="about"] .site-header,
body:has(.about-page-v46:not([hidden])) .site-header {
  background: rgba(246,242,232,.95) !important;
  backdrop-filter: blur(9px);
  -webkit-backdrop-filter: blur(9px);
}

body[data-page="about"] main#top,
body:has(.about-page-v46:not([hidden])) main#top,
body[data-page="about"] .about-page-v46,
body:has(.about-page-v46:not([hidden])) .about-page-v46 {
  width: 100% !important;
  max-width: none !important;
  min-height: calc(100svh - var(--header-height, 86px));
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  background-image: none !important;
}

body[data-page="about"] main#top::before,
body[data-page="about"] main#top::after,
body:has(.about-page-v46:not([hidden])) main#top::before,
body:has(.about-page-v46:not([hidden])) main#top::after,
.about-page-v46::before,
.about-page-v46::after {
  content: none !important;
  display: none !important;
}

body[data-page="about"] .site-footer,
body:has(.about-page-v46:not([hidden])) .site-footer {
  display: none !important;
}

/* This is the centering fix: position the main About column from the true viewport center. */
body[data-page="about"] .about-page-v46 .about-wall-v46,
body:has(.about-page-v46:not([hidden])) .about-page-v46 .about-wall-v46 {
  position: relative !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: min(1220px, 100vw) !important;
  max-width: 1220px !important;
  min-height: calc(100svh - var(--header-height, 86px));
  margin: 0 !important;
  padding: clamp(22px, 2.5vw, 34px) clamp(14px, 2.5vw, 28px) clamp(38px, 4vw, 56px) !important;
  display: grid !important;
  gap: clamp(18px, 2vw, 28px) !important;
  justify-items: center !important;
  align-content: start !important;
  background: transparent !important;
}

.about-hero-v46,
.about-local-v46,
.about-cta-strip-v46 {
  width: 100%;
  margin-inline: auto !important;
  display: grid;
  justify-items: center;
}

.about-hero-v46 > img {
  display: block;
  width: min(760px, 86vw);
  height: auto;
  margin-inline: auto;
  filter: drop-shadow(10px 12px 0 rgba(31, 8, 3, .22));
}

.about-principles-v46 {
  width: min(1050px, 100%);
  margin-inline: auto !important;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(14px, 1.8vw, 24px);
  align-items: start;
  justify-self: center;
}

.about-card-v46 {
  display: block;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
}
.about-card-v46 img {
  display: block;
  width: 100%;
  height: auto;
  filter: drop-shadow(9px 11px 0 rgba(31, 8, 3, .20));
}
.tilt-left-v46 { transform: rotate(-1.15deg); }
.tilt-right-v46 { transform: rotate(1deg); }
.tilt-left-soft-v46 { transform: rotate(-.7deg); }
.tilt-right-soft-v46 { transform: rotate(.65deg); }

.about-local-v46 img {
  display: block;
  width: min(730px, 80vw);
  height: auto;
  margin-inline: auto;
  filter: drop-shadow(10px 12px 0 rgba(31, 8, 3, .20));
}

.about-cta-strip-v46 {
  width: min(960px, 100%);
  margin-inline: auto !important;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(20px, 2vw, 30px);
  align-items: start;
}
.about-asset-cta-v46 {
  appearance: none;
  display: grid;
  place-items: center;
  align-self: start;
  border: 0;
  padding: 0;
  margin: 0;
  background: transparent;
  text-decoration: none;
  cursor: pointer;
  transition: transform 160ms ease;
}
.about-asset-cta-v46 img {
  display: block;
  width: 100%;
  max-width: 430px;
  height: auto;
  pointer-events: none;
  filter: drop-shadow(11px 12px 0 rgba(31, 8, 3, .22));
}
.about-asset-cta-v46:hover,
.about-asset-cta-v46:focus-visible {
  transform: translateY(-4px) scale(1.01);
}
.about-asset-cta-v46:focus-visible {
  outline: 3px solid #fff6c2;
  outline-offset: 4px;
}

@media (max-width: 920px) {
  body[data-page="about"] .about-page-v46 .about-wall-v46,
  body:has(.about-page-v46:not([hidden])) .about-page-v46 .about-wall-v46 {
    width: 100vw !important;
  }
  .about-principles-v46,
  .about-cta-strip-v46 {
    grid-template-columns: 1fr;
  }
  .tilt-left-v46,
  .tilt-right-v46,
  .tilt-left-soft-v46,
  .tilt-right-soft-v46 {
    transform: none;
  }
  .about-hero-v46 > img,
  .about-local-v46 img {
    width: min(92vw, 700px);
  }
  .about-asset-cta-v46 img {
    max-width: min(92vw, 520px);
  }
}

@media (max-width: 620px) {
  body[data-page="about"] .about-page-v46 .about-wall-v46,
  body:has(.about-page-v46:not([hidden])) .about-page-v46 .about-wall-v46 {
    padding: 16px 8px 26px !important;
    gap: 16px !important;
  }
  .about-card-v46 img,
  .about-asset-cta-v46 img,
  .about-hero-v46 > img,
  .about-local-v46 img {
    width: min(96vw, 640px);
    max-width: 100%;
  }
}