:root {
  --red: #f05f56;
  --red-deep: #c51c11;
  --ink: #1a1a1a;
  --ink-deep: #101010;
  --muted: #5a5a5a;
  --paper: #ffffff;
  --band: #f5f5f5;
  --line: #e8e8e8;
  --display: "Archivo", sans-serif;
  --body: "DM Sans", sans-serif;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}
* {
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
}
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  line-height: 1.5;
  overflow-x: hidden;
}
a {
  color: inherit;
  text-decoration: none;
}
img {
  display: block;
  width: 100%;
}
button,
input,
textarea,
select {
  font: inherit;
  color: inherit;
}
.wrap {
  width: min(100% - 40px, 1240px);
  margin: auto;
}
.header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--ink);
  color: var(--paper);
  border-bottom: 1px solid var(--line);
}
.nav {
  height: 112px;
  display: flex;
  align-items: center;
  gap: 30px;
}
.logo {
  display: flex;
  align-items: center;
  gap: 13px;
  margin-right: auto;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.logo svg {
  width: 64px;
  height: 64px;
  transition: 0.55s var(--ease);
}
.logo b {
  font-size: 16px;
  transition: 0.45s var(--ease);
}
.header.compact .logo svg {
  width: 38px;
  height: 38px;
  transform: rotate(-8deg);
}
.header.compact .logo b {
  font-size: 13px;
}
.logo .shell {
  fill: var(--paper);
}
.logo .cut {
  fill: var(--ink);
}
.menu {
  display: flex;
  align-items: center;
  gap: 26px;
  font-size: 14px;
  font-weight: 600;
}
.menu a {
  opacity: 0.72;
}
.menu a:hover,
.menu a.active {
  opacity: 1;
}
.pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 2px solid currentColor;
  border-radius: 999px;
  padding: 12px 20px;
  font-weight: 700;
  text-transform: uppercase;
  font-size: 12px;
  letter-spacing: 0.08em;
  transition: 0.25s;
}
.pill:hover {
  transform: translateY(-2px);
}
.pill.fill {
  background: var(--red-deep);
  border-color: var(--red-deep);
  color: var(--paper);
}
.menu-toggle {
  display: none;
  background: 0;
  border: 0;
  color: var(--paper);
  font-size: 26px;
}
.hero {
  position: relative;
  min-height: calc(100svh - 112px);
  background: var(--ink);
  color: var(--paper);
  display: grid;
  align-items: end;
  overflow: hidden;
}
.hero-media {
  position: absolute;
  inset: 0;
}
.hero-media img {
  height: 100%;
  object-fit: cover;
  object-position: center;
  filter: saturate(0.85);
}
.hero-media:after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      90deg,
      color-mix(in srgb, var(--ink) 94%, transparent),
      color-mix(in srgb, var(--ink) 50%, transparent) 60%,
      color-mix(in srgb, var(--ink) 10%, transparent)
    ),
    linear-gradient(0deg, color-mix(in srgb, var(--ink) 80%, transparent), transparent 55%);
}
.hero-copy {
  position: relative;
  padding: clamp(80px, 12vw, 150px) 0 46px;
}
.kicker {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.kicker:before {
  content: "";
  width: 10px;
  height: 10px;
  background: var(--red);
  transform: rotate(45deg);
}
h1,
h2,
.display {
  font-family: var(--display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: -0.025em;
  line-height: 0.88;
}
h1 {
  font-size: clamp(58px, 9.6vw, 145px);
  max-width: 10ch;
  margin: 18px 0 24px;
}
.hero p {
  max-width: 560px;
  color: color-mix(in srgb, var(--paper) 78%, var(--ink));
  font-size: clamp(17px, 2vw, 21px);
}
.actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 28px;
}
.service-bar {
  position: relative;
  border-top: 1px solid color-mix(in srgb, var(--paper) 20%, transparent);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin-top: 55px;
  padding-top: 20px;
  gap: 20px;
}
.service-bar small {
  display: block;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: color-mix(in srgb, var(--paper) 52%, var(--ink));
  font-size: 10px;
}
.service-bar strong {
  font-size: 15px;
}
.ticker {
  background: var(--red);
  color: var(--ink);
  overflow: hidden;
  padding: 14px 0;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  white-space: nowrap;
}
.ticker div {
  display: inline-block;
  animation: ticker 22s linear infinite;
}
.ticker span {
  padding: 0 24px;
}
@keyframes ticker {
  to {
    transform: translateX(-50%);
  }
}
.section {
  padding: clamp(78px, 10vw, 140px) 0;
}
.section.dark {
  background: var(--ink);
  color: var(--paper);
}
.section.band {
  background: var(--band);
}
.section.cta {
  background: var(--paper);
  color: var(--ink);
  border-top: 1px solid var(--line);
  padding: clamp(104px, 13vw, 180px) 0;
}
.section-head {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 40px;
  margin-bottom: 55px;
}
.section h2 {
  font-size: clamp(46px, 7vw, 96px);
  margin: 0;
  max-width: 11ch;
}
.section-head p {
  max-width: 530px;
  color: var(--muted);
  align-self: end;
  font-size: 18px;
}
.dark .section-head p {
  color: color-mix(in srgb, var(--paper) 64%, var(--ink));
}
.grid {
  display: grid;
  gap: 18px;
}
.grid.three {
  grid-template-columns: repeat(3, 1fr);
}
.grid.four {
  grid-template-columns: repeat(4, 1fr);
}
.panel {
  border: 1px solid var(--line);
  border-radius: 26px;
  padding: 30px;
  min-height: 240px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: 0.35s var(--ease);
}
.panel:hover {
  transform: translateY(-7px);
  background: var(--band);
}
.dark .panel {
  border-color: color-mix(in srgb, var(--paper) 13%, var(--ink));
}
/* #151c1e was 1.008:1 against the new --ink -- the lift had become invisible. */
.dark .panel:hover {
  background: color-mix(in srgb, var(--paper) 10%, var(--ink));
}
.panel .num {
  font-family: var(--display);
  font-size: 44px;
  color: var(--red-deep);
}
.panel h3 {
  font-size: 22px;
  margin: 32px 0 8px;
}
.panel p {
  color: var(--muted);
  margin: 0;
}
/* --red-deep is only 2.94:1 on --ink; the lighter --red clears large-text AA there. */
.dark .panel .num {
  color: var(--red);
}
.photo-split {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  min-height: 700px;
}
.photo-split img {
  height: 100%;
  object-fit: cover;
}
.photo-copy {
  padding: clamp(55px, 8vw, 110px);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.photo-copy h2 {
  font-size: clamp(50px, 7vw, 100px);
  margin: 18px 0 28px;
}
.photo-copy p {
  max-width: 520px;
  font-size: 18px;
  color: var(--muted);
}
.statement {
  font-family: var(--display);
  font-size: clamp(48px, 8.5vw, 128px);
  line-height: 0.9;
  text-transform: uppercase;
  margin: 0;
}
.statement em {
  font-style: normal;
  color: var(--red-deep);
}
.poster {
  aspect-ratio: 4/5;
  border-radius: 26px;
  padding: 28px;
  background: var(--ink);
  color: var(--paper);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.poster:nth-child(2n) {
  background: var(--red-deep);
}
.poster:nth-child(3n) {
  background: var(--ink);
}
.poster h3 {
  font-family: var(--display);
  font-size: clamp(26px, 3vw, 42px);
  line-height: 0.95;
  text-transform: uppercase;
  margin: 0;
}
.poster small {
  text-transform: uppercase;
  letter-spacing: 0.14em;
}
.poster .arrow {
  font-size: 36px;
  align-self: flex-end;
}
.page-hero {
  background: var(--ink);
  color: var(--paper);
  padding: clamp(85px, 12vw, 160px) 0;
}
.page-hero h1 {
  font-size: clamp(60px, 9vw, 128px);
  margin: 15px 0 20px;
}
.page-hero p {
  font-size: 20px;
  max-width: 650px;
  color: color-mix(in srgb, var(--paper) 69%, var(--ink));
}
.content {
  max-width: 820px;
}
.content h2 {
  font-size: clamp(38px, 5vw, 68px);
  margin: 70px 0 20px;
}
.content h2:first-child {
  margin-top: 0;
}
.content h3 {
  font-size: 22px;
  margin: 34px 0 8px;
}
.content p {
  font-size: 18px;
  color: var(--muted);
}
.belief {
  border-top: 1px solid var(--line);
  padding: 32px 0;
  display: grid;
  grid-template-columns: 70px 1fr;
  gap: 24px;
}
.belief b {
  font-family: var(--display);
  font-size: 26px;
  color: var(--red-deep);
}
.team img {
  aspect-ratio: 4/5;
  object-fit: cover;
  border-radius: 22px;
}
.team h3 {
  font-size: 22px;
  margin: 16px 0 2px;
}
.team p {
  margin: 0;
  color: var(--red-deep);
  font-weight: 700;
}
.faq {
  border-top: 1px solid var(--line);
}
.faq button {
  width: 100%;
  background: 0;
  border: 0;
  border-bottom: 1px solid var(--line);
  padding: 22px 0;
  text-align: left;
  font-weight: 700;
  font-size: 18px;
  display: flex;
  justify-content: space-between;
}
.faq div {
  display: none;
  padding: 0 0 24px;
  color: var(--muted);
}
.faq.open div {
  display: block;
}
.form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}
.form label {
  font-weight: 700;
  font-size: 13px;
}
.form input,
.form textarea,
.form select {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--paper);
  padding: 15px;
  margin-top: 6px;
}
.form .wide {
  grid-column: 1/-1;
}
.form textarea {
  min-height: 140px;
}
.footer {
  background: var(--paper);
  color: var(--ink);
  padding: 70px 0 25px;
}
.footer-main {
  display: grid;
  grid-template-columns: 2fr repeat(3, 1fr);
  gap: 50px;
}
.footer h3 {
  font-family: var(--display);
  font-size: 34px;
  text-transform: uppercase;
  margin: 0 0 15px;
}
.footer h4 {
  text-transform: uppercase;
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--muted);
}
.footer ul {
  list-style: none;
  padding: 0;
  line-height: 2;
}
.footer p {
  color: var(--muted);
}
.footer a {
  color: var(--red-deep);
}
.footer a:hover {
  color: var(--ink);
}
.footer-bottom {
  border-top: 1px solid var(--line);
  margin-top: 50px;
  padding-top: 22px;
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: var(--muted);
}
[data-reveal] {
  opacity: 0;
  transform: translateY(28px);
  transition: 0.8s var(--ease);
}
[data-reveal].seen {
  opacity: 1;
  transform: none;
}
@media (max-width: 900px) {
  .nav {
    height: 72px;
  }
  .logo svg {
    width: 40px;
    height: 40px;
  }
  .menu-toggle {
    display: block;
  }
  .menu {
    position: fixed;
    inset: 72px 0 auto;
    background: var(--ink);
    padding: 24px;
    display: none;
    flex-direction: column;
    align-items: flex-start;
  }
  .menu.open {
    display: flex;
  }
  .nav > .pill {
    display: none;
  }
  .hero {
    min-height: calc(100svh - 72px);
  }
  .section-head,
  .photo-split {
    grid-template-columns: 1fr;
  }
  .grid.four,
  .grid.three {
    grid-template-columns: repeat(2, 1fr);
  }
  .photo-split img {
    height: 520px;
  }
  .footer-main {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 600px) {
  .wrap {
    width: min(100% - 28px, 1240px);
  }
  .service-bar {
    grid-template-columns: 1fr;
  }
  .grid.four,
  .grid.three {
    grid-template-columns: 1fr;
  }
  .photo-split img {
    height: 390px;
  }
  .photo-copy {
    padding: 55px 24px;
  }
  .form {
    grid-template-columns: 1fr;
  }
  .form .wide {
    grid-column: auto;
  }
  /* Mobile footer: statement full-width, Explore + Connect side by side,
     Sunday full-width. Stacking all four ran the footer past 1000px. */
  .footer {
    padding: 46px 0 24px;
  }
  .footer-main {
    grid-template-columns: 1fr 1fr;
    gap: 30px 24px;
  }
  .footer-main > :first-child,
  .footer-main > :last-child {
    grid-column: 1 / -1;
  }
  /* .footer .footer-main h3 outranks the appended .footer h3 { font-size: 30px }
     at the end of the file, which a plain .footer h3 here would lose to. */
  .footer .footer-main h3 {
    font-size: 26px;
    margin-bottom: 10px;
  }
  .footer ul {
    line-height: 1.9;
  }
  .footer-bottom {
    display: block;
    margin-top: 30px;
    padding-top: 16px;
  }
  .poster {
    aspect-ratio: 1/1;
  }
}
@media (prefers-reduced-motion: reduce) {
  * {
    animation: none !important;
    transition: none !important;
  }
}

/* ===========================================================================
   Merged from css/official-logo.css, which used to be injected by js/main.js
   as a second stylesheet. It is appended verbatim and in its original order so
   it keeps the exact cascade position it had as a later sheet; that is why the
   !important flags it carried are no longer needed. Do not reorder or fold
   these rules into the ones above -- several of them win only by coming last.
   =========================================================================== */
.header {
  background: var(--paper);
  color: var(--ink);
  border-bottom-color: var(--line);
}
.logo,
.menu a {
  color: var(--ink);
}
.logo b {
  font-family: var(--display);
  font-weight: 700;
  letter-spacing: 0.01em;
}
.menu a:hover,
.menu a.active {
  color: var(--red-deep);
}
.logo svg {
  display: none;
}
.logo-image {
  position: relative;
  width: 72px;
  height: 72px;
  padding: 7px;
  display: block;
  transition: width 0.2s ease, height 0.2s ease, padding 0.2s ease;
}
.logo-image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 0;
}
.logo-image:after {
  content: "";
  position: absolute;
  inset: 7px;
  background: var(--ink);
  -webkit-mask: url("../assets/images/axiom-logo-dark.png") center/contain no-repeat;
  mask: url("../assets/images/axiom-logo-dark.png") center/contain no-repeat;
}
.header.compact .logo-image {
  width: 42px;
  height: 42px;
  padding: 3px;
}
.header.compact .logo-image:after {
  inset: 3px;
}
.menu-toggle {
  color: var(--ink);
}
@media (max-width: 900px) {
  .logo-image {
    width: 44px;
    height: 44px;
    padding: 3px;
  }
  .logo-image:after {
    inset: 3px;
  }
  .menu {
    background: var(--paper);
    border-top: 1px solid var(--line);
  }
}

/* Quieter type hierarchy: one expressive moment, clean typography elsewhere. */
.section h2,
.photo-copy h2,
.page-hero h1,
.poster h3,
.statement,
.footer h3 {
  font-family: var(--body);
  font-weight: 700;
  letter-spacing: -0.045em;
  line-height: 0.98;
  text-transform: none;
}
.section h2 {
  font-size: clamp(38px, 5.2vw, 70px);
}
.photo-copy h2 {
  font-size: clamp(40px, 5.4vw, 72px);
}
.page-hero h1 {
  font-size: clamp(52px, 7vw, 94px);
}
.poster h3 {
  font-size: clamp(24px, 2.5vw, 34px);
  line-height: 1.05;
}
.statement {
  font-size: clamp(42px, 6.5vw, 88px);
  line-height: 1;
}
.footer h3 {
  font-size: 30px;
  line-height: 1.05;
}
.panel .num,
.belief b {
  font-family: var(--body);
  font-weight: 700;
}
.hero-welcome,
.hero-time {
  font-family: var(--body);
  text-transform: none;
  letter-spacing: -0.025em;
  line-height: 1.1;
}
.hero-welcome {
  font-size: clamp(24px, 3vw, 42px);
  margin: 0 0 10px;
}
.hero-time {
  font-size: clamp(22px, 2.6vw, 36px);
  margin: 0 0 20px;
}
.hero h1 {
  margin-top: 0;
}
.hero .service-bar {
  grid-template-columns: repeat(2, 1fr);
}

/* ===========================================================================
   HEADER NAV: three click-to-open groups, two links, the CTA. Desktop panels
   drop down under their trigger; inside the phone drawer the same groups are
   accordions. Placed after the merged header overrides so these win on order.
   =========================================================================== */
.menu .group {
  position: relative;
}
.menu .trigger {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  font: inherit;
  color: var(--ink);
  opacity: 0.72;
  cursor: pointer;
}
.menu .trigger:hover,
.menu .trigger.active,
.menu .group.open > .trigger {
  opacity: 1;
  color: var(--red-deep);
}
/* The rotation lives on the element, not the ::before, so the global
   reduced-motion rule (* { transition: none }) can switch it off. */
.menu .chev {
  display: block;
  transform: translateY(-2px) rotate(45deg);
  transition: transform 0.2s var(--ease);
}
.menu .chev::before {
  content: "";
  display: block;
  width: 6px;
  height: 6px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
}
.menu .group.open > .trigger .chev {
  transform: translateY(2px) rotate(225deg);
}
.menu .panel {
  display: none;
  position: absolute;
  min-height: 0;
  justify-content: flex-start;
  top: calc(100% + 8px);
  left: -14px;
  width: max-content;
  min-width: 148px;
  padding: 5px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: 0 14px 34px color-mix(in srgb, var(--ink) 14%, transparent);
  z-index: 60;
}
.menu .group.open > .panel {
  display: block;
}
.menu .panel a {
  display: block;
  padding: 8px 11px;
  border-radius: 8px;
  font-size: 15px;
  opacity: 1;
  color: var(--ink);
}
.menu .panel a:hover,
.menu .panel a.active {
  background: var(--band);
  color: var(--red-deep);
}
.menu .trigger:focus-visible,
.menu a:focus-visible,
.nav .pill:focus-visible,
.menu-toggle:focus-visible,
.logo:focus-visible {
  outline: 2px solid var(--red-deep);
  outline-offset: 3px;
}
.menu .menu-cta {
  display: none;
  opacity: 1; /* .menu a dims links to .72; the drawer button must stay solid */
}
@media (max-width: 900px) {
  .menu {
    gap: 0;
    align-items: stretch;
    padding: 6px 24px 24px;
    max-height: calc(100svh - 72px);
    overflow-y: auto;
  }
  .menu .group,
  .menu .link {
    width: 100%;
  }
  .menu .trigger,
  .menu .link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 14px 0;
    border-bottom: 1px solid var(--line);
    font-size: 16px;
    opacity: 1;
    color: var(--ink);
  }
  .menu .panel {
    position: static;
    width: auto;
    min-width: 0;
    padding: 2px 0 8px 14px;
    background: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }
  .menu .panel a {
    padding: 11px 0;
    border-radius: 0;
    font-size: 16px;
  }
  .menu .menu-cta {
    display: flex;
    width: 100%;
    margin-top: 18px;
  }
}

/* ===========================================================================
   HOMEPAGE (index.html only)
   Ported from REFERENCE-homepage.html. Every selector is scoped under .home
   (which sits on <main>) because the reference reuses class names this repo
   already owns -- .wrap, .hero, .nav, .arrow -- and .wrap in particular is
   shared by the other eight pages and by the header and footer that
   js/main.js injects.

   Colours resolve from the :root tokens. The reference's #0A0A0A scrims are
   expressed as --ink-deep (#101010) at the same alphas. Two literals are kept
   deliberately, exactly as the reference had them: the #DEDEDE hairline in
   the grey section and #a81710 on .btn:hover.

   Image URLs here are relative to this stylesheet (../assets/images/...).
   The slide URLs that JS assigns are relative to the document
   (assets/images/...). Those two prefixes are not interchangeable.
   =========================================================================== */
.home {
  font-size: 17px;
  -webkit-font-smoothing: antialiased;
}
.home img {
  max-width: 100%;
}
/* this repo's base h1/h2 rule uppercases; the reference's headings do not */
.home h1,
.home h2 {
  text-transform: none;
}
.home .wrap {
  width: 100%;
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: 20px;
}
/* clearance for the sticky bar, mirroring the reference's body padding */
.home-page {
  padding-bottom: 88px;
}

/* ---------- HERO ---------- */
.home .hero {
  position: relative;
  min-height: 90svh;
  display: flex;
  align-items: flex-end;
  background: var(--ink-deep);
  overflow: hidden;
}
.home .hero .slide {
  position: absolute;
  inset: 0;
  background-image: var(--img);
  background-size: cover;
  background-position: 50% 12%;
  background-repeat: no-repeat;
  opacity: 0;
  transition: opacity 1.4s ease;
}
.home .hero .slide.on {
  opacity: 1;
}
.home .hero .s1 {
  --img: url("../assets/images/h1-p.jpg");
}
@media (min-width: 860px) {
  .home .hero .s1 {
    --img: url("../assets/images/h1-d.jpg");
  }
}
.home .hero::after {
  content: "";
  position: absolute;
  inset: 0;
  /* Phone scrim. The copy block starts as high as 79% up from the hero's
     bottom edge on a short viewport, so the veil has to still be heavy there.
     White 12px text needs an effective background luminance <= 0.1833 to clear
     4.5:1; over a pure-white photo highlight that takes 255 - 239a <= 118.7,
     i.e. a >= 0.57. The curve therefore holds 58% up to 84% and only then
     releases, so the whole copy region is covered with margin. */
  background: linear-gradient(
    to top,
    var(--ink-deep) 0%,
    color-mix(in srgb, var(--ink-deep) 94%, transparent) 30%,
    color-mix(in srgb, var(--ink-deep) 84%, transparent) 55%,
    color-mix(in srgb, var(--ink-deep) 66%, transparent) 75%,
    color-mix(in srgb, var(--ink-deep) 58%, transparent) 84%,
    color-mix(in srgb, var(--ink-deep) 26%, transparent) 93%,
    color-mix(in srgb, var(--ink-deep) 0%, transparent) 100%
  );
}
.home .hero-in {
  position: relative;
  z-index: 2;
  padding: 0 20px 52px;
  width: 100%;
  max-width: 1200px;
  margin-inline: auto;
}
.home .hero h1 {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(2.9rem, 10.5vw, 5.75rem);
  line-height: 0.93;
  letter-spacing: -0.035em;
  color: var(--paper);
  margin: 0 0 18px;
  text-wrap: balance;
  max-width: 14ch;
}
.home .hero h1 em {
  font-style: normal;
  color: var(--red);
}
.home .hero p.sub {
  color: color-mix(in srgb, var(--paper) 90%, transparent);
  font-size: clamp(1.05rem, 3.4vw, 1.35rem);
  line-height: 1.4;
  margin: 0 0 22px;
  max-width: 34ch;
}
.home .hero .meta {
  font-family: var(--display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  font-size: clamp(0.72rem, 2.5vw, 0.82rem);
  color: var(--paper);
  margin: 0 0 24px;
  padding-top: 18px;
  border-top: 3px solid var(--red);
  display: inline-block;
}
.home .cta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px 24px;
}
.home .btn {
  display: inline-block;
  background: var(--red-deep);
  color: var(--paper);
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.05rem;
  padding: 17px 34px;
  border-radius: 2px;
  text-decoration: none;
  transition:
    transform 0.18s ease,
    background 0.18s ease;
}
.home .btn:hover {
  background: #a81710;
  transform: translateY(-1px);
}
.home .textlink {
  color: var(--paper);
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 5px;
  text-decoration-thickness: 1px;
  text-decoration-color: color-mix(in srgb, var(--paper) 50%, transparent);
}
.home .textlink:hover {
  text-decoration-color: var(--paper);
}

/* ---------- TIMES ---------- */
.home .times {
  padding-block: clamp(56px, 10vw, 104px);
}
.home .times .big {
  font-family: var(--display);
  font-weight: 900;
  font-size: clamp(2.6rem, 10vw, 6rem);
  line-height: 0.95;
  letter-spacing: -0.04em;
  margin: 0;
  text-wrap: balance;
}
.home .times .big em {
  font-style: normal;
  color: var(--red);
}
.home .times .where {
  margin: 26px 0 0;
  font-size: clamp(1.05rem, 2.6vw, 1.25rem);
  max-width: 40ch;
}
.home .times .where a {
  color: var(--red-deep);
  text-underline-offset: 4px;
}
.home .times .note {
  margin: 14px 0 0;
  color: var(--muted);
  font-size: clamp(1rem, 2.4vw, 1.1rem);
  max-width: 44ch;
}

/* ---------- FOUR LINES ---------- */
.home .truth {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  background: var(--band);
}
.home .truth-img {
  width: 100%;
  aspect-ratio: 4/5;
  object-fit: cover;
  object-position: 50% 42%;
}
.home .truth-list {
  padding: clamp(36px, 7vw, 72px) 20px;
}
.home .truth-list p {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(1.45rem, 5.2vw, 2.15rem);
  line-height: 1.18;
  letter-spacing: -0.02em;
  margin: 0;
  padding: 26px 0;
  border-bottom: 1px solid #dedede;
  text-wrap: balance;
}
.home .truth-list p:first-child {
  padding-top: 0;
}
.home .truth-list p:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}
@media (hover: hover) {
  .home .truth-list p {
    transition:
      padding-left 0.3s cubic-bezier(0.22, 0.61, 0.36, 1),
      border-color 0.3s ease;
  }
  .home .truth-list p:hover {
    padding-left: 16px;
    border-bottom-color: var(--red);
  }
  .home .truth-list.anim p {
    transition:
      opacity 0.55s ease,
      transform 0.55s cubic-bezier(0.22, 0.61, 0.36, 1),
      padding-left 0.3s cubic-bezier(0.22, 0.61, 0.36, 1),
      border-color 0.3s ease;
  }
}
/* staggered reveal -- only applied once JS confirms it can run, so the four
   lines stay visible if JS never runs */
.home .truth-list.anim p {
  opacity: 0;
  transform: translateY(14px);
  transition:
    opacity 0.55s ease,
    transform 0.55s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.home .truth-list.anim.in p {
  opacity: 1;
  transform: none;
}
.home .truth-list.anim.in p:nth-child(1) {
  transition-delay: 0s;
}
.home .truth-list.anim.in p:nth-child(2) {
  transition-delay: 0.11s;
}
.home .truth-list.anim.in p:nth-child(3) {
  transition-delay: 0.22s;
}
.home .truth-list.anim.in p:nth-child(4) {
  transition-delay: 0.33s;
}

/* ---------- INK BAND ---------- */
.home .band {
  position: relative;
  overflow: hidden;
  background: var(--ink-deep) url("../assets/images/band.jpg") center 42% / cover no-repeat;
  color: var(--paper);
  padding-block: clamp(76px, 13vw, 150px);
}
.home .band::before {
  content: "";
  position: absolute;
  inset: 0;
  background: color-mix(in srgb, var(--ink-deep) 52%, transparent);
}
.home .band-in {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  gap: clamp(20px, 5vw, 64px);
  justify-content: center;
  text-align: center;
}
.home .band span {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(1.9rem, 7.4vw, 4rem);
  letter-spacing: -0.03em;
  line-height: 1.05;
}
.home .band span:nth-child(3) {
  /* --red measures 2.82:1 on this photo at phone width, under the 3:1
     large-text floor; it clears at 4.19:1 from 860px up, where it stays red. */
  color: var(--paper);
}

/* ---------- KIDS ---------- */
.home .kids {
  padding-block: clamp(56px, 10vw, 104px);
}
.home .kids h2 {
  font-family: var(--display);
  font-weight: 900;
  font-size: clamp(2.1rem, 8vw, 4.25rem);
  line-height: 0.95;
  letter-spacing: -0.035em;
  margin: 0 0 clamp(32px, 6vw, 56px);
  max-width: 16ch;
  text-wrap: balance;
}
.home .kids-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(28px, 5vw, 48px);
}
.home .kids-img {
  width: 100%;
  aspect-ratio: 4/5;
  object-fit: cover;
  object-position: 50% 45%;
}
.home .kid {
  border-top: 3px solid var(--ink);
  padding-top: 16px;
}
.home .kid b {
  display: block;
  font-family: var(--display);
  font-weight: 800;
  font-size: 1.35rem;
  letter-spacing: -0.015em;
  margin-bottom: 7px;
}
.home .kid span {
  color: var(--muted);
  display: block;
  font-size: 1.02rem;
  line-height: 1.5;
}

/* ---------- NEXT STEPS ---------- */
.home .next {
  background: var(--ink-deep);
  color: var(--paper);
  padding-block: clamp(60px, 10vw, 112px);
}
.home .next-in {
  width: 100%;
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: 20px;
}
.home .next .eyebrow {
  color: var(--red);
  font-size: clamp(1.05rem, 3.4vw, 1.5rem);
  letter-spacing: 0.08em;
  font-weight: 800;
  margin-bottom: clamp(28px, 5vw, 48px);
}
.home .next .step {
  border-bottom: 1px solid color-mix(in srgb, var(--paper) 14%, transparent);
}
.home .next .step:first-of-type {
  border-top: 1px solid color-mix(in srgb, var(--paper) 14%, transparent);
}
.home .next .step-t {
  color: var(--paper);
}
.home .next .step-d {
  color: color-mix(in srgb, var(--paper) 62%, transparent);
}
.home .next .arrow {
  color: var(--red);
}
.home .next .step:hover .step-t {
  color: var(--red);
}
.home .eyebrow {
  font-family: var(--display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.74rem;
  color: var(--muted);
  margin: 0 0 clamp(24px, 4vw, 40px);
}
.home .step {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 20px;
  padding: 26px 0;
  border-bottom: 1px solid var(--line);
  text-decoration: none;
  color: inherit;
}
.home .step:first-of-type {
  border-top: 1px solid var(--line);
}
.home .step:hover .step-t {
  color: var(--red-deep);
}
.home .step-t {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(1.45rem, 5vw, 2.25rem);
  letter-spacing: -0.025em;
  line-height: 1.1;
  margin: 0 0 6px;
  transition: color 0.16s ease;
}
.home .step-d {
  color: var(--muted);
  font-size: 1rem;
  margin: 0;
  max-width: 46ch;
  line-height: 1.45;
}
.home .arrow {
  font-family: var(--display);
  font-weight: 800;
  color: var(--red-deep);
  font-size: 1.5rem;
  flex: none;
  line-height: 1;
}

/* ---------- STICKY ---------- */
.home .sticky {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 40;
  background: var(--paper);
  border-top: 1px solid var(--line);
  padding: 12px 20px calc(12px + env(safe-area-inset-bottom, 0px));
  transform: translateY(105%);
  transition: transform 0.25s ease;
}
.home .sticky.on {
  transform: translateY(0);
}
.home .sticky a {
  display: block;
  text-align: center;
  width: 100%;
}

/* ---------- 860px: the only breakpoint ---------- */
@media (min-width: 860px) {
  .home-page {
    padding-bottom: 0;
  }
  /* SPLIT HERO -- copy gets its own solid column, photo gets its own.
     Nothing overlaps, so no photo can ever be covered. */
  .home .hero {
    display: grid;
    grid-template-columns: 43% 57%;
    align-items: stretch;
    min-height: 76svh;
    background: var(--ink-deep);
  }
  /* the whole hero carries a blurred wash of the current photo, so the left
     column takes its colour from whatever is showing */
  .home .hero .slide {
    inset: 0;
    background-image: none;
  }
  .home .hero .slide::before {
    content: "";
    position: absolute;
    inset: -70px;
    background-image: var(--img);
    background-size: cover;
    background-position: 50% 30%;
    filter: blur(34px) saturate(0.85) brightness(0.52);
  }
  /* the sharp photo fades in over that wash -- no hard seam anywhere */
  .home .hero .slide::after {
    content: "";
    position: absolute;
    left: 41%;
    right: 0;
    top: 0;
    bottom: 0;
    background-image: var(--img);
    background-size: cover;
    background-position: 50% 30%;
    -webkit-mask-image: linear-gradient(to right, transparent 0%, var(--ink-deep) 20%);
    mask-image: linear-gradient(to right, transparent 0%, var(--ink-deep) 20%);
  }
  /* these two sit high in their crops -- bring the subject down a little */
  .home .hero .slide[data-img="h5"]::after {
    background-position: 50% 12%;
  }
  .home .hero .slide[data-img="h6"]::after {
    background-position: 50% 14%;
  }
  /* the neon sign sits on a dark hedge -- lift its wash and nudge the photo right */
  .home .hero .slide[data-img="h3"]::before {
    filter: blur(34px) saturate(0.9) brightness(0.86);
  }
  .home .hero .slide[data-img="h3"]::after {
    background-position: 20% 26%;
  }
  /* the toddler room is bright white -- let its wash stay light instead of
     crushing it dark. The copy's own scrim still carries the text contrast. */
  .home .hero .slide[data-img="h4"]::before {
    filter: blur(34px) saturate(0.55) brightness(1.18);
  }
  .home .hero::after {
    left: 0;
    background: linear-gradient(
      to right,
      color-mix(in srgb, var(--ink-deep) 80%, transparent) 0%,
      color-mix(in srgb, var(--ink-deep) 75%, transparent) 28%,
      color-mix(in srgb, var(--ink-deep) 56%, transparent) 42%,
      color-mix(in srgb, var(--ink-deep) 18%, transparent) 53%,
      color-mix(in srgb, var(--ink-deep) 0%, transparent) 64%
    );
  }
  .home .hero-in {
    grid-column: 1;
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: center;
    max-width: none;
    margin: 0;
    width: auto;
    padding: clamp(44px, 5vw, 72px) clamp(34px, 3.6vw, 60px);
  }
  .home .hero h1 {
    font-size: clamp(2.6rem, 4.6vw, 4.4rem);
    max-width: 13ch;
    margin-bottom: 20px;
  }
  .home .hero p.sub {
    max-width: 32ch;
    font-size: clamp(1.02rem, 1.25vw, 1.2rem);
  }
  .home .hero .meta {
    font-size: 0.78rem;
  }
  .home .truth {
    grid-template-columns: 1fr 1fr;
    align-items: stretch;
  }
  .home .truth-img {
    height: 100%;
    aspect-ratio: auto;
    min-height: 560px;
  }
  .home .truth-list {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 72px 64px;
  }
  .home .kids-grid {
    grid-template-columns: 5fr 7fr;
    align-items: start;
    gap: 64px;
  }
  .home .kids-img {
    aspect-ratio: 4/5;
  }
  .home .kids-col {
    display: grid;
    gap: 40px;
  }
  .home .band span:nth-child(3) {
    color: var(--red);
  }
  .home .sticky {
    display: none;
  }
}


/* ===========================================================================
   Plan a Visit page (visit.html). All rules are scoped under main.visit.
   =========================================================================== */
/* tokens used only by the visit page */
/* match the approved prototype: sentence-case headings, plain kicker, 1160px column */
.visit h1,.visit h2,.visit .fold-btn,.visit summary{text-transform:none}
.visit .kicker{padding-left:0}
.visit .kicker::before{display:none}
.visit .wrap{width:min(100% - 40px,1120px);margin-inline:auto;padding-inline:0}
:root{--red-hover:#A81710;--field:#DEDEDE}

/* Layout: a practical guide built around one action. The form CTA is in the
   first viewport at every width, repeats at each objection, and every button
   goes straight to the Church Center form (no in-page hop). Desktop: scrolling
   column beside a sticky details card. Type-led, contained photos. */
.visit{background:var(--paper);color:var(--ink);font-family:var(--body);font-size:17px;line-height:1.55;padding-bottom:84px}
.visit img{display:block;max-width:100%}
.visit a{color:inherit}


/* PHOTO STRIP — a quiet, wide crop above the hero. Muted so the red owns the page. */
.visit .strip-photo{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;filter:sepia(.18) saturate(1.45) contrast(1.06) brightness(1.03)}
/* split hero on desktop: copy left, photo right, equal height */
.visit .herosplit{display:grid;grid-template-columns:1fr}
@media (min-width:900px){
  .visit .herosplit{grid-template-columns:1fr 1fr;align-items:stretch}
  .visit .herosplit .strip-pic{order:2;display:block;min-height:0}
  .visit .herosplit .strip-photo{height:100%;max-height:none;aspect-ratio:auto;object-position:50% 50%}
  .visit .herosplit .visit-hero{order:1;display:flex;align-items:center}
  .visit .herosplit .head{width:100%;max-width:none;padding:clamp(48px,6vw,88px) clamp(32px,5vw,80px) clamp(48px,6vw,88px) max(32px,calc((100vw - 1120px)/2))}
  .visit .herosplit .head h1{font-size:clamp(2.6rem,3.8vw,3.6rem)}
  .visit .herosplit .head-cta{flex-direction:column;align-items:flex-start;gap:10px}
  .visit .herosplit .btn{white-space:nowrap}
}

/* PAGE HEAD — solid red band, white type. Carries the first CTA. */
.visit .visit-hero{background:var(--red-deep);color:#fff}
.visit .head{padding-block:clamp(40px,7vw,76px) clamp(34px,5vw,52px)}
.visit .kicker{font-family:var(--display);font-weight:700;text-transform:uppercase;letter-spacing:.14em;
  font-size:.72rem;color:rgba(255,255,255,.75);margin:0 0 16px}
.visit .head h1{font-family:var(--display);font-weight:900;font-size:clamp(2.3rem,7.5vw,4rem);
  line-height:.95;letter-spacing:-.04em;margin:0 0 16px;max-width:15ch;text-wrap:balance}
.visit .head .lede{font-size:clamp(1.05rem,2.6vw,1.28rem);color:rgba(255,255,255,.88);margin:0 0 26px;max-width:40ch}
.visit .head-cta{display:flex;flex-direction:column;gap:10px;align-items:flex-start;margin-bottom:26px}
.visit .micro{color:var(--muted);font-size:.92rem}
.visit .head .micro{color:rgba(255,255,255,.8)}
.visit .head .btn{background:#fff;color:var(--red-deep)}
.visit .head .btn:hover{background:var(--paper);color:var(--red-hover)}
.visit .strip{list-style:none;margin:0;padding:22px 0 0;border-top:1px solid rgba(255,255,255,.3);
  display:flex;flex-wrap:wrap;gap:8px 22px;
  font-family:var(--display);font-weight:700;font-size:.92rem;letter-spacing:-.005em}
.visit .strip li{position:relative;padding-left:18px}
.visit .strip li::before{content:"";position:absolute;left:0;top:.62em;width:10px;height:2px;background:#fff}

/* TWO-COLUMN SHELL */
.visit .shell{display:grid;grid-template-columns:1fr;gap:clamp(36px,5vw,56px);padding-block:clamp(36px,5vw,56px) clamp(48px,8vw,88px)}

/* DETAILS CARD */
.visit .card{background:var(--band);border-top:4px solid var(--red);padding:clamp(22px,3vw,28px)}
.visit .card dl{margin:0;display:grid;gap:18px}
.visit .card dt{font-family:var(--display);font-weight:700;text-transform:uppercase;letter-spacing:.1em;
  font-size:.68rem;color:var(--muted);margin-bottom:4px}
.visit .card dd{margin:0;font-family:var(--display);font-weight:800;font-size:1.22rem;letter-spacing:-.015em;line-height:1.25}
.visit .card dd small{display:block;font-family:var(--body);font-weight:400;font-size:.95rem;
  letter-spacing:0;color:var(--muted);margin-top:5px;line-height:1.45}
.visit .card dd a{color:var(--ink);text-decoration-color:var(--red);text-decoration-thickness:2px;text-underline-offset:3px}
.visit .card .cta{margin-top:24px;padding-top:22px;border-top:1px solid var(--field)}
.visit .card .cta .micro{display:block;margin-top:10px}
.visit .btn{display:inline-block;background:var(--red);color:var(--ink-deep);font-family:var(--display);font-weight:700;
  font-size:1.02rem;padding:15px 30px;border-radius:2px;text-decoration:none;text-align:center;
  transition:background .18s ease}
.visit .btn:hover{background:#E8524A}
.visit .card .btn{background:var(--red-deep);color:#fff}
.visit .card .btn:hover{background:var(--red-hover)}
.visit .sticky .btn{background:var(--ink-deep);color:#fff}
.visit .sticky .btn:hover{background:#000}
.visit .btn:focus-visible{outline:3px solid var(--ink);outline-offset:3px}
.visit .card .btn{width:100%}

/* CONTENT COLUMN */
.visit .block{padding-block:clamp(30px,4vw,44px);border-top:1px solid var(--line)}
.visit .block:first-child{border-top:0;padding-top:0}
.visit .block h2{font-family:var(--display);font-weight:800;font-size:clamp(1.5rem,4.4vw,2.05rem);
  line-height:1.08;letter-spacing:-.025em;margin:0 0 20px;max-width:22ch;text-wrap:balance}

/* arrival — a real sequence, so it gets a rail and numbers */
.visit .seq{list-style:none;margin:0;padding:0 0 0 30px;border-left:2px solid var(--line)}
.visit .seq li{position:relative;padding-bottom:26px}
.visit .seq li:last-child{padding-bottom:0}
.visit .seq li::before{content:attr(data-n);position:absolute;left:-41px;top:0;width:20px;height:20px;
  background:var(--red);color:var(--ink-deep);border-radius:50%;font-family:var(--display);font-weight:800;
  font-size:.66rem;display:grid;place-items:center}
.visit .seq b{display:block;font-family:var(--display);font-weight:800;font-size:1.1rem;letter-spacing:-.01em;margin-bottom:4px}
.visit .seq span{color:var(--muted);font-size:1rem}

/* arrival — photo up top, three big-numeral steps in a row beneath it */
.visit .arrive{display:grid;gap:14px}
.visit .arrive-shot{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;object-position:50% 45%;border-radius:2px}
.visit .steps{list-style:none;margin:0;padding:0;display:grid;gap:0}
.visit .steps li{display:grid;grid-template-columns:auto 1fr;column-gap:12px;align-items:baseline;padding:9px 0;border-top:1px solid var(--line);min-width:0}
.visit .steps li:first-child{border-top:0;padding-top:0}
.visit .steps .num{grid-row:1/3;font-family:var(--display);font-weight:900;font-size:1.25rem;line-height:1;letter-spacing:-.04em;color:var(--red)}
.visit .steps b{font-family:var(--display);font-weight:800;font-size:.98rem;letter-spacing:-.01em;line-height:1.2}
.visit .steps li>span:last-child{color:var(--muted);font-size:.9rem}
@media (min-width:700px){
  .visit .steps{grid-template-columns:repeat(3,1fr);gap:16px}
  .visit .steps li,.visit .steps li:first-child{grid-template-columns:1fr;row-gap:4px;padding:18px 18px 20px;border-top:0;background:var(--band);border-radius:2px}
  .visit .steps .num{grid-row:auto;font-size:2.4rem;margin-bottom:8px}
  .visit .steps b{font-size:1.08rem}
  .visit .steps li>span:last-child{font-size:.98rem}
  .visit .arrive-shot{aspect-ratio:3/2}
  .visit .arrive{gap:22px}
}

/* in-flow CTA — the form as the answer to the section above it */
.visit .nudge{margin-top:26px;padding:20px 22px;background:var(--band);border-left:3px solid var(--red);
  display:flex;flex-wrap:wrap;gap:14px 22px;align-items:center;justify-content:space-between}
.visit .nudge p{margin:0;font-family:var(--display);font-weight:800;font-size:1.06rem;letter-spacing:-.01em;max-width:30ch;min-width:0}
.visit .nudge .btn{padding:13px 24px;font-size:.98rem}

/* plain fact lists */
.visit .facts{list-style:none;margin:0;padding:0}
.visit .facts li{padding:13px 0 13px 26px;position:relative;border-bottom:1px solid var(--line);font-size:1.05rem}
.visit .facts li:last-child{border-bottom:0}
.visit .facts li::before{content:"";position:absolute;left:0;top:23px;width:11px;height:2px;background:var(--red)}
.visit .facts a{color:var(--ink);font-weight:700;text-decoration-color:var(--red);text-decoration-thickness:2px;text-underline-offset:4px}

.visit .shot{width:100%;aspect-ratio:3/2;object-fit:cover;margin-top:24px;border-radius:2px}
.visit .shot.tall{aspect-ratio:4/3;object-position:50% 50%}
.visit .shot.full{aspect-ratio:auto;height:auto}

/* proof */
.visit .quote{margin:0;padding:0 0 0 22px;border-left:3px solid var(--red)}
.visit .quote p{margin:0 0 12px;font-family:var(--display);font-weight:800;font-size:clamp(1.15rem,2.6vw,1.45rem);
  line-height:1.25;letter-spacing:-.02em;max-width:26ch;text-wrap:balance}
.visit .quote cite{font-style:normal;color:var(--muted);font-size:.95rem}

/* FAQ */
.visit .faq details{border-bottom:1px solid var(--line)}
.visit .faq details:first-of-type{border-top:1px solid var(--line)}
.visit .faq summary{list-style:none;cursor:pointer;padding:18px 36px 18px 0;position:relative;
  font-family:var(--display);font-weight:800;font-size:1.04rem;letter-spacing:-.01em}
.visit .faq summary::-webkit-details-marker{display:none}
.visit .faq summary:focus-visible{outline:2px solid var(--red-deep);outline-offset:2px}
.visit .faq summary::after{content:"+";position:absolute;right:2px;top:50%;transform:translateY(-50%);
  font-family:var(--display);font-weight:700;color:var(--red);font-size:1.3rem;line-height:1}
.visit .faq details[open] summary::after{content:"–"}
.visit .faq .a{padding:0 0 20px;color:var(--muted);max-width:56ch}

/* FORM HANDOFF — the invitation sits on top of the photo. A dark fade under
   the words keeps them readable; the rest of the picture stays clear. */
.visit .formwrap{position:relative;overflow:hidden;background:var(--ink-deep);color:#fff}
.visit .formwrap .band-photo{position:absolute;inset:0 0 auto 0;width:100%;height:clamp(300px,82vw,420px);object-fit:cover;object-position:55% 0}
.visit .formwrap::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to bottom,rgba(16,16,16,0) calc(clamp(300px,82vw,420px)*.42),rgba(16,16,16,.8) calc(clamp(300px,82vw,420px)*.76),var(--ink-deep) clamp(300px,82vw,420px))}
.visit .formwrap .wrap{position:relative;z-index:1;display:flex;padding-block:calc(clamp(300px,82vw,420px)*.66) 40px}
.visit .formwrap h2{font-family:var(--display);font-weight:900;font-size:clamp(1.9rem,6vw,3rem);
  line-height:1;letter-spacing:-.035em;margin:0 0 10px;max-width:18ch;text-wrap:balance}
.visit .formwrap .lede{color:rgba(255,255,255,.86);margin:0 0 24px;max-width:44ch}
@media (min-width:900px){
  .visit .formwrap .band-photo{inset:0 auto 0 10%;height:100%;object-position:50% 12%}
  .visit .formwrap::after{background:linear-gradient(90deg,var(--ink-deep) 0%,var(--ink-deep) 10%,rgba(16,16,16,.86) 26%,rgba(16,16,16,.4) 42%,rgba(16,16,16,0) 56%)}
  .visit .formwrap .wrap{min-height:clamp(440px,36vw,540px);align-items:center;padding-block:56px}
  .visit .formwrap .handoff{max-width:440px}
}
.visit .handoff{max-width:560px}
.visit .gets{list-style:none;margin:0 0 28px;padding:0;border-top:1px solid var(--field)}
.visit .gets li{padding:12px 0 12px 26px;position:relative;border-bottom:1px solid var(--field)}
.visit .gets li::before{content:"";position:absolute;left:0;top:22px;width:11px;height:2px;background:var(--red)}
.visit .gets b{font-family:var(--display);font-weight:800}
.visit .handoff .btn{font-size:1.05rem;padding:17px 34px;background:#fff;color:var(--ink-deep)}
.visit .handoff .btn:hover{background:#E8E8E8}
.visit .form-note{color:var(--muted);font-size:.92rem;margin:12px 0 0;max-width:44ch}
.visit .formwrap .form-note{color:rgba(255,255,255,.8)}


/* secondary paths — low commitment, for the researcher */
.visit .closewrap{background:var(--band)}
.visit .close{padding-block:clamp(40px,6vw,64px)}
.visit .close h2{font-family:var(--display);font-weight:800;font-size:clamp(1.5rem,4.4vw,2.05rem);
  line-height:1.1;letter-spacing:-.025em;margin:0 0 10px;max-width:22ch}
.visit .close p{color:var(--muted);margin:0 0 18px;max-width:42ch}
.visit .paths{display:flex;flex-wrap:wrap;gap:12px 32px}
.visit .textlink{color:var(--ink);font-weight:700;text-decoration:underline;text-decoration-color:var(--red);text-decoration-thickness:2px;text-underline-offset:5px}


.visit .sticky{position:fixed;left:0;right:0;bottom:0;z-index:40;background:var(--paper);
  border-top:1px solid var(--line);padding:12px 20px calc(12px + env(safe-area-inset-bottom,0px))}
.visit .sticky a{display:block;width:100%}

/* FOLDS — sections collapsed at rest, slide open on tap */
.visit .fold{border-top:1px solid var(--line)}
.visit .fold:last-of-type{border-bottom:1px solid var(--line)}
.visit .fold-btn{all:unset;display:flex;align-items:center;justify-content:space-between;gap:16px;width:100%;
  cursor:pointer;padding:22px 0;font-family:var(--display);font-weight:800;
  font-size:clamp(1.25rem,3.6vw,1.6rem);letter-spacing:-.02em;line-height:1.1}
.visit .fold-btn:focus-visible{outline:2px solid var(--red-deep);outline-offset:4px}
.visit .fold-btn .ico{flex:none;width:22px;height:22px;position:relative}
.visit .fold-btn .ico::before,.visit .fold-btn .ico::after{content:"";position:absolute;background:var(--red);
  transition:transform .3s cubic-bezier(.2,.7,.2,1)}
.visit .fold-btn .ico::before{left:0;top:10px;width:22px;height:2px}
.visit .fold-btn .ico::after{left:10px;top:0;width:2px;height:22px}
.visit .fold.open .fold-btn .ico::after{transform:scaleY(0)}
.visit .fold-body{display:grid;grid-template-rows:0fr;transition:grid-template-rows .4s cubic-bezier(.2,.7,.2,1)}
.visit .fold.open .fold-body{grid-template-rows:1fr}
.visit .fold-in{overflow:hidden;min-width:0;opacity:0;transform:translateY(-6px);transition:opacity .3s ease .05s,transform .3s ease .05s}
.visit .fold.open .fold-in{opacity:1;transform:none}
.visit .fold-pad{padding:0 0 30px}
.visit .faq .fold-pad h2{display:none}

@media (min-width:900px){
  .visit{padding-bottom:0}
  .visit .shell{grid-template-columns:1fr 372px;gap:72px;align-items:stretch}
  .visit .shell main{display:flex;flex-direction:column}
  .visit .fold{flex:1;display:flex;flex-direction:column;justify-content:center}
  .visit .fold:first-child .fold-btn{padding-top:22px}
  .visit .fold-btn{flex:1;align-items:center}
  .visit .fold.open .fold-btn{flex:0 0 auto}
  .visit .rail{position:sticky;top:28px;align-self:start}
  .visit .sticky{display:none}
  .visit .head h1{font-size:clamp(3rem,4.6vw,4rem)}
  .visit .head-cta{flex-direction:row;align-items:center;gap:18px}
}
@media (prefers-reduced-motion:reduce){.visit *{transition:none!important;animation:none!important}}

/* ==========================================================================
   Kids page (kids.html). All rules are scoped under main.kidspage.
   The Axiom Kids banner as a page: coral ground and the banner's white
   marks up top, photos set as tilted snapshots, quotes as stuck-on labels.
   ========================================================================== */
.kidspage{background:var(--paper);color:var(--ink);font-family:var(--body);font-size:17px;line-height:1.55;padding-bottom:84px; --coral:#F2694F;--coral-soft:#FBE3DC;--teal:#CFE0DA;--on-dark:#FFFFFF;--on-dark-soft:#B9B9B9;--shadow:rgba(16,16,16,.16); --mono:'DM Mono',ui-monospace,'SF Mono',Menlo,monospace}
.kidspage img{max-width:100%}
.kidspage h1,.kidspage h2{text-transform:none}
.kidspage .wrap{width:min(100% - 40px,1160px);margin-inline:auto;padding-inline:0}
.kidspage .btn{display:inline-block;background:var(--red);color:var(--ink-deep);font-family:var(--display);font-weight:700; font-size:1.02rem;padding:15px 30px;border-radius:2px;text-decoration:none;text-align:center;transition:background .18s ease}
.kidspage .btn:hover{background:#E8524A}
.kidspage .btn:focus-visible{outline:3px solid var(--ink);outline-offset:3px}
.kidspage .mono{font-family:var(--mono);font-size:.68rem;letter-spacing:.06em;text-transform:uppercase}
.kidspage .chip{font-family:var(--mono);font-weight:500;font-size:.72rem;letter-spacing:.06em;background:var(--ink-deep); color:var(--on-dark);padding:2px 7px;border-radius:3px;flex:none}
.kidspage .snap{display:block;width:100%;height:auto;object-fit:cover;background:var(--paper); border:8px solid var(--paper);border-radius:3px;box-shadow:0 10px 30px var(--shadow)}
.kidspage .tl{transform:rotate(-2deg)}
.kidspage .tr{transform:rotate(2deg)}
.kidspage .marks{position:absolute;left:0;right:0;bottom:0;width:100%;height:52%;pointer-events:none}
.kidspage .marks .mk{fill:var(--paper)}
.kidspage .marks .ln{stroke:var(--paper);stroke-width:3;stroke-linecap:round}
.kidspage .marks .trail{stroke:var(--paper);stroke-width:2.5;stroke-dasharray:9 9;stroke-linecap:round;opacity:.8}
.kidspage .marks.soft .mk{fill:var(--coral)}
.kidspage .marks.soft .ln,.kidspage .marks.soft .trail{stroke:var(--coral)}
.kidspage .marks.soft{opacity:.5}
.kidspage .kh{position:relative;background:var(--coral);overflow:hidden;overflow:clip}
.kidspage .kh-in{position:relative;display:grid;grid-template-columns:1fr;gap:34px;padding-block:36px 44px}
.kidspage .kh-copy{min-width:0}
.kidspage .k-kicker{font-family:var(--display);font-weight:800;text-transform:uppercase;letter-spacing:.14em; font-size:.76rem;color:var(--ink-deep);margin:0 0 14px}
.kidspage .kh h1{font-family:var(--display);font-weight:900;font-size:clamp(2.6rem,10.5vw,4.4rem); line-height:.92;letter-spacing:-.045em;margin:0 0 16px;max-width:10ch;text-wrap:balance;color:var(--ink-deep)}
.kidspage .kh .lede{font-size:clamp(1.05rem,2.6vw,1.22rem);color:var(--ink-deep);margin:0 0 24px;max-width:32ch}
.kidspage .kh-cta{display:flex;flex-direction:column;gap:10px;align-items:flex-start}
.kidspage .kh .btn{background:var(--ink-deep);color:var(--on-dark)}
.kidspage .kh .btn:hover{background:#000}
.kidspage .kh .btn:focus-visible{outline-color:var(--paper)}
.kidspage .kh .micro{color:var(--ink-deep);font-size:.92rem;max-width:34ch}
.kidspage .kh-art{position:relative;max-width:400px;margin-inline:6px}
.kidspage .kh-art .snap{aspect-ratio:4/5;object-position:50% 45%}
.kidspage .three{padding-block:clamp(52px,8vw,110px);display:grid;gap:clamp(60px,9vw,120px);overflow-x:clip}
.kidspage .row{display:grid;grid-template-columns:1fr;gap:26px;align-items:center}
.kidspage .pair{position:relative;max-width:440px;width:100%;margin-inline:6px;padding:0 0 9% 0}
.kidspage .pair.solo{padding:0}
.kidspage .pair .main{aspect-ratio:4/5;width:86%}
.kidspage .pair.solo .main{width:92%}
.kidspage .pair .side{position:absolute;right:0;bottom:0;width:44%;aspect-ratio:4/5;border-width:6px}
.kidspage .row-copy{min-width:0}
.kidspage .row h2{font-family:var(--display);font-weight:900;font-size:clamp(2.9rem,12vw,5.8rem); line-height:.9;letter-spacing:-.045em;margin:0 0 14px}
.kidspage .row h2 em{font-style:normal;color:var(--red-deep)}
.kidspage .row p{margin:0;font-size:clamp(1.05rem,2.2vw,1.2rem);color:var(--muted);max-width:36ch}
.kidspage .said{background:var(--teal);padding-block:clamp(44px,6vw,76px)}
.kidspage .said h2{font-family:var(--display);font-weight:900;font-size:clamp(1.8rem,5.4vw,2.8rem); line-height:1;letter-spacing:-.035em;margin:0 0 18px;max-width:16ch;text-wrap:balance}
.kidspage .reel{overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.kidspage .reel::-webkit-scrollbar{display:none}
.kidspage .reel:focus-visible{outline:2px solid var(--ink-deep);outline-offset:-2px}
.kidspage .reel-track{list-style:none;margin:0;padding:14px 20px 22px;display:flex;gap:16px;width:max-content}
.kidspage .q{flex:none;width:min(78vw,350px);background:var(--paper);border-radius:10px; padding:16px 20px 18px;display:flex;flex-direction:column;gap:12px;box-shadow:0 6px 16px var(--shadow)}
.kidspage .q:nth-child(odd){transform:rotate(-1.2deg)}
.kidspage .q:nth-child(even){transform:rotate(1deg)}
.kidspage .q-top{display:flex;align-items:center;gap:10px;color:var(--muted)}
.kidspage .q p{font-family:var(--display);font-weight:800;font-size:clamp(1.2rem,3.4vw,1.42rem); line-height:1.16;letter-spacing:-.02em;margin:0;text-wrap:balance}
.kidspage .q cite{font-style:normal;color:var(--muted);font-size:.95rem;margin-top:auto}
.kidspage .drop{padding-block:clamp(52px,8vw,100px);display:grid;grid-template-columns:1fr;gap:32px;align-items:center;overflow-x:clip}
.kidspage .drop-photo{max-width:380px;width:100%;margin-inline:6px}
.kidspage .drop-photo .snap{aspect-ratio:4/5;object-position:50% 30%;width:92%}
.kidspage .drop-body{min-width:0}
.kidspage .drop h2,.kidspage .ask h2{font-family:var(--display);font-weight:900;font-size:clamp(1.8rem,5.4vw,2.8rem); line-height:1;letter-spacing:-.035em;margin:0 0 24px;text-wrap:balance}
.kidspage .steps{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.kidspage .steps li{display:grid;grid-template-columns:auto 1fr;column-gap:14px;row-gap:2px;align-items:start; background:var(--coral-soft);border-radius:10px;padding:16px 18px;min-width:0}
.kidspage .steps .chip{grid-row:1/3;font-size:.95rem;padding:3px 10px;margin-top:1px}
.kidspage .steps b{font-family:var(--display);font-weight:800;font-size:1.1rem;letter-spacing:-.01em;line-height:1.2}
.kidspage .steps li>span:last-child{color:var(--ink);font-size:1rem}
.kidspage .nudge{margin-top:22px;display:flex;flex-wrap:wrap;gap:10px 18px;align-items:center}
.kidspage .nudge span{color:var(--muted);font-size:.98rem}
.kidspage .steps a{font-weight:700;text-decoration:underline;text-decoration-color:var(--red-deep);text-decoration-thickness:2px;text-underline-offset:3px}
.kidspage .askwrap{background:var(--band)}
.kidspage .ask{padding-block:clamp(48px,7vw,88px)}
.kidspage .ask h2{margin:0}
.kidspage .fold{max-width:760px}
.kidspage .fold-btn{all:unset;box-sizing:border-box;display:flex;align-items:center;justify-content:space-between;gap:16px;width:100%; cursor:pointer;padding:6px 0;font:inherit;letter-spacing:inherit}
.kidspage .fold-btn:focus-visible{outline:2px solid var(--red-deep);outline-offset:6px}
.kidspage .fold-btn .ico{flex:none;width:26px;height:26px;position:relative}
.kidspage .fold-btn .ico::before,.kidspage .fold-btn .ico::after{content:"";position:absolute;background:var(--red-deep); transition:transform .3s cubic-bezier(.2,.7,.2,1)}
.kidspage .fold-btn .ico::before{left:0;top:12px;width:26px;height:3px}
.kidspage .fold-btn .ico::after{left:12px;top:0;width:3px;height:26px}
.kidspage .fold.open .fold-btn .ico::after{transform:scaleY(0)}
.kidspage .fold-body{display:grid;grid-template-rows:0fr;transition:grid-template-rows .4s cubic-bezier(.2,.7,.2,1)}
.kidspage .fold.open .fold-body{grid-template-rows:1fr}
.kidspage .fold-in{overflow:hidden;min-width:0;visibility:hidden;opacity:0;transition:opacity .3s ease .05s,visibility 0s .4s}
.kidspage .fold.open .fold-in{visibility:visible;opacity:1;transition:opacity .3s ease .05s,visibility 0s}
.kidspage .fold-in .k-faq{padding-top:24px}
.kidspage .k-faq{max-width:760px}
.kidspage .k-faq details{border-bottom:1px solid var(--field)}
.kidspage .k-faq details:first-of-type{border-top:1px solid var(--field)}
.kidspage .k-faq summary{list-style:none;cursor:pointer;padding:18px 36px 18px 0;position:relative; font-family:var(--display);font-weight:800;font-size:1.06rem;letter-spacing:-.01em}
.kidspage .k-faq summary::-webkit-details-marker{display:none}
.kidspage .k-faq summary:focus-visible{outline:2px solid var(--red-deep);outline-offset:2px}
.kidspage .k-faq summary::after{content:"+";position:absolute;right:2px;top:50%;transform:translateY(-50%); font-family:var(--display);font-weight:700;color:var(--red-deep);font-size:1.3rem;line-height:1}
.kidspage .k-faq details[open] summary::after{content:"\2013"}
.kidspage .k-faq .a{padding:0 0 20px;color:var(--muted);max-width:56ch}
.kidspage .k-faq .a a{color:var(--ink);font-weight:700;text-decoration:underline;text-decoration-color:var(--red-deep);text-decoration-thickness:2px;text-underline-offset:3px;overflow-wrap:anywhere}
.kidspage .formwrap{background:var(--ink-deep);color:var(--on-dark)}
.kidspage .handoff{display:grid;grid-template-columns:1fr;align-items:center}
.kidspage .handoff img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;object-position:50% 66%}
.kidspage .handoff-copy{padding:36px 20px 44px;min-width:0}
.kidspage .formwrap h2{font-family:var(--display);font-weight:900;font-size:clamp(1.9rem,6vw,3rem); line-height:1;letter-spacing:-.035em;margin:0 0 10px;max-width:14ch;text-wrap:balance}
.kidspage .formwrap .lede{color:var(--on-dark-soft);margin:0 0 26px;max-width:38ch}
.kidspage .formwrap .btn{font-size:1.05rem;padding:17px 34px;background:var(--coral);color:var(--ink-deep)}
.kidspage .formwrap .btn:hover{background:var(--red)}
.kidspage .formwrap .btn:focus-visible{outline-color:var(--paper)}
.kidspage .form-note{color:var(--on-dark-soft);font-size:.92rem;margin:12px 0 0}
.kidspage .close{padding-block:clamp(40px,6vw,64px)}
.kidspage .close h2{font-family:var(--display);font-weight:800;font-size:clamp(1.5rem,4.4vw,2.05rem); line-height:1.1;letter-spacing:-.025em;margin:0 0 14px;max-width:22ch}
.kidspage .paths{display:flex;flex-wrap:wrap;gap:12px 32px}
.kidspage .textlink{color:var(--ink);font-weight:700;text-decoration:underline;text-decoration-color:var(--red);text-decoration-thickness:2px;text-underline-offset:5px}
.kidspage .sticky{position:fixed;left:0;right:0;bottom:0;z-index:40;background:var(--paper); border-top:1px solid var(--line);padding:12px 20px calc(12px + env(safe-area-inset-bottom,0px))}
.kidspage .sticky a{display:block;width:100%;background:var(--ink-deep);color:var(--on-dark)}
.kidspage .sticky a:hover{background:#000}
@media (min-width:900px){
  .kidspage{padding-bottom:0}
  .kidspage .sticky{display:none}
  .kidspage .marks{height:100%}
  .kidspage .kh-in{grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:56px;align-items:center;padding-block:64px 72px}
  .kidspage .kh h1{font-size:clamp(3.6rem,6.2vw,5.4rem)}
  .kidspage .kh-art{justify-self:end;width:100%;max-width:430px;margin-inline:0 12px}
  .kidspage .row{grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(40px,6vw,88px)}
  .kidspage .row.flip{grid-template-columns:minmax(0,6fr) minmax(0,5fr)}
  .kidspage .row.flip .pair{order:2;justify-self:end}
  .kidspage .drop{grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:clamp(40px,6vw,80px)}
  .kidspage .handoff{grid-template-columns:minmax(0,5fr) minmax(0,6fr)}
  .kidspage .handoff img{aspect-ratio:auto;height:100%;max-height:540px}
  .kidspage .handoff-copy{padding:64px clamp(32px,5vw,72px)}
}
@media (prefers-reduced-motion:reduce){
  .kidspage *{transition:none!important;animation:none!important}
}

/* Header runs edge to edge on wide screens, so the logo and the Plan a Visit
   button sit near the window edges instead of inside the 1240px content box. */
.header .nav.wrap{width:auto;max-width:none;margin:0;padding-inline:clamp(14px,2.2vw,32px)}

/* Kids page: hairlines between the three big-word rows on desktop, so each
   row reads as its own block instead of floating in one white field. */
@media (min-width:900px){
  .kidspage .three{gap:0;padding-block:clamp(24px,3vw,44px)}
  .kidspage .row{padding-block:clamp(48px,5.5vw,84px)}
  .kidspage .row + .row{border-top:1px solid var(--line)}
}

/* Kids and Plan a Visit, phone: the room for the sticky button used to sit at
   the end of <main>, which left a tall blank gap above the footer. It now sits
   at the bottom of the footer, where the bar actually overlaps. */
.kidspage,.visit{padding-bottom:0}
@media (max-width:899px){
  main.kidspage ~ [data-footer] .footer,main.visit ~ [data-footer] .footer{padding-bottom:108px}
}

/* Kids page: shorter black form band. */
.kidspage .handoff img{aspect-ratio:2/1}
.kidspage .handoff-copy{padding:26px 20px 30px}
.kidspage .formwrap .lede{margin-bottom:18px}
@media (min-width:900px){
  .kidspage .handoff img{aspect-ratio:auto;max-height:340px}
  .kidspage .handoff-copy{padding:36px clamp(32px,5vw,72px)}
}

/* Kids page, phone: hairline above the footer, so the last section and the
   footer don't run together now that the gap between them is shorter. */
@media (max-width:899px){
  main.kidspage ~ [data-footer] .footer{border-top:1px solid var(--line)}
}

/* ==========================================================================
   Messages page (messages.html). All rules are scoped under main.msgpage.
   Lights down: near-black ground, one large player, a most-watched row,
   then a photo of the room and one button.
   ========================================================================== */
.msgpage{background:var(--stage);color:var(--on-stage);font-family:var(--body);font-size:17px;line-height:1.55; --stage:#0D0D0D;--stage-rule:#2B2B2B;--on-stage:#FFFFFF;--on-stage-soft:#B4B4B4;--glow:rgba(240,95,86,.22)}
.msgpage img{max-width:100%}
.msgpage h1,.msgpage h2{text-transform:none}
.msgpage .wrap{width:min(100% - 40px,1160px);margin-inline:auto;padding-inline:0}
.msgpage .btn{display:inline-block;background:var(--red);color:var(--ink-deep);font-family:var(--display);font-weight:700; font-size:1.02rem;padding:15px 30px;border-radius:2px;text-decoration:none;text-align:center;transition:background .18s ease}
.msgpage .btn:hover{background:#E8524A}
.msgpage .btn:focus-visible{outline:3px solid var(--on-stage);outline-offset:3px}
.msgpage .textlink{color:var(--on-stage);font-weight:700;text-decoration:underline;text-decoration-color:var(--red); text-decoration-thickness:2px;text-underline-offset:5px}
.msgpage .textlink:focus-visible{outline:2px solid var(--red);outline-offset:4px}
.msgpage .stage{padding-block:clamp(34px,6vw,72px) clamp(40px,6vw,80px)}
.msgpage .m-kicker{font-family:var(--display);font-weight:700;text-transform:uppercase;letter-spacing:.14em; font-size:.74rem;color:var(--red);margin:0 0 14px}
.msgpage .stage h1{font-family:var(--display);font-weight:900;font-size:clamp(2.4rem,8.6vw,4.6rem); line-height:.94;letter-spacing:-.04em;margin:0 0 16px;max-width:13ch;text-wrap:balance}
.msgpage .stage .lede{font-size:clamp(1.05rem,2.5vw,1.22rem);color:var(--on-stage-soft);margin:0 0 clamp(26px,4vw,40px);max-width:46ch}
.msgpage .player{position:relative;aspect-ratio:16/9;width:100%;max-width:100%;background:#000;border-radius:4px;overflow:hidden; box-shadow:0 0 0 1px var(--stage-rule),0 44px 120px -20px var(--glow)}
.msgpage .player iframe,.msgpage .player img{position:absolute;inset:0;width:100%;height:100%;border:0;object-fit:cover}
.msgpage .under{display:flex;flex-wrap:wrap;gap:14px 32px;align-items:baseline;justify-content:space-between; margin-top:22px;padding-top:20px;border-top:1px solid var(--stage-rule)}
.msgpage .under p{margin:0;color:var(--on-stage-soft);min-width:0}
.msgpage .under p b{color:var(--on-stage);font-family:var(--display);font-weight:800}
.msgpage .more{display:flex;flex-wrap:wrap;gap:12px 28px}
.msgpage .shelf-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 18px;margin-top:clamp(40px,6vw,64px);margin-bottom:16px}
.msgpage .shelf-head h2{font-family:var(--display);font-weight:900;font-size:clamp(1.5rem,4.4vw,2.1rem);line-height:1;letter-spacing:-.03em;margin:0}
.msgpage .shelf-head p{margin:0;color:var(--on-stage-soft);font-size:.98rem}
.msgpage .shelf{list-style:none;margin:0 -20px 0 0;padding:4px 20px 14px 4px;display:flex;gap:16px;overflow-x:auto; scroll-snap-type:x proximity;scrollbar-width:thin;scrollbar-color:var(--stage-rule) transparent;-webkit-overflow-scrolling:touch}
.msgpage .shelf:focus-visible{outline:2px solid var(--red);outline-offset:4px}
.msgpage .shelf li{flex:none;width:min(72vw,300px);scroll-snap-align:start}
.msgpage .mcard{all:unset;box-sizing:border-box;display:block;width:100%;cursor:pointer}
.msgpage .mcard:focus-visible{outline:2px solid var(--red);outline-offset:4px}
.msgpage .thumb{position:relative;display:block;aspect-ratio:16/9;border-radius:4px;overflow:hidden;background:#000; box-shadow:0 0 0 1px var(--stage-rule)}
.msgpage .thumb img{width:100%;height:100%;object-fit:cover;transition:transform .3s ease,opacity .2s ease}
.msgpage .mcard:hover .thumb img{transform:scale(1.04)}
.msgpage .mini{position:absolute;left:10px;bottom:10px;width:34px;height:34px;border-radius:50%;background:var(--red);display:grid;place-items:center}
.msgpage .mini::after{content:"";margin-left:3px;border-style:solid;border-width:6px 0 6px 10px;border-color:transparent transparent transparent var(--ink-deep)}
.msgpage .mcard.on .thumb{box-shadow:0 0 0 3px var(--red)}
.msgpage .mcard .t{display:block;margin-top:12px;font-family:var(--display);font-weight:800;font-size:1.04rem;line-height:1.2;letter-spacing:-.01em;color:var(--on-stage)}
.msgpage .mcard .d{display:block;margin-top:4px;color:var(--on-stage-soft);font-size:.9rem}
.msgpage .room{position:relative;background:var(--ink-deep);overflow:hidden}
.msgpage .room img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;object-position:50% 30%}
.msgpage .room-copy{padding:34px 20px 44px}
.msgpage .room h2{font-family:var(--display);font-weight:900;font-size:clamp(2rem,6.6vw,3.4rem); line-height:.98;letter-spacing:-.035em;margin:0 0 12px;max-width:14ch;text-wrap:balance}
.msgpage .room p{color:var(--on-stage-soft);margin:0 0 24px;max-width:38ch}
.msgpage .room-cta{display:flex;flex-wrap:wrap;gap:14px 26px;align-items:center}
@media (min-width:900px){
  .msgpage .stage h1{max-width:none}
  .msgpage .room{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);align-items:center}
  .msgpage .room img{aspect-ratio:auto;height:100%;max-height:460px}
  .msgpage .room-copy{padding:56px clamp(32px,5vw,72px)}
}
@media (prefers-reduced-motion:reduce){
  .msgpage *{transition:none!important;animation:none!important}
}
.msgpage [hidden]{display:none!important}

/* Messages page: tagline under the band headline, and the framing of its photo. */
.msgpage .room p.tag{color:var(--on-stage);font-family:var(--display);font-weight:800;font-size:clamp(1.15rem,2.6vw,1.4rem);letter-spacing:-.015em;line-height:1.2;margin:0 0 8px}
.msgpage .room img{object-position:50% 32%}


/* ===========================================================================
   WHO WE ARE (about.html). Everything is scoped under main.whopage.
   Photo-led: mission over a photo, five mantras that open one at a time, a
   four-stop path for the model, a founder story that lights up on scroll, and
   a team grid where each face opens a two-truths-and-a-lie game.
   =========================================================================== */
.whopage{--tee:#FFFFFF;--tee-deep:#F5F5F5;--tee-line:#DCDCDC;--on-dark:#FFFFFF;--on-dark-dim:#5E5E5E;--on-dark-soft:#B9B9B9;--dark-rule:#2E2E2E;--on-red-soft:#FFE1DE;
  --display:'Archivo','Helvetica Neue',Arial,sans-serif;
  background:var(--paper);color:var(--ink);font-family:var(--body);font-size:17px;line-height:1.55;-webkit-font-smoothing:antialiased}
.whopage h1,.whopage h2{text-transform:none;letter-spacing:normal;line-height:1.1;max-width:none;margin:0}
.whopage img{width:auto;max-width:100%}
.whopage .w-wrap{width:100%;max-width:1160px;margin-inline:auto;padding-inline:20px}
/* the shirt lettering: Archivo at its narrowest width, uppercase */
.whopage .tee{font-family:var(--display);font-weight:900;font-stretch:62%;font-variation-settings:"wdth" 62;text-transform:uppercase;letter-spacing:-.005em;line-height:.9}
.whopage .btn{display:inline-block;background:var(--red);color:var(--ink-deep);font-family:var(--display);font-weight:700;
  font-size:1.02rem;padding:15px 30px;border-radius:2px;text-decoration:none;text-align:center;transition:background .18s ease}
.whopage .btn:focus-visible{outline:3px solid var(--ink);outline-offset:3px}
.whopage .w-kicker{font-family:var(--display);font-weight:700;text-transform:uppercase;letter-spacing:.14em;font-size:.74rem;color:var(--red-deep);margin:0 0 14px}
.whopage .textlink{font-weight:700;text-decoration:underline;text-decoration-color:var(--red);text-decoration-thickness:2px;text-underline-offset:5px}
.whopage h2.sec{font-family:var(--display);font-weight:900;font-size:clamp(1.8rem,5.4vw,2.8rem);line-height:1;letter-spacing:-.035em;margin:0 0 22px}
.whopage .refs{display:flex;flex-wrap:wrap;gap:6px 8px;margin:18px 0 0;padding:0;list-style:none}
.whopage .refs li{font-family:var(--display);font-weight:700;font-size:.74rem;letter-spacing:.04em;border:1.5px solid currentColor;border-radius:99px;padding:3px 10px;opacity:.75}

/* MISSION + MOTIVE */
.whopage .mmwrap{position:relative;background:var(--ink-deep);color:var(--on-dark);overflow:hidden}
.whopage .heroshot{position:relative;display:grid;min-height:min(680px,170vw)}
.whopage .heroshot img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:36% 20%}
.whopage .heroshot::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(16,16,16,.96) 0%,rgba(16,16,16,.82) 34%,rgba(16,16,16,.25) 58%,rgba(16,16,16,0) 72%)}
.whopage .heroshot-copy{position:relative;z-index:1;align-self:end;padding-bottom:26px}
.whopage .heroshot-copy .w-kicker{color:var(--red)}
.whopage .heroshot h1{margin:0;font-size:clamp(2.5rem,10.6vw,3.7rem);text-wrap:balance}
.whopage .heroshot h1 em{font-style:normal;color:var(--red)}
.whopage .mm{padding-block:clamp(32px,5vw,64px) clamp(44px,7vw,88px)}
.whopage .mm .w-kicker{color:var(--red)}

/* MANTRAS: one opens, the others close */
.whopage .mantras{background:var(--tee-deep)}
.whopage .mantras-in{padding-block:clamp(48px,7vw,96px)}
.whopage .mlist{list-style:none;margin:0;padding:0;border-bottom:2px solid var(--ink)}
.whopage .mantra{border-top:2px solid var(--ink)}
.whopage .mantra button{all:unset;box-sizing:border-box;cursor:pointer;display:grid;grid-template-columns:1fr auto;align-items:center;column-gap:16px;width:100%;padding:14px 0 12px}
.whopage .mantra button:focus-visible{outline:3px solid var(--red-deep);outline-offset:2px}
.whopage .mw{grid-column:1;font-family:var(--display);font-weight:900;font-stretch:62%;font-variation-settings:"wdth" 62;text-transform:uppercase;
  font-size:clamp(3.2rem,13vw,7rem);line-height:.86;transition:color .2s ease}
.whopage .mr{grid-column:1;font-family:var(--display);font-weight:800;font-size:clamp(1.1rem,3.2vw,1.6rem);letter-spacing:-.02em;line-height:1.15;margin-top:6px}
.whopage .mantra .ico{grid-column:2;grid-row:1/3;width:28px;height:28px;position:relative}
.whopage .mantra .ico::before,.whopage .mantra .ico::after{content:"";position:absolute;background:var(--ink);transition:transform .3s cubic-bezier(.2,.7,.2,1)}
.whopage .mantra .ico::before{left:0;top:12px;width:28px;height:4px}
.whopage .mantra .ico::after{left:12px;top:0;width:4px;height:28px}
.whopage .mantra.open .ico::after{transform:scaleY(0)}
.whopage .mantra.open .mw{color:var(--red-deep)}
.whopage .mbody{display:grid;grid-template-rows:0fr;transition:grid-template-rows .35s cubic-bezier(.2,.7,.2,1)}
.whopage .mantra.open .mbody{grid-template-rows:1fr}
.whopage .mbody-in{overflow:hidden;min-width:0;visibility:hidden;transition:visibility 0s .35s}
.whopage .mantra.open .mbody-in{visibility:visible;transition:visibility 0s}
.whopage .mgrid{display:grid;gap:16px;padding:4px 0 24px}
.whopage .mbody p{margin:0;font-size:clamp(1.05rem,2.3vw,1.25rem);max-width:40ch;color:var(--ink)}
.whopage .mbody img{width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;border-radius:2px}

.whopage .mstage{margin-top:26px}
.whopage .mstage img{display:none;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;border-radius:2px}
.whopage .mstage img.rest{display:block}
.whopage .mstage.has-open{display:none}
/* MODEL: a path with four stops */
.whopage .modelwrap{background:var(--red-deep);color:var(--on-dark)}
.whopage .modelwrap .w-kicker{color:var(--on-red-soft)}
.whopage .model{padding-block:clamp(48px,7vw,96px)}
.whopage .path{position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin-bottom:26px}
.whopage .path::before{content:"";position:absolute;left:12.5%;right:12.5%;top:21px;height:4px;background:rgba(255,255,255,.35)}
.whopage .path::after{content:"";position:absolute;left:12.5%;top:21px;height:4px;background:var(--on-dark);width:calc(var(--go,0) * 25%);transition:width .4s cubic-bezier(.2,.7,.2,1)}
.whopage .stop{all:unset;box-sizing:border-box;cursor:pointer;position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center;min-width:0;padding-inline:4px}
.whopage .stop:focus-visible .dot{outline:3px solid var(--on-dark);outline-offset:3px}
.whopage .dot{width:46px;height:46px;border-radius:50%;background:var(--red-deep);border:4px solid rgba(255,255,255,.45);display:grid;place-items:center;
  font-family:var(--display);font-weight:900;font-size:1.1rem;color:var(--on-red-soft);transition:background .25s ease,border-color .25s ease,color .25s ease,transform .25s ease}
.whopage .stop.done .dot{border-color:var(--on-dark);color:var(--on-dark)}
.whopage .stop.on .dot{background:var(--on-dark);border-color:var(--on-dark);color:var(--red-deep);transform:scale(1.14)}
.whopage .stop-name{font-family:var(--display);font-weight:800;font-size:clamp(.78rem,2.4vw,1.02rem);line-height:1.15;letter-spacing:-.01em;color:var(--on-red-soft)}
.whopage .stop.on .stop-name{color:var(--on-dark)}
.whopage .spanel{background:var(--paper);color:var(--ink);border-radius:4px;overflow:hidden;display:grid;grid-template-columns:1fr}
.whopage .spanel[hidden]{display:none}
.whopage .spanel img{width:100%;height:100%;aspect-ratio:3/2;object-fit:cover}
.whopage .stext{padding:clamp(20px,4vw,40px);min-width:0;align-self:center}
.whopage .sbig{margin:0 0 10px;font-family:var(--display);font-weight:900;font-stretch:62%;font-variation-settings:"wdth" 62;text-transform:uppercase;font-size:clamp(2.6rem,10vw,5.4rem);line-height:.9}
.whopage .sdesc{margin:0;font-size:clamp(1.05rem,2.3vw,1.2rem);max-width:40ch}
.whopage .steps-nav{display:flex;gap:12px;margin-top:20px}
.whopage .arw{all:unset;box-sizing:border-box;cursor:pointer;width:52px;height:52px;border-radius:50%;border:2px solid var(--on-dark);color:var(--on-dark);display:grid;place-items:center;
  font-family:var(--display);font-weight:800;font-size:1.35rem;line-height:1;transition:background .2s ease,color .2s ease}
.whopage .arw:hover{background:var(--on-dark);color:var(--red-deep)}
.whopage .arw:focus-visible{outline:3px solid var(--on-dark);outline-offset:4px}

/* STORY: dark, and it lights up a line at a time as you scroll */
.whopage .story{background:var(--ink-deep);color:var(--on-dark)}
.whopage .story-in{padding-block:clamp(56px,9vw,130px);max-width:900px}
.whopage .story .w-kicker{color:var(--red)}
.whopage .story p.l{margin:0 0 clamp(18px,3vw,30px);font-family:var(--display);font-weight:800;font-size:clamp(1.5rem,4.8vw,2.7rem);line-height:1.12;letter-spacing:-.03em;
  text-wrap:balance;transition:color .5s ease}
.whopage .story p.punch{color:var(--red)}
.whopage .story p.l.body{font-family:var(--body);font-weight:500;font-size:clamp(1.12rem,2.5vw,1.42rem);line-height:1.5;letter-spacing:0;max-width:34em;text-wrap:pretty}
.whopage .story.js p.l:not(.lit){color:var(--on-dark-dim)}
.whopage .sig{display:flex;align-items:center;gap:14px;margin-top:clamp(28px,4vw,44px)}
.whopage .sig img{width:64px;height:64px;border-radius:50%;object-fit:cover;object-position:50% 18%;flex:none}
.whopage .sig b{display:block;font-family:var(--display);font-weight:800;font-size:1.05rem}
.whopage .sig span{color:var(--on-dark-soft);font-size:.95rem}

/* TEAM: tap a face */
.whopage .team-in{padding-block:clamp(48px,7vw,96px)}
.whopage .team-sub{margin:0 0 28px;color:var(--muted);font-size:1.1rem}
.whopage .people{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:26px 16px}
.whopage .face{all:unset;box-sizing:border-box;cursor:pointer;display:block;width:100%}
.whopage .face:focus-visible .ph{outline:3px solid var(--red-deep);outline-offset:3px}
.whopage .ph{position:relative;display:block;aspect-ratio:4/5;overflow:hidden;border-radius:2px;margin-bottom:12px;background:var(--tee-deep)}
.whopage .ph img{width:100%;height:100%;object-fit:cover;object-position:50% 12%}
.whopage .plus{position:absolute;right:10px;top:10px;width:30px;height:30px;border-radius:50%;background:var(--paper);transition:transform .3s ease}
.whopage .plus::before,.whopage .plus::after{content:"";position:absolute;background:var(--ink)}
.whopage .plus::before{left:8px;top:14px;width:14px;height:2px}
.whopage .plus::after{left:14px;top:8px;width:2px;height:14px}
.whopage .face:hover .plus{transform:scale(1.12)}
.whopage .face b{display:block;font-family:var(--display);font-weight:800;font-size:1.08rem;letter-spacing:-.01em;line-height:1.2}
.whopage .face .role{color:var(--muted);font-size:.95rem}

/* TWO TRUTHS AND A LIE (opens over the photo) */
.whopage .people li{position:relative}
.whopage .people li.open{z-index:5}
.whopage .people li.open .plus{transform:rotate(45deg)}
.whopage .game{position:absolute;left:0;top:0;width:100%;box-sizing:border-box;z-index:2;background:var(--red);color:var(--ink-deep);border-radius:2px;
  padding:12px 12px 14px;display:flex;flex-direction:column;gap:8px;animation:who-gamein .28s ease both}
@keyframes who-gamein{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.whopage .game-top{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:30px}
.whopage .game-top .w-kicker{margin:0;color:var(--ink-deep);font-size:.7rem;letter-spacing:.12em}
.whopage .game-x{all:unset;cursor:pointer;position:relative;flex:none;width:30px;height:30px;border-radius:50%;background:var(--paper)}
.whopage .game-x::before,.whopage .game-x::after{content:"";position:absolute;left:8px;top:14px;width:14px;height:2px;background:var(--ink)}
.whopage .game-x::before{transform:rotate(45deg)} .whopage .game-x::after{transform:rotate(-45deg)}
.whopage .game-x:focus-visible,.whopage .opt:focus-visible{outline:3px solid var(--ink-deep);outline-offset:2px}
.whopage .opt{all:unset;box-sizing:border-box;cursor:pointer;display:block;width:100%;padding:10px 12px;background:var(--paper);color:var(--ink-deep);border-radius:6px;
  box-shadow:0 2px 0 rgba(16,16,16,.18);font-family:var(--display);font-weight:700;font-size:.84rem;line-height:1.25;transition:transform .15s ease,background .2s ease,color .2s ease,opacity .2s ease}
.whopage .opt:hover:not([disabled]){transform:translateY(-2px)}
.whopage .opt[disabled]{cursor:default}
.whopage .opt .vd:empty{display:none}
.whopage .opt .vd{font-weight:900;text-transform:uppercase;letter-spacing:.08em;font-size:.68rem;margin-right:6px}
.whopage .opt.is-lie{background:var(--ink-deep);color:var(--on-dark)}
.whopage .opt.is-lie .vd{color:var(--red)}
.whopage .opt.is-true{background:var(--on-red-soft);color:var(--ink);box-shadow:none}
.whopage .opt.picked{outline:2px solid var(--ink-deep);outline-offset:2px}
.whopage .game-res{margin:auto 0 0;min-height:1.3em;font-family:var(--display);font-weight:800;font-size:.95rem;color:var(--ink-deep)}
.whopage .game-res.hint{font-weight:700;font-size:.78rem}
@media (max-width:699px){
  .whopage .game{width:calc(200% + var(--pgap,14px))}
  .whopage .people li:nth-child(even) .game{left:auto;right:0}
}
@media (prefers-reduced-motion:reduce){.whopage .game{animation:none}}

.whopage .come{position:relative;background:var(--ink-deep);color:var(--on-dark);overflow:hidden}
.whopage .come>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 80%}
.whopage .come::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(16,16,16,.92) 0%,rgba(16,16,16,.5) 42%,rgba(16,16,16,.08) 75%)}
.whopage .come-in{position:relative;z-index:1}
.whopage .come-in{padding-block:clamp(120px,22vw,300px) clamp(40px,6vw,72px)}
.whopage .come h2{margin:0 0 14px;font-size:clamp(3.4rem,13vw,7rem)}
.whopage .come p{margin:0 0 26px;color:var(--on-dark-soft);font-size:1.1rem}
.whopage .come-cta{display:flex;flex-wrap:wrap;gap:14px 28px;align-items:center}
.whopage .come .btn{background:var(--red);color:var(--ink-deep)}
.whopage .come .btn:focus-visible{outline-color:var(--paper)}
.whopage .come .textlink{color:var(--on-dark);text-decoration-color:var(--on-dark)}

@media (min-width:700px){
  .whopage .people{grid-template-columns:repeat(3,minmax(0,1fr));gap:36px 24px}
  .whopage .mantra button{grid-template-columns:minmax(0,auto) 1fr auto;align-items:baseline;column-gap:22px}
  .whopage .mr{grid-column:2;margin-top:0}
  .whopage .mantra .ico{grid-column:3;grid-row:1;align-self:center}
}
@media (min-width:900px){
  .whopage .people{grid-template-columns:repeat(4,minmax(0,1fr))}
  .whopage .mwrap{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,4fr);gap:clamp(36px,5vw,72px);align-items:start}
  .whopage .mstage,.whopage .mstage.has-open{display:block;margin-top:0;position:sticky;top:24px;aspect-ratio:4/5;overflow:hidden;border-radius:2px;background:var(--tee-deep)}
  .whopage .mstage img,.whopage .mstage img.rest{display:block;aspect-ratio:auto;position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .45s ease}
  .whopage .mstage img.on{opacity:1}
  .whopage .mbody img{display:none}
  .whopage .mw{font-size:clamp(3.6rem,6vw,5.4rem)}
  .whopage .heroshot{min-height:clamp(500px,44vw,660px)}
  .whopage .heroshot img{object-position:30% 30%}
  .whopage .heroshot::after{background:linear-gradient(270deg,rgba(16,16,16,.94) 0%,rgba(16,16,16,.86) 34%,rgba(16,16,16,.35) 52%,rgba(16,16,16,0) 64%)}
  .whopage .heroshot-copy{align-self:center;display:flex;justify-content:flex-end;padding-block:40px}
  .whopage .hs-box{width:min(46%,560px)}
  .whopage .heroshot h1{font-size:clamp(2.8rem,4.9vw,4.7rem)}
  .whopage .spanel{grid-template-columns:minmax(0,5fr) minmax(0,6fr)}
  .whopage .spanel img{order:2;aspect-ratio:auto;min-height:300px;max-height:380px}
}
@media (prefers-reduced-motion:reduce){.whopage *{transition:none!important;animation:none!important}}
.whopage #team{scroll-margin-top:90px}


/* ===========================================================================
   WHAT WE BELIEVE (beliefs.html). Everything is scoped under main.beliefpage.
   A glowing 3D burst drawn on a canvas, one belief at the tip of each long
   ray. Tapping a number swings it round to face you and shows the belief.
   The same list sits underneath in a drop-down, then a questions band.
   =========================================================================== */
.beliefpage{--tee:#FFFFFF;--tee-deep:#F5F5F5;--tee-line:#DCDCDC;--on-dark:#FFFFFF;--on-dark-dim:#5E5E5E;--on-dark-soft:#B9B9B9;--dark-rule:#2E2E2E;--on-red-soft:#FFE1DE;
  --display:'Archivo','Helvetica Neue',Arial,sans-serif;
  background:var(--ink-deep);color:var(--ink);font-family:var(--body);font-size:17px;line-height:1.55;-webkit-font-smoothing:antialiased}
.beliefpage h1,.beliefpage h2{text-transform:none;letter-spacing:normal;line-height:1.1;max-width:none;margin:0}
.beliefpage .b-wrap{width:100%;max-width:1160px;margin-inline:auto;padding-inline:20px}
/* the shirt lettering: Archivo at its narrowest width, uppercase */
.beliefpage .tee{font-family:var(--display);font-weight:900;font-stretch:62%;font-variation-settings:"wdth" 62;text-transform:uppercase;letter-spacing:-.005em;line-height:.9}
.beliefpage .btn{display:inline-block;background:var(--red);color:var(--ink-deep);font-family:var(--display);font-weight:700;
  font-size:1.02rem;padding:15px 30px;border-radius:2px;text-decoration:none;text-align:center;transition:background .18s ease}
.beliefpage .btn:focus-visible{outline:3px solid var(--ink);outline-offset:3px}
.beliefpage .b-kicker{font-family:var(--display);font-weight:700;text-transform:uppercase;letter-spacing:.14em;font-size:.74rem;color:var(--red-deep);margin:0 0 14px}
.beliefpage .textlink{font-weight:700;text-decoration:underline;text-decoration-color:var(--red);text-decoration-thickness:2px;text-underline-offset:5px}
.beliefpage h2.sec{font-family:var(--display);font-weight:900;font-size:clamp(1.8rem,5.4vw,2.8rem);line-height:1;letter-spacing:-.035em;margin:0 0 22px}
.beliefpage .refs{display:flex;flex-wrap:wrap;gap:6px 8px;margin:18px 0 0;padding:0;list-style:none}
.beliefpage .refs li{font-family:var(--display);font-weight:700;font-size:.74rem;letter-spacing:.04em;border:1.5px solid currentColor;border-radius:99px;padding:3px 10px;opacity:.75}


/* Layout: one dark stage. A twelve-ray burst sits beside (desktop) or above
   (phone) a reading panel. Tapping a numbered tip turns the whole burst so
   that ray points at the panel, and the panel shows that belief. The full
   list is underneath for anyone who would rather read straight down. */
.beliefpage .bstage{background:var(--ink-deep);color:var(--on-dark);overflow:hidden}
.beliefpage .bstage-in{padding-block:clamp(36px,6vw,80px) clamp(44px,7vw,96px)}
.beliefpage .bhead h1{margin:0 0 10px;font-size:clamp(3rem,11vw,6rem)}
.beliefpage .bhead p{margin:0;color:var(--on-dark-soft);font-size:1.1rem;max-width:44ch}
.beliefpage .bstage .b-kicker{color:var(--red)}
.beliefpage .bgrid{display:grid;grid-template-columns:1fr;gap:26px;margin-top:clamp(26px,4vw,44px);align-items:center}
.beliefpage .bstage{background:radial-gradient(60% 50% at 50% 46%,#2a0d0b 0%,var(--ink-deep) 70%)}
.beliefpage .wheel{position:relative;width:min(100%,380px);aspect-ratio:1;margin-inline:auto;touch-action:pan-y;cursor:grab;user-select:none;-webkit-user-select:none}
.beliefpage .wheel.dragging{cursor:grabbing}
.beliefpage .wheel canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.beliefpage .tip{all:unset;box-sizing:border-box;cursor:pointer;position:absolute;left:0;top:0;width:36px;height:36px;margin:-18px 0 0 -18px;border-radius:50%;
  background:var(--red);color:var(--ink-deep);display:grid;place-items:center;font-family:var(--display);font-weight:900;font-size:.9rem;
  box-shadow:0 0 14px rgba(240,95,86,.75);will-change:transform,opacity}
.beliefpage .tip:focus-visible{outline:3px solid var(--on-dark);outline-offset:3px}
.beliefpage .tip.on{background:var(--on-dark);box-shadow:0 0 0 5px rgba(255,255,255,.18),0 0 26px rgba(255,255,255,.8)}
.beliefpage .drag-hint{position:absolute;left:0;right:0;bottom:-6px;margin:0;text-align:center;font-size:.8rem;color:var(--on-dark-dim);pointer-events:none}
.beliefpage .bpanel{min-height:0}
.beliefpage .bcount{margin:0 0 10px;font-family:var(--display);font-weight:800;font-size:.8rem;letter-spacing:.14em;color:var(--red)}
.beliefpage .bpanel h2{margin:0 0 14px;font-size:clamp(2.3rem,8vw,3.9rem);text-wrap:balance}
.beliefpage .btext{margin:0;font-size:clamp(1.05rem,2.2vw,1.22rem);line-height:1.5;max-width:40ch}
.beliefpage .bpanel .refs li{opacity:1;color:var(--on-dark-soft);border-color:var(--dark-rule)}
.beliefpage .bpanel.swap>*{animation:bel-rise .4s ease both}
@keyframes bel-rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.beliefpage .bnav{display:flex;gap:12px;margin-top:24px}
.beliefpage .arw{all:unset;box-sizing:border-box;cursor:pointer;width:52px;height:52px;border-radius:50%;border:2px solid var(--on-dark);color:var(--on-dark);display:grid;place-items:center;
  font-family:var(--display);font-weight:800;font-size:1.35rem;line-height:1;transition:background .2s ease,color .2s ease}
.beliefpage .arw:hover{background:var(--on-dark);color:var(--ink-deep)}
.beliefpage .arw:focus-visible{outline:3px solid var(--on-dark);outline-offset:4px}

/* the same list, straight down */
.beliefpage .ball{background:var(--ink-deep);color:var(--on-dark)}
.beliefpage .ball-in{padding-block:0 clamp(40px,6vw,72px)}
.beliefpage .ball summary{cursor:pointer;font-family:var(--display);font-weight:800;font-size:clamp(1.2rem,3.4vw,1.6rem);letter-spacing:-.02em;list-style:none;display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:16px 0;border-top:2px solid var(--on-dark);border-bottom:2px solid var(--on-dark)}
.beliefpage .ball summary::-webkit-details-marker{display:none}
.beliefpage .ball summary::after{content:"+";font-size:1.8rem;line-height:1;font-weight:700}
.beliefpage .ball details[open] summary::after{content:"\2212"}
.beliefpage .ball summary:focus-visible{outline:3px solid var(--on-dark);outline-offset:4px}
.beliefpage .blist{margin:0;padding:0;list-style:none;counter-reset:b;display:grid;grid-template-columns:1fr;gap:0 48px}
.beliefpage .blist>li{counter-increment:b;padding:20px 0 20px 54px;position:relative;border-bottom:1px solid var(--dark-rule)}
.beliefpage .blist>li::before{content:counter(b,decimal-leading-zero);position:absolute;left:0;top:21px;font-family:var(--display);font-weight:900;color:var(--red);font-size:1.05rem}
.beliefpage .blist b{font-family:var(--display);font-weight:800;font-size:1.15rem;letter-spacing:-.01em}
.beliefpage .blist p{margin:4px 0 0;color:var(--on-dark)}
.beliefpage .blist .refs{margin-top:10px}
.beliefpage .blist .refs li{opacity:1;color:var(--on-dark-soft);border-color:var(--on-dark-dim)}

.beliefpage .ask{background:var(--red);color:var(--ink-deep)}
.beliefpage .ask-in{padding-block:clamp(48px,8vw,104px)}
.beliefpage .ask h2{margin:0 0 12px;font-size:clamp(3.2rem,12vw,6.4rem)}
.beliefpage .ask p{margin:0 0 26px;font-size:1.15rem;max-width:40ch}
.beliefpage .ask-cta{display:flex;flex-wrap:wrap;gap:14px 28px;align-items:center}
.beliefpage .ask .btn{background:var(--ink-deep);color:var(--on-dark)}
.beliefpage .ask .btn:focus-visible{outline-color:var(--ink-deep)}
.beliefpage .ask .textlink{text-decoration-color:var(--ink-deep)}

@media (min-width:700px){.beliefpage .blist{grid-template-columns:1fr 1fr}}
@media (min-width:900px){
  .beliefpage .bgrid{grid-template-columns:minmax(0,520px) minmax(0,1fr);gap:clamp(40px,6vw,96px)}
  .beliefpage .wheel{width:100%;max-width:520px}
  .beliefpage .tip{width:42px;height:42px;margin:-21px 0 0 -21px;font-size:1rem}
}
@media (prefers-reduced-motion:reduce){.beliefpage *{transition:none!important;animation:none!important}}


/* ===========================================================================
   WHAT IS MY NEXT STEP? (next-steps.html). Scoped under main.nextpage.
   A yes / not-yet questionnaire names your next step, then a battle map of
   the whole plan: Rally Point, Base Camp, and four ways to live on mission.
   Tapping a point opens its briefing; the questionnaire marks where you are.
   =========================================================================== */
.nextpage{--tee:#FFFFFF;--tee-deep:#F5F5F5;--tee-line:#DCDCDC;--on-dark:#FFFFFF;--on-dark-dim:#5E5E5E;--on-dark-soft:#B9B9B9;--dark-rule:#2E2E2E;--on-red-soft:#FFE1DE;
  --display:'Archivo','Helvetica Neue',Arial,sans-serif;
  background:var(--paper);color:var(--ink);font-family:var(--body);font-size:17px;line-height:1.55;-webkit-font-smoothing:antialiased}
.nextpage h1,.nextpage h2{text-transform:none;letter-spacing:normal;line-height:1.1;max-width:none;margin:0}
.nextpage .n-wrap{width:100%;max-width:1160px;margin-inline:auto;padding-inline:20px}
/* the shirt lettering: Archivo at its narrowest width, uppercase */
.nextpage .tee{font-family:var(--display);font-weight:900;font-stretch:62%;font-variation-settings:"wdth" 62;text-transform:uppercase;letter-spacing:-.005em;line-height:.9}
.nextpage .btn{display:inline-block;background:var(--red);color:var(--ink-deep);font-family:var(--display);font-weight:700;
  font-size:1.02rem;padding:15px 30px;border-radius:2px;text-decoration:none;text-align:center;transition:background .18s ease}
.nextpage .btn:focus-visible{outline:3px solid var(--ink);outline-offset:3px}
.nextpage .n-kicker{font-family:var(--display);font-weight:700;text-transform:uppercase;letter-spacing:.14em;font-size:.74rem;color:var(--red-deep);margin:0 0 14px}
.nextpage .textlink{font-weight:700;text-decoration:underline;text-decoration-color:var(--red);text-decoration-thickness:2px;text-underline-offset:5px}
.nextpage h2.sec{font-family:var(--display);font-weight:900;font-size:clamp(1.8rem,5.4vw,2.8rem);line-height:1;letter-spacing:-.035em;margin:0 0 22px}
.nextpage .refs{display:flex;flex-wrap:wrap;gap:6px 8px;margin:18px 0 0;padding:0;list-style:none}
.nextpage .refs li{font-family:var(--display);font-weight:700;font-size:.74rem;letter-spacing:.04em;border:1.5px solid currentColor;border-radius:99px;padding:3px 10px;opacity:.75}


/* Layout: the question is the page. A dark quiz card sits right under the
   headline: one yes / not-yet question at a time, stopping at the first
   "not yet" and naming that as your next step. The whole pathway is laid
   out underneath as a climbing trail: step 1, step 2, then step 3 opening
   into four ways to live on mission. */
.nextpage .nhero{background:var(--paper);position:relative;overflow:hidden}
.nextpage .nhero-in{position:relative;z-index:1;padding-block:0 clamp(40px,6vw,80px)}
/* the photo's own backdrop is a white banner, so it fades straight into the page and the headline sits half on it */
.nextpage .nshot{position:relative}
.nextpage .nshot img{display:block;width:100%;height:auto;aspect-ratio:16/11;object-fit:cover;object-position:50% 35%}
.nextpage .nshot::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,#fff 0%,rgba(255,255,255,0) 22%,rgba(255,255,255,0) 70%,#fff 100%)}
.nextpage .nhero{display:flex;flex-direction:column}
.nextpage .nhero-in,.nextpage .nlead{display:contents}
.nextpage .nhero h1{order:1;padding:22px 20px 0}
.nextpage .nshot{order:2}
.nextpage .nhero .quiz{order:3;margin:-34px 20px clamp(40px,6vw,80px);position:relative;z-index:1}
.nextpage .nhero h1{margin:0 0 16px;font-size:clamp(2.7rem,11vw,5rem)}
.nextpage .nhero h1 em{font-style:normal;color:var(--red-deep);display:block}
.nextpage .quiz{background:var(--ink-deep);color:var(--on-dark);border-radius:6px;padding:clamp(22px,3vw,36px);min-height:17.5rem;display:flex;flex-direction:column}
.nextpage .qtop{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:clamp(18px,3vw,30px)}
.nextpage .qtop .n-kicker{margin:0;color:var(--red);white-space:nowrap}
.nextpage .dots{display:flex;gap:4px;flex:none}
.nextpage .dots i{width:clamp(8px,2.4vw,22px);height:4px;border-radius:2px;background:var(--dark-rule);transition:background .25s ease}
.nextpage .dots i.done{background:var(--red)}
.nextpage .dots i.now{background:var(--on-dark)}
.nextpage .qbody>*{animation:nx-qin .32s ease both}
@keyframes nx-qin{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.nextpage .qq{margin:0 0 clamp(20px,3vw,30px);font-family:var(--display);font-weight:900;font-size:clamp(1.9rem,6.4vw,3.2rem);line-height:1.03;letter-spacing:-.035em;text-wrap:balance}
.nextpage .qbtns{display:grid;grid-template-columns:1fr 1fr;gap:12px;max-width:520px}
.nextpage .qb{all:unset;box-sizing:border-box;cursor:pointer;text-align:center;padding:18px 14px;border-radius:4px;font-family:var(--display);font-weight:800;font-size:1.15rem;
  background:var(--on-dark);color:var(--ink-deep);transition:transform .15s ease,background .2s ease}
.nextpage .qb.alt{background:var(--red)}
.nextpage .qb:hover{transform:translateY(-2px)}
.nextpage .qb:focus-visible,.nextpage .qagain:focus-visible{outline:3px solid var(--on-dark);outline-offset:3px}
.nextpage .rlabel{margin:0 0 8px;font-family:var(--display);font-weight:800;text-transform:uppercase;letter-spacing:.14em;font-size:.78rem;color:var(--red)}
.nextpage .rtitle{margin:0 0 12px;font-size:clamp(3rem,12vw,6rem)}
.nextpage .rtext{margin:0 0 24px;font-size:clamp(1.08rem,2.4vw,1.25rem);max-width:38ch;color:var(--on-dark)}
.nextpage .rcta{display:flex;flex-wrap:wrap;gap:14px 26px;align-items:center}
.nextpage .quiz .btn{background:var(--red);color:var(--ink-deep)}
.nextpage .quiz .btn:focus-visible{outline-color:var(--on-dark)}
.nextpage .qagain{all:unset;cursor:pointer;font-weight:700;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:5px;color:var(--on-dark)}
.nextpage .qfoot{margin-top:auto;padding-top:22px;display:flex;gap:18px;min-height:1.6rem}
.nextpage .qback{all:unset;cursor:pointer;color:var(--on-dark-soft);font-size:.95rem;text-decoration:underline;text-underline-offset:4px}
.nextpage .qback[hidden]{display:none}
.nextpage .qback:focus-visible{outline:2px solid var(--on-dark);outline-offset:3px}
.nextpage .need{display:inline-block;background:var(--todo-bg);color:var(--todo-ink);border:1px solid var(--todo-line);font-family:var(--display);font-weight:700;font-size:.66rem;text-transform:uppercase;letter-spacing:.08em;padding:3px 8px;border-radius:2px;vertical-align:middle}

/* THE BATTLE PLAN: a map you tap. Two staging points, then the advance splits four ways. */
.nextpage .pathway{background:var(--ink-deep);color:var(--on-dark)}
.nextpage .pathway-in{padding-block:clamp(48px,7vw,96px)}
.nextpage .pathway .n-kicker{color:var(--red)}
.nextpage .war{display:grid;grid-template-columns:1fr;gap:18px;margin-top:clamp(10px,2vw,22px)}
.nextpage .map{position:relative;aspect-ratio:4/6;border:2px solid var(--on-dark);border-radius:4px;overflow:hidden;scroll-margin-top:90px;
  background:
    linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px) 0 0/100% 12.5%,
    linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px) 0 0/12.5% 100%,
    radial-gradient(70% 60% at 30% 20%,#2a0f0d 0%,#161616 70%)}
.nextpage .map svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.nextpage .topo{fill:none;stroke:rgba(255,255,255,.1);stroke-width:1}
.nextpage .topo.idx{stroke:rgba(255,255,255,.2);stroke-width:1.4}
.nextpage .adv{fill:none;stroke:var(--red);stroke-width:5;stroke-linecap:round;stroke-dasharray:2 13;animation:nx-march 1.1s linear infinite;transition:stroke .3s ease}
.nextpage .adv.taken{stroke:var(--on-dark);stroke-dasharray:none;animation:none}
.nextpage .adv.live{stroke-dasharray:14 10}
@keyframes nx-march{to{stroke-dashoffset:-30}}
.nextpage .frontline{fill:none;stroke:var(--on-dark-dim);stroke-width:2;stroke-dasharray:10 8}
.nextpage .grid-tag{position:absolute;font-family:var(--display);font-weight:700;font-size:.62rem;letter-spacing:.16em;color:var(--on-dark-dim);text-transform:uppercase}
.nextpage .grid-tag.tl{left:10px;top:8px}.nextpage .grid-tag.br{right:10px;bottom:8px}
.nextpage .front{position:absolute;left:58%;top:41%;transform:translate(-50%,-50%);background:var(--ink-deep);border:2px solid var(--on-dark-dim);padding:5px 12px;border-radius:99px;white-space:nowrap;
  font-family:var(--display);font-weight:800;text-transform:uppercase;letter-spacing:.1em;font-size:.72rem;color:var(--on-dark)}
.nextpage .front b{color:var(--red);margin-right:6px}
.nextpage .node{all:unset;box-sizing:border-box;cursor:pointer;position:absolute;left:calc(var(--px)*1%);top:calc(var(--py)*1%);transform:translate(-22px,-22px);
  display:flex;align-items:center;gap:10px;z-index:2}
.nextpage .mk{flex:none;width:44px;height:44px;display:grid;place-items:center;border-radius:50%;background:var(--ink-deep);border:3px solid var(--red);color:var(--red);
  font-family:var(--display);font-weight:900;font-size:1.15rem;transition:background .25s ease,color .25s ease,border-color .25s ease,transform .25s ease,box-shadow .25s ease}
.nextpage .node.obj .mk{border-radius:6px;transform:rotate(45deg);font-size:0}
.nextpage .node.obj .mk::after{content:"";width:12px;height:12px;background:var(--red);border-radius:2px;transition:background .25s ease}
.nextpage .lbl{font-family:var(--display);font-weight:900;font-stretch:62%;font-variation-settings:"wdth" 62;text-transform:uppercase;font-size:1.35rem;line-height:.95;color:var(--on-dark);text-align:left;max-width:9.5ch;
  background:rgba(16,16,16,.78);padding:2px 6px;border-radius:2px}
.nextpage .node:hover .mk{transform:scale(1.1)}.nextpage .node.obj:hover .mk{transform:rotate(45deg) scale(1.1)}
.nextpage .node:focus-visible .mk{outline:3px solid var(--on-dark);outline-offset:4px}
.nextpage .node.sel .mk{background:var(--red);color:var(--ink-deep);box-shadow:0 0 0 6px rgba(240,95,86,.28)}
.nextpage .node.sel.obj .mk::after{background:var(--ink-deep)}
.nextpage .node.taken .mk{background:var(--on-dark);border-color:var(--on-dark);color:var(--ink-deep)}
.nextpage .node.taken.obj .mk::after{background:var(--ink-deep)}
.nextpage .node.target .mk{animation:nx-ping 1.5s ease-out infinite}
@keyframes nx-ping{0%{box-shadow:0 0 0 0 rgba(240,95,86,.7)}100%{box-shadow:0 0 0 22px rgba(240,95,86,0)}}
.nextpage .here{position:absolute;z-index:3;transform:translate(-50%,-58px);background:var(--red);color:var(--ink-deep);font-family:var(--display);font-weight:900;text-transform:uppercase;letter-spacing:.08em;
  font-size:.66rem;padding:4px 8px;border-radius:2px;white-space:nowrap;pointer-events:none}
.nextpage .here::after{content:"";position:absolute;left:50%;top:100%;margin-left:-5px;border:5px solid transparent;border-top-color:var(--red)}
.nextpage .here.side{transform:translate(calc(-100% - 38px),-50%)}
.nextpage .here.side::after{left:100%;top:50%;margin:-5px 0 0;border-color:transparent;border-left-color:var(--red)}
.nextpage .here[hidden]{display:none}
.nextpage .brief{border:2px solid var(--on-dark);border-radius:4px;padding:clamp(20px,3vw,32px);display:flex;flex-direction:column;min-height:16rem}
.nextpage .brief>*{animation:nx-qin .32s ease both}
.nextpage .bk{margin:0 0 8px;font-family:var(--display);font-weight:800;text-transform:uppercase;letter-spacing:.14em;font-size:.74rem;color:var(--red)}
.nextpage .brief h3{margin:0;font-size:clamp(3rem,11vw,4.6rem)}
.nextpage .btag{margin:8px 0 0;font-family:var(--display);font-weight:800;font-size:1.25rem;letter-spacing:-.02em}
.nextpage .btag:empty{display:none}
.nextpage .bd{margin:10px 0 20px;color:var(--on-dark-soft);font-size:1.08rem;max-width:42ch}
.nextpage .bcta{margin:auto 0 0}
.nextpage .brief{scroll-margin-top:84px}
.nextpage .tomap{all:unset;cursor:pointer;margin-top:18px;align-self:flex-start;color:var(--on-dark-soft);font-size:.95rem;text-decoration:underline;text-underline-offset:4px}
.nextpage .tomap:focus-visible{outline:2px solid var(--on-dark);outline-offset:3px}
.nextpage .pathway .btn{background:var(--red);color:var(--ink-deep)}
.nextpage .pathway .btn:focus-visible{outline-color:var(--on-dark)}

@media (min-width:900px){
  .nextpage .nshot{position:absolute;top:0;bottom:0;right:0;width:52%}
  .nextpage .nshot img{position:absolute;inset:0;width:100%;height:100%;aspect-ratio:auto;object-position:50% 30%}
  .nextpage .nshot::after{background:linear-gradient(90deg,#fff 0%,rgba(255,255,255,.7) 14%,rgba(255,255,255,0) 40%),linear-gradient(0deg,#fff 0%,rgba(255,255,255,0) 16%)}
  .nextpage .nhero-in{padding-top:clamp(40px,5vw,72px)}
  .nextpage .nhero{display:block}
  .nextpage .nhero-in{display:block}
  .nextpage .nlead{display:block;width:min(50%,580px)}
  .nextpage .nhero h1{padding:0}
  .nextpage .nhero .quiz{margin:0}
  .nextpage .nhero h1{font-size:clamp(2.6rem,4.3vw,4rem);margin-bottom:28px}
}
@media (min-width:900px){
  .nextpage .war{grid-template-columns:minmax(0,1.9fr) minmax(0,1fr);align-items:stretch}
  .nextpage .map{aspect-ratio:auto;min-height:540px;background-size:100% 12.5%,8.333% 100%,auto}
  .nextpage .node{left:calc(var(--x)*1%);top:calc(var(--y)*1%)}
  .nextpage .lbl{font-size:1.7rem;max-width:none}
  .nextpage .front{left:46%;top:6%}
  .nextpage .tomap{display:none}
}
@media (prefers-reduced-motion:reduce){.nextpage *{transition:none!important;animation:none!important}}
.nextpage .need{display:none}
@media (min-width:900px){.nextpage .brief h3{font-size:clamp(2.4rem,3.6vw,3.6rem)}}
.nextpage .bwhen{margin:0 0 14px;font-family:var(--display);font-weight:800;font-size:1rem;color:var(--on-dark)}
.nextpage .bwhen[hidden]{display:none}
.nextpage .bnav{display:flex;align-items:center;gap:12px;margin-top:22px}
.nextpage .arw{all:unset;box-sizing:border-box;cursor:pointer;width:48px;height:48px;border-radius:50%;border:2px solid var(--on-dark);color:var(--on-dark);display:grid;place-items:center;font-family:var(--display);font-weight:800;font-size:1.25rem;line-height:1;transition:background .2s ease,color .2s ease}
.nextpage .arw:hover{background:var(--on-dark);color:var(--ink-deep)}
.nextpage .arw:focus-visible{outline:3px solid var(--red);outline-offset:3px}
.nextpage .bpos{font-family:var(--display);font-weight:800;font-size:.85rem;letter-spacing:.12em;color:var(--on-dark-soft);min-width:3.2em;text-align:center}
.nextpage .come{position:relative;background:var(--ink-deep);color:var(--on-dark);overflow:hidden}
.nextpage .come>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 80%}
.nextpage .come::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(16,16,16,.92) 0%,rgba(16,16,16,.5) 42%,rgba(16,16,16,.08) 75%)}
.nextpage .come-in{position:relative;z-index:1}
.nextpage .come-in{padding-block:clamp(120px,22vw,300px) clamp(40px,6vw,72px)}
.nextpage .come h2{margin:0 0 14px;font-size:clamp(3.4rem,13vw,7rem)}
.nextpage .come p{margin:0 0 26px;color:var(--on-dark-soft);font-size:1.1rem}
.nextpage .come-cta{display:flex;flex-wrap:wrap;gap:14px 28px;align-items:center}
.nextpage .come .btn{background:var(--red);color:var(--ink-deep)}
.nextpage .come .btn:focus-visible{outline-color:var(--paper)}
.nextpage .come .textlink{color:var(--on-dark);text-decoration-color:var(--on-dark)}


/* ===========================================================================
   GET BAPTIZED (baptism.html). Scoped under main.baptpage.
   Photo hero with the sign-up button, one big number, a strip of baptism
   photos, three steps, a single "I have questions." toggle that unfurls the
   questions, and the button again. The "when" line fills in from /api/steps.
   =========================================================================== */
.baptpage{--tee:#FFFFFF;--tee-deep:#F5F5F5;--tee-line:#DCDCDC;--on-dark:#FFFFFF;--on-dark-dim:#5E5E5E;--on-dark-soft:#B9B9B9;--dark-rule:#2E2E2E;--on-red-soft:#FFE1DE;
  --display:'Archivo','Helvetica Neue',Arial,sans-serif;
  background:var(--paper);color:var(--ink);font-family:var(--body);font-size:17px;line-height:1.55;-webkit-font-smoothing:antialiased}
.baptpage h1,.baptpage h2{text-transform:none;letter-spacing:normal;line-height:1.1;max-width:none;margin:0}
.baptpage .bp-wrap{width:100%;max-width:1160px;margin-inline:auto;padding-inline:20px}
.baptpage img{max-width:100%}
/* the shirt lettering: Archivo at its narrowest width, uppercase */
.baptpage .tee{font-family:var(--display);font-weight:900;font-stretch:62%;font-variation-settings:"wdth" 62;text-transform:uppercase;letter-spacing:-.005em;line-height:.9}
.baptpage .btn{display:inline-block;background:var(--red);color:var(--ink-deep);font-family:var(--display);font-weight:700;
  font-size:1.02rem;padding:15px 30px;border-radius:2px;text-decoration:none;text-align:center;transition:background .18s ease}
.baptpage .btn:focus-visible{outline:3px solid var(--ink);outline-offset:3px}
.baptpage .bp-kicker{font-family:var(--display);font-weight:700;text-transform:uppercase;letter-spacing:.14em;font-size:.74rem;color:var(--red-deep);margin:0 0 14px}
.baptpage .textlink{font-weight:700;text-decoration:underline;text-decoration-color:var(--red);text-decoration-thickness:2px;text-underline-offset:5px}
.baptpage h2.sec{font-family:var(--display);font-weight:900;font-size:clamp(1.8rem,5.4vw,2.8rem);line-height:1;letter-spacing:-.035em;margin:0 0 22px}
.baptpage .refs{display:flex;flex-wrap:wrap;gap:6px 8px;margin:18px 0 0;padding:0;list-style:none}
.baptpage .refs li{font-family:var(--display);font-weight:700;font-size:.74rem;letter-spacing:.04em;border:1.5px solid currentColor;border-radius:99px;padding:3px 10px;opacity:.75}



/* Layout: one decision, asked plainly. A dark photo hero with the sign-up
   button in the first screen, a single big number, three steps, then the
   questions people actually ask, and the button again. */
.baptpage .bhero{position:relative;background:var(--ink-deep);color:var(--on-dark);overflow:hidden}
.baptpage .bshot{position:relative;display:block}
.baptpage .bshot img{display:block;width:100%;height:auto;aspect-ratio:8/7;object-fit:cover;object-position:50% 30%}
.baptpage .bshot::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(16,16,16,0) 35%,rgba(16,16,16,.8) 80%,var(--ink-deep) 100%)}
.baptpage .bhero-in{position:relative;z-index:1;margin-top:-70px;padding-bottom:clamp(40px,6vw,72px)}
.baptpage .bhero .bp-kicker{color:var(--red)}
.baptpage .bhero h1{margin:0 0 14px;font-size:clamp(3.9rem,17vw,9rem)}
.baptpage .bhero h1 em{font-style:normal;color:var(--red)}
.baptpage .blede{margin:0 0 26px;font-size:clamp(1.12rem,2.6vw,1.4rem);max-width:30ch;color:var(--on-dark)}
.baptpage .bp-cta{display:flex;flex-wrap:wrap;gap:14px 26px;align-items:center}
.baptpage .bhero .btn:focus-visible{outline-color:var(--on-dark)}
.baptpage .bhero .textlink{color:var(--on-dark);text-decoration-color:var(--on-dark)}

.baptpage .count{background:var(--red);color:var(--ink-deep)}
.baptpage .count-in{padding-block:clamp(36px,6vw,72px);display:grid;grid-template-columns:1fr;gap:6px;align-items:end}
.baptpage .count b{font-family:var(--display);font-weight:900;font-stretch:62%;font-variation-settings:"wdth" 62;font-size:clamp(8rem,34vw,17rem);line-height:.78;letter-spacing:-.02em}
.baptpage .count p{margin:0;font-family:var(--display);font-weight:800;font-size:clamp(1.4rem,4.4vw,2.4rem);line-height:1.1;letter-spacing:-.03em;max-width:18ch}

.baptpage .moments{background:var(--ink-deep)}
.baptpage .mrow{list-style:none;margin:0;padding:0;display:grid;grid-auto-flow:column;grid-auto-columns:72%;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.baptpage .mrow::-webkit-scrollbar{display:none}
.baptpage .mrow li{scroll-snap-align:start}
.baptpage .mrow img{display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover}
.baptpage .how{background:var(--paper)}
.baptpage .how-in{padding-block:clamp(48px,7vw,96px)}
.baptpage .hsteps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr;gap:0}
.baptpage .hsteps li{display:grid;grid-template-columns:auto 1fr;column-gap:20px;padding:22px 0;border-top:3px solid var(--ink)}
.baptpage .hsteps li:last-child{border-bottom:3px solid var(--ink)}
.baptpage .hn{font-family:var(--display);font-weight:900;font-stretch:62%;font-variation-settings:"wdth" 62;font-size:clamp(4rem,12vw,6.4rem);line-height:.8;color:var(--red-deep);min-width:.6em}
.baptpage .hsteps h3{margin:0 0 6px;font-family:var(--display);font-weight:900;font-size:clamp(1.4rem,4vw,1.9rem);letter-spacing:-.03em;line-height:1.05}
.baptpage .hsteps p{margin:0;max-width:44ch}
.baptpage .when{margin:28px 0 0;padding:18px 20px;background:var(--tee-deep);border-left:5px solid var(--red-deep);max-width:640px}
.baptpage .when .textlink{display:inline-block;margin-top:6px}
.baptpage .when b{display:block;font-family:var(--display);font-weight:800;font-size:1.15rem;margin-bottom:4px}

.baptpage .bfaq{background:var(--ink-deep);color:var(--on-dark)}
.baptpage .bfaq-in{padding-block:clamp(36px,5vw,64px)}
.baptpage .bfaq .bp-kicker{color:var(--red)}
.baptpage .allq>summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:20px}
.baptpage .allq>summary::-webkit-details-marker{display:none}
.baptpage .allq>summary .tee{font-size:clamp(3rem,11vw,6rem)}
.baptpage .allq>summary::after{content:"";flex:none;width:clamp(44px,7vw,64px);height:clamp(44px,7vw,64px);border-radius:50%;background:var(--red) center/46% no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23101010' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M12 4v16M4 12h16'/%3E%3C/svg%3E");transition:transform .35s ease}
.baptpage .allq[open]>summary::after{transform:rotate(45deg)}
.baptpage .allq>summary:focus-visible{outline:3px solid var(--red);outline-offset:6px}
.baptpage .allq-in{padding-top:clamp(20px,3vw,32px)}
.baptpage .allq[open] .allq-in>*{animation:bp-unfurl .45s cubic-bezier(.2,.7,.2,1) both}
.baptpage .allq[open] .allq-in>*:nth-child(2){animation-delay:.05s}.baptpage .allq[open] .allq-in>*:nth-child(3){animation-delay:.1s}.baptpage .allq[open] .allq-in>*:nth-child(4){animation-delay:.15s}
.baptpage .allq[open] .allq-in>*:nth-child(5){animation-delay:.2s}.baptpage .allq[open] .allq-in>*:nth-child(6){animation-delay:.25s}.baptpage .allq[open] .allq-in>*:nth-child(7){animation-delay:.3s}
@keyframes bp-unfurl{from{opacity:0;transform:translateY(-14px)}to{opacity:1;transform:none}}
.baptpage .qa{border-top:2px solid var(--on-dark)}
.baptpage .qa:last-of-type{border-bottom:2px solid var(--on-dark)}
.baptpage .qa summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:18px;padding:18px 0;font-family:var(--display);font-weight:800;font-size:clamp(1.15rem,3.2vw,1.55rem);letter-spacing:-.02em;line-height:1.15}
.baptpage .qa summary::-webkit-details-marker{display:none}
.baptpage .qa summary::after{content:"+";font-weight:700;font-size:1.8rem;line-height:1;flex:none;color:var(--red)}
.baptpage .qa[open] summary::after{content:"\2212"}
.baptpage .qa summary:focus-visible{outline:3px solid var(--red);outline-offset:4px}
.baptpage .qa .ans{padding:0 0 22px;max-width:60ch;color:var(--on-dark)}
.baptpage .qa .ans p{margin:0 0 10px}
.baptpage .bfaq .more{margin:26px 0 0}
.baptpage .bfaq .more .textlink{color:var(--on-dark);text-decoration-color:var(--red)}
.baptpage .qa .refs li{opacity:1;color:var(--on-dark-soft);border-color:var(--on-dark-dim)}

.baptpage .ready{background:var(--ink-deep);color:var(--on-dark);border-top:1px solid var(--dark-rule)}
.baptpage .ready-in{padding-block:clamp(40px,7vw,96px);display:grid;grid-template-columns:1fr;gap:26px;align-items:center}
.baptpage .rphoto{display:block;width:100%;height:auto;aspect-ratio:4/4.4;object-fit:cover;object-position:50% 20%;border-radius:4px}
.baptpage .ready h2{margin:0 0 12px;font-size:clamp(3.6rem,14vw,7.4rem)}
.baptpage .ready p{margin:0 0 26px;font-size:1.15rem;max-width:38ch}
.baptpage .ready .btn{background:var(--red);color:var(--ink-deep)}
.baptpage .ready .btn:focus-visible{outline-color:var(--on-dark)}

@media (min-width:900px){
  .baptpage .bshot{position:absolute;top:0;bottom:0;right:0;width:54%}
  .baptpage .bshot img{position:absolute;inset:0;width:100%;height:100%;aspect-ratio:auto}
  .baptpage .bshot::after{background:linear-gradient(90deg,var(--ink-deep) 0%,rgba(16,16,16,.75) 22%,rgba(16,16,16,0) 55%)}
  .baptpage .bhero-in{margin-top:0;padding-block:clamp(64px,8vw,120px)}
  .baptpage .bhero-copy{width:min(56%,640px)}
  .baptpage .bhero h1{font-size:clamp(6rem,10.5vw,9.6rem)}
  .baptpage .mrow{grid-auto-flow:row;grid-template-columns:repeat(4,1fr);overflow:visible}
  .baptpage .ready-in{grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(36px,5vw,80px)}
  .baptpage .count-in{grid-template-columns:auto 1fr;gap:clamp(24px,4vw,56px);align-items:center}
  .baptpage .hsteps{grid-template-columns:repeat(3,1fr);gap:0 clamp(24px,3vw,48px)}
  .baptpage .hsteps li{grid-template-columns:1fr;border-bottom:3px solid var(--ink);row-gap:14px;align-content:start}
}
@media (prefers-reduced-motion:reduce){.baptpage *{transition:none!important;animation:none!important}}


/* ===========================================================================
   JOIN A TEAM (teams.html). Scoped under main.teampage.
   Coral hero, a draggable Sunday timeline whose background is the sky, a
   photo strip, an eight-question team finder that ends in a lanyard badge,
   the full team list behind a toggle, and a sticky Join a team button.
   Team names and lines live in one place: the script at the foot of the page.
   =========================================================================== */
.teampage{--tee:#FFFFFF;--tee-deep:#F5F5F5;--tee-line:#DCDCDC;--on-dark:#FFFFFF;--on-dark-dim:#5E5E5E;--on-dark-soft:#B9B9B9;--dark-rule:#2E2E2E;--on-red-soft:#FFE1DE;
  --display:'Archivo','Helvetica Neue',Arial,sans-serif;
  background:var(--paper);color:var(--ink);font-family:var(--body);font-size:17px;line-height:1.55;-webkit-font-smoothing:antialiased}
.teampage h1,.teampage h2,.teampage h3{max-width:none}
.teampage h1,.teampage h2{text-transform:none;letter-spacing:normal;line-height:1.1;margin:0}
.teampage img{max-width:100%}
.teampage .tm-wrap{width:100%;max-width:1160px;margin-inline:auto;padding-inline:20px}
/* the shirt lettering: Archivo at its narrowest width, uppercase */
.teampage .tee{font-family:var(--display);font-weight:900;font-stretch:62%;font-variation-settings:"wdth" 62;text-transform:uppercase;letter-spacing:-.005em;line-height:.9}
.teampage .btn{display:inline-block;background:var(--red);color:var(--ink-deep);font-family:var(--display);font-weight:700;
  font-size:1.02rem;padding:15px 30px;border-radius:2px;text-decoration:none;text-align:center;transition:background .18s ease}
.teampage .btn:focus-visible{outline:3px solid var(--ink);outline-offset:3px}
.teampage .tm-kicker{font-family:var(--display);font-weight:700;text-transform:uppercase;letter-spacing:.14em;font-size:.74rem;color:var(--red-deep);margin:0 0 14px}
.teampage .textlink{font-weight:700;text-decoration:underline;text-decoration-color:var(--red);text-decoration-thickness:2px;text-underline-offset:5px}
.teampage h2.sec{font-family:var(--display);font-weight:900;font-size:clamp(1.8rem,5.4vw,2.8rem);line-height:1;letter-spacing:-.035em;margin:0 0 22px}
.teampage .refs{display:flex;flex-wrap:wrap;gap:6px 8px;margin:18px 0 0;padding:0;list-style:none}
.teampage .refs li{font-family:var(--display);font-weight:700;font-size:.74rem;letter-spacing:.04em;border:1.5px solid currentColor;border-radius:99px;padding:3px 10px;opacity:.75}



/* Layout: the finder is the page. A coral hero states the idea, then three
   rows of choices (passion, desire, capability) sit beside a live result
   that fills in as you tap. Every team is listed once, briefly, underneath. */
.teampage .thero{background:var(--red);color:var(--ink-deep);position:relative;overflow:hidden}
.teampage .thero-in{display:grid;grid-template-columns:1fr;gap:0}
.teampage .tshot{margin-inline:-20px}
.teampage .tshot img{display:block;width:100%;height:auto;aspect-ratio:5/4;object-fit:cover;object-position:50% 22%}
.teampage .tcopy{padding-block:26px clamp(36px,6vw,64px)}
.teampage .thero .tm-kicker{color:var(--ink-deep)}
.teampage .thero h1{margin:0 0 14px;font-size:clamp(3.4rem,14vw,7.6rem)}
.teampage .thero p.lede{margin:0 0 24px;font-size:clamp(1.1rem,2.6vw,1.35rem);max-width:32ch}
.teampage .tm-cta{display:flex;flex-wrap:wrap;gap:14px 26px;align-items:center}
.teampage .thero .btn{background:var(--ink-deep);color:var(--on-dark)}
.teampage .thero .btn:focus-visible{outline-color:var(--ink-deep)}
.teampage .thero .textlink{text-decoration-color:var(--ink-deep)}


/* ONE SUNDAY: a timeline you drag. The section is the sky. It starts black
   before sunrise, warms through red and coral as the building fills, goes
   white for the service, and the sun climbs across it as you go. */
.teampage .sunday{position:relative;overflow:hidden;background:var(--sky,#101010);color:var(--fg,#fff);transition:background-color .7s ease,color .5s ease;scroll-margin-top:70px;
  --fg:#fff;--soft:rgba(255,255,255,.72);--rule:rgba(255,255,255,.28);--card:rgba(255,255,255,.08);--accent:var(--red)}
.teampage .sunday.light{--fg:var(--ink-deep);--soft:rgba(16,16,16,.74);--rule:rgba(16,16,16,.3);--card:rgba(255,255,255,.62);--accent:var(--ink-deep)}
.teampage .sunday-in{position:relative;z-index:1;padding-block:clamp(36px,5vw,64px)}
.teampage .sunday .tm-kicker{color:var(--accent);transition:color .5s ease}
.teampage .sunday h2.sec{max-width:20ch}
.teampage .sun{position:absolute;left:calc(6% + var(--sx,0)*88%);top:calc(70% - var(--sy,0)*58%);width:clamp(120px,22vw,300px);aspect-ratio:1;border-radius:50%;transform:translate(-50%,-50%);
  background:var(--sunc,#F05F56);opacity:var(--so,0);filter:blur(1px);box-shadow:0 0 90px 30px var(--sunc,#F05F56);
  transition:left .9s cubic-bezier(.2,.7,.2,1),top .9s cubic-bezier(.2,.7,.2,1),opacity .6s ease,background-color .6s ease,box-shadow .6s ease;pointer-events:none}
.teampage .track{position:relative;display:grid;grid-template-columns:repeat(8,1fr);margin:clamp(18px,3vw,30px) 0 clamp(22px,4vw,40px);touch-action:pan-y;cursor:grab;user-select:none;-webkit-user-select:none}
.teampage .track::before,.teampage .tm-fill{content:"";position:absolute;left:6.25%;top:13px;height:4px;border-radius:2px}
.teampage .track::before{right:6.25%;background:var(--rule)}
.teampage .tm-fill{width:calc(var(--at,0)*12.5%);background:var(--fg);transition:width .5s cubic-bezier(.2,.7,.2,1),background-color .5s ease}
.teampage .tick{all:unset;box-sizing:border-box;cursor:pointer;position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:8px;padding:2px 0 4px}
.teampage .tick i{width:26px;height:26px;border-radius:50%;border:3px solid var(--fg);background:var(--sky,#101010);transition:background-color .4s ease,transform .3s ease,border-color .5s ease}
.teampage .tick.done i{background:var(--fg)}
.teampage .tick.on i{background:var(--fg);transform:scale(1.3)}
.teampage .tick span{font-family:var(--display);font-weight:800;font-size:.72rem;letter-spacing:.02em;color:var(--soft);transition:color .5s ease}
.teampage .tick.on span{color:var(--fg)}
.teampage .tick:focus-visible i{outline:3px solid var(--fg);outline-offset:4px}
.teampage .scene{display:grid;grid-template-columns:1fr;gap:18px;align-content:start}
.teampage .scene>*{animation:tm-qin .4s ease both}
.teampage .clock{display:flex;align-items:baseline;gap:10px}
.teampage .ct{font-size:clamp(5.4rem,22vw,11rem);line-height:.8}
.teampage .cap{font-family:var(--display);font-weight:900;font-size:clamp(1.2rem,4vw,2rem);letter-spacing:-.02em}
.teampage .said h3{margin:0 0 6px;font-family:var(--display);font-weight:900;font-size:clamp(1.6rem,5vw,2.5rem);letter-spacing:-.035em;line-height:1.05}
.teampage .said p{margin:0;color:var(--soft);font-size:clamp(1.05rem,2.3vw,1.2rem);max-width:40ch;transition:color .5s ease}
.teampage .sphoto{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;border-radius:4px}
.teampage .sphoto[hidden]{display:none}
.teampage .crew{list-style:none;margin:6px 0 0;padding:0;display:grid;grid-template-columns:1fr;gap:10px}
.teampage .crew li{background:var(--card);border:2px solid var(--rule);border-radius:4px;padding:16px 16px 18px;display:flex;flex-direction:column;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);transition:background-color .5s ease,border-color .5s ease}
.teampage .crew .cn{font-family:var(--display);font-weight:900;font-stretch:62%;font-variation-settings:"wdth" 62;text-transform:uppercase;font-size:clamp(1.8rem,6vw,2.3rem);line-height:.95}
.teampage .crew .cwhy{margin:8px 0 12px;font-size:1rem}
.teampage .crew .creq{margin:-4px 0 12px;font-family:var(--display);font-weight:700;font-size:.72rem;text-transform:uppercase;letter-spacing:.08em;color:var(--soft)}
.teampage .crew a{margin-top:auto;align-self:flex-start;font-weight:700;color:var(--fg);text-decoration:underline;text-decoration-color:var(--accent);text-decoration-thickness:2px;text-underline-offset:5px}
.teampage .snav{display:flex;align-items:center;gap:12px;margin-top:26px;flex-wrap:wrap}
.teampage .arw{all:unset;box-sizing:border-box;cursor:pointer;width:52px;height:52px;border-radius:50%;border:2px solid var(--fg);color:var(--fg);display:grid;place-items:center;font-family:var(--display);font-weight:800;font-size:1.3rem;line-height:1;transition:background-color .2s ease,color .2s ease,border-color .5s ease}
.teampage .arw:hover{background:var(--fg);color:var(--sky,#101010)}
.teampage .arw:focus-visible{outline:3px solid var(--fg);outline-offset:4px}
.teampage .shint{color:var(--soft);font-size:.9rem}

/* On phones the photo reel sits between the team finder and the team list */
.teampage{display:flex;flex-direction:column}
@media (max-width:899px){.teampage .reel{order:1}.teampage .allteams{order:2}}
/* PHOTO REEL: swipe sideways */
.teampage .reel{background:var(--ink-deep);color:var(--on-dark)}
.teampage .reel-in{padding-block:clamp(20px,3vw,36px)}
.teampage .reel-head{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;margin-bottom:18px}
.teampage .reel .tm-kicker{color:var(--red)}
.teampage .reel h2.sec{margin:0}
.teampage .reel-nav{display:none;gap:10px}
.teampage .reel .arw{border-color:var(--on-dark);color:var(--on-dark)}
.teampage .reel .arw:hover{background:var(--on-dark);color:var(--ink-deep)}
.teampage .rtrack{list-style:none;margin:0;padding:0 20px;display:grid;grid-auto-flow:column;grid-auto-columns:min(74vw,320px);gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:20px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.teampage .rtrack::-webkit-scrollbar{display:none}
.teampage .rtrack{cursor:grab}
.teampage .rtrack li{scroll-snap-align:start}
.teampage .rtrack img{-webkit-user-drag:none;user-select:none}
.teampage .rtrack img{display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;border-radius:4px}
.teampage .rtrack p{margin:10px 0 0;font-family:var(--display);font-weight:800;font-size:1.05rem;letter-spacing:-.01em}
/* sticky Join a team: slides in once the top button has scrolled away */
.teampage .stickycta{position:fixed;left:0;right:0;bottom:0;z-index:40;padding:10px 16px calc(10px + env(safe-area-inset-bottom));background:rgba(16,16,16,.94);
  transform:translateY(110%);transition:transform .3s ease;display:flex;justify-content:center}
.teampage .stickycta.on{transform:none}
.teampage .stickycta .btn{width:100%;max-width:420px;background:var(--red);color:var(--ink-deep);padding:14px 24px}
.teampage .stickycta .btn:focus-visible{outline-color:var(--on-dark)}
.teampage .finder{background:var(--paper);scroll-margin-top:80px}
.teampage .finder-in{padding-block:clamp(44px,7vw,92px)}
.teampage .ftop{display:flex;align-items:center;justify-content:space-between;gap:16px;max-width:860px}
.teampage .ftop .tm-kicker{margin:0}
.teampage .fdots{display:flex;gap:6px}
.teampage .fdots i{width:clamp(12px,3.4vw,26px);height:4px;border-radius:2px;background:var(--tee-line);transition:background .25s ease}
.teampage .fdots i.done{background:var(--red-deep)}.teampage .fdots i.now{background:var(--ink)}
.teampage .pick{max-width:860px;margin-top:clamp(14px,2vw,22px);min-height:21rem}
.teampage .pick>*{animation:tm-qin .3s ease both}
.teampage .fnum{margin:0 0 6px;font-family:var(--display);font-weight:800;font-size:.8rem;letter-spacing:.12em;color:var(--muted)}
.teampage .fq{margin:0 0 clamp(18px,3vw,28px);font-family:var(--display);font-weight:900;font-size:clamp(2rem,6.6vw,3.6rem);line-height:1.02;letter-spacing:-.04em;text-wrap:balance}
.teampage .opts{display:grid;grid-template-columns:1fr;gap:10px}
.teampage .optb{all:unset;box-sizing:border-box;cursor:pointer;text-align:center;padding:22px 16px;border:3px solid var(--ink);border-radius:4px;
  font-family:var(--display);font-weight:900;font-size:clamp(1.1rem,3.2vw,1.35rem);letter-spacing:-.02em;line-height:1.15;transition:background .18s ease,color .18s ease,transform .15s ease}
.teampage .optb:hover{background:var(--ink);color:var(--on-dark);transform:translateY(-3px)}
.teampage .optb:focus-visible{outline:3px solid var(--red-deep);outline-offset:3px}
.teampage .fback{all:unset;cursor:pointer;margin-top:18px;color:var(--muted);font-size:.95rem;text-decoration:underline;text-underline-offset:4px}
.teampage .fback:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.teampage .match{background:var(--ink-deep);color:var(--on-dark);border-radius:6px;padding:0 clamp(20px,4vw,48px) clamp(26px,4vw,44px);margin-top:clamp(14px,2vw,22px);scroll-margin-top:84px;
  display:grid;grid-template-columns:1fr;gap:26px;overflow:hidden}
.teampage .match[hidden]{display:none}
.teampage .lany{display:flex;flex-direction:column;align-items:center;transform-origin:50% 0}
.teampage .lany.drop{animation:tm-swing 1.5s cubic-bezier(.3,.6,.3,1) both}
@keyframes tm-swing{0%{transform:translateY(-110%) rotate(0)}32%{transform:translateY(0) rotate(7deg)}52%{transform:rotate(-5deg)}70%{transform:rotate(3deg)}86%{transform:rotate(-1.5deg)}100%{transform:rotate(-2deg)}}
.teampage .lany{transform:rotate(-2deg)}
.teampage .strap{width:26px;height:clamp(70px,12vw,120px);background:var(--red);box-shadow:inset -6px 0 0 rgba(16,16,16,.18)}
.teampage .badge{position:relative;width:min(100%,290px);background:var(--paper);color:var(--ink-deep);border-radius:14px;padding:38px 18px 26px;text-align:center;box-shadow:0 22px 50px rgba(0,0,0,.5)}
.teampage .badge .hole{position:absolute;left:50%;top:12px;width:54px;height:12px;margin-left:-27px;border-radius:99px;background:var(--ink-deep)}
.teampage .bsmall{margin:0;font-family:var(--display);font-weight:800;text-transform:uppercase;letter-spacing:.18em;font-size:.68rem;color:var(--muted)}
.teampage .bhelp{margin:10px 0 14px;font-family:var(--display);font-weight:800;font-size:1.05rem;color:var(--red-deep)}
.teampage .bteam{margin:0 0 6px;line-height:.9;overflow-wrap:normal;word-break:keep-all}
.teampage .b2{color:var(--ink-deep)}
.teampage .say{min-width:0}
.teampage .say>*{animation:tm-qin .4s ease .25s both}
.teampage .mk2{margin:0 0 10px;font-family:var(--display);font-weight:800;text-transform:uppercase;letter-spacing:.14em;font-size:.76rem;color:var(--red)}
.teampage .mname{margin:0 0 14px;font-family:var(--display);font-weight:900;font-size:clamp(1.7rem,5.4vw,2.6rem);line-height:1.08;letter-spacing:-.035em;text-wrap:balance}
.teampage .mwhat{margin:0 0 22px;color:var(--on-dark-soft);max-width:46ch}
.teampage .match .btn{background:var(--red);color:var(--ink-deep)}
.teampage .match .btn:focus-visible{outline-color:var(--on-dark)}
.teampage .alts{margin:clamp(24px,4vw,36px) 0 22px;padding-top:18px;border-top:2px solid var(--dark-rule);display:grid;grid-template-columns:1fr;gap:10px}
.teampage .altlead{grid-column:1/-1;margin:0 0 2px;font-family:var(--display);font-weight:800;font-size:1rem;color:var(--on-dark-soft)}
.teampage .altc{all:unset;box-sizing:border-box;cursor:pointer;display:flex;flex-direction:column;gap:4px;border:2px solid var(--dark-rule);border-radius:10px;padding:14px 16px;transition:border-color .2s ease,transform .15s ease}
.teampage .altc:hover{border-color:var(--on-dark);transform:translateY(-2px)}
.teampage .altc:focus-visible{outline:3px solid var(--red);outline-offset:3px}
.teampage .altc b{font-family:var(--display);font-weight:900;font-stretch:62%;font-variation-settings:"wdth" 62;text-transform:uppercase;font-size:1.7rem;line-height:.95}
.teampage .altc span{font-size:.94rem;color:var(--on-dark-soft)}
.teampage .mrow{display:flex;flex-wrap:wrap;gap:14px 24px;align-items:center}
.teampage .match .seeall,.teampage .match .reset{all:unset;cursor:pointer;font-weight:700;color:var(--on-dark);text-decoration:underline;text-decoration-color:var(--red);text-decoration-thickness:2px;text-underline-offset:5px}
.teampage .match .seeall:focus-visible,.teampage .match .reset:focus-visible{outline:3px solid var(--on-dark);outline-offset:3px}
@keyframes tm-qin{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

.teampage .allteams{background:var(--ink-deep);color:var(--on-dark)}
.teampage .allteams-in{padding-block:clamp(36px,5vw,64px)}
.teampage .allteams .tm-kicker{color:var(--red)}
.teampage .allt>summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:20px}
.teampage .allt>summary::-webkit-details-marker{display:none}
.teampage .allt>summary .tee{font-size:clamp(2.6rem,9.5vw,5.2rem)}
.teampage .allt>summary::after{content:"";flex:none;width:clamp(44px,7vw,64px);height:clamp(44px,7vw,64px);border-radius:50%;background:var(--red) center/46% no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23101010' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M12 4v16M4 12h16'/%3E%3C/svg%3E");transition:transform .35s ease}
.teampage .allt[open]>summary::after{transform:rotate(45deg)}
.teampage .allt>summary:focus-visible{outline:3px solid var(--red);outline-offset:6px}
.teampage .allt[open] .allt-in{animation:tm-qin .4s ease both}
.teampage .tg{margin:clamp(26px,4vw,40px) 0 10px;font-family:var(--display);font-weight:800;text-transform:uppercase;letter-spacing:.14em;font-size:.78rem;color:var(--red)}
.teampage .tlist{list-style:none;margin:0;padding:0;border-bottom:2px solid var(--dark-rule)}
.teampage .tlist li{border-top:2px solid var(--dark-rule);padding:13px 0 16px;display:grid;grid-template-columns:1fr;gap:6px 18px;align-items:center;scroll-margin-top:90px;transition:background .3s ease}
.teampage .tlist li.hit{background:#1d1d1d;box-shadow:-20px 0 0 #1d1d1d,20px 0 0 #1d1d1d}
.teampage .tlist .tn{font-family:var(--display);font-weight:900;font-stretch:62%;font-variation-settings:"wdth" 62;text-transform:uppercase;font-size:clamp(1.7rem,5.6vw,2.5rem);line-height:.95}
.teampage .tlist p{grid-column:1;margin:0;color:var(--on-dark-soft);max-width:52ch}
.teampage .tlist a{grid-column:1;justify-self:start;margin-top:4px;font-weight:700;color:var(--on-dark);text-decoration:underline;text-decoration-color:var(--red);text-decoration-thickness:2px;text-underline-offset:5px;white-space:nowrap}
.teampage .tfaq{margin-top:clamp(32px,5vw,56px)}
.teampage .qa{border-top:2px solid var(--dark-rule)}
.teampage .qa:last-of-type{border-bottom:2px solid var(--dark-rule)}
.teampage .qa summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:18px;padding:16px 0;font-family:var(--display);font-weight:800;font-size:clamp(1.08rem,3vw,1.35rem);letter-spacing:-.02em}
.teampage .qa summary::-webkit-details-marker{display:none}
.teampage .qa summary::after{content:"+";font-weight:700;font-size:1.7rem;line-height:1;flex:none;color:var(--red)}
.teampage .qa[open] summary::after{content:"\2212"}
.teampage .qa summary:focus-visible{outline:3px solid var(--red);outline-offset:4px}
.teampage .qa .ans{padding:0 0 18px;max-width:58ch;color:var(--on-dark)}
.teampage .qa .ans p{margin:0}
.teampage .qa .steps{margin:10px 0 0;padding:0;list-style:none}
.teampage .qa .steps li{padding:8px 0;border-top:1px solid var(--dark-rule)}
.teampage .qa .steps b{font-family:var(--display);font-weight:800;color:var(--red)}

@media (min-width:900px){
  .teampage .thero-in{grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:clamp(32px,5vw,72px);align-items:stretch}
  .teampage .tcopy{order:1;align-self:center;padding-block:clamp(56px,7vw,104px)}
  .teampage .tshot{order:2;margin:0 calc((100vw - min(100vw,1160px))/-2 - 20px) 0 0;position:relative;min-height:520px}
  .teampage .tshot img{position:absolute;inset:0;height:100%;aspect-ratio:auto}
  .teampage .stickycta{left:auto;right:24px;bottom:24px;padding:0;background:none}
  .teampage .stickycta .btn{width:auto;box-shadow:0 10px 30px rgba(16,16,16,.35)}
  .teampage .alts{grid-template-columns:1fr 1fr}
  .teampage .reel-nav{display:flex}
  .teampage .rtrack{padding-inline:max(20px,calc((100vw - 1160px)/2 + 20px));scroll-padding-inline:max(20px,calc((100vw - 1160px)/2 + 20px))}
  .teampage .match{grid-template-columns:minmax(0,320px) minmax(0,1fr);gap:clamp(36px,5vw,72px);align-items:start}
  .teampage .say{padding-top:clamp(44px,6vw,80px)}
  .teampage .opts{grid-template-columns:repeat(3,1fr)}
  .teampage .optb{padding:34px 16px}
  .teampage .scene{grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:18px clamp(32px,5vw,72px)}
  .teampage .clock{grid-column:1;flex-wrap:wrap}.teampage .said{grid-column:1}.teampage .sphoto{grid-column:1;max-width:420px}
  .teampage .ct{font-size:clamp(5rem,8.4vw,8.6rem)}
  .teampage .crew{grid-column:2;grid-row:1/span 3;grid-template-columns:1fr 1fr;align-content:start;margin:0}
  .teampage .tick span{font-size:.86rem}
  .teampage .allt-in{columns:2;column-gap:clamp(36px,5vw,72px)}
  .teampage .allt-in .tg{break-after:avoid}
  .teampage .allt-in .tlist{break-inside:avoid}
  .teampage .allt-in .tg{margin-top:0;padding-top:clamp(26px,4vw,40px)}
}
@media (prefers-reduced-motion:reduce){.teampage *{transition:none!important;animation:none!important}}

/* ---------- Give (give.html) ----------
   Mantra hero over a photo, "why give here" rings beside the Subsplash form
   on desktop (stacked on phones), then the in-person option. */
.givepage{--g-dark:var(--ink-deep);--g-deep:var(--red-deep);--g-red:var(--red)}
.givepage h1,.givepage h2{text-transform:none;letter-spacing:normal;line-height:1.05;max-width:none;margin:0;text-wrap:balance}
.givepage .gv-wrap{width:100%;max-width:1160px;margin-inline:auto;padding-inline:20px}
.givepage .tee{font-family:var(--display);font-weight:900;font-stretch:62%;font-variation-settings:"wdth" 62;text-transform:uppercase;letter-spacing:-.005em;line-height:.9}
.givepage .gv-kicker{font-family:var(--display);font-weight:700;text-transform:uppercase;letter-spacing:.14em;font-size:.74rem;margin:0 0 14px}
.givepage .textlink{font-weight:700;text-decoration:underline;text-decoration-color:var(--g-red);text-decoration-thickness:2px;text-underline-offset:5px}
.givepage .sec{font-family:var(--display);font-weight:900;font-size:clamp(2rem,5.6vw,3.2rem);letter-spacing:-.035em;line-height:1;margin:0 0 10px}

/* hero */
.givepage .ghero{position:relative;background:var(--g-dark);color:#fff;overflow:hidden}
.givepage .ghero-photo{position:absolute;inset:0}
.givepage .ghero-photo img{width:100%;height:100%;object-fit:cover;object-position:46% 48%}
.givepage .ghero-photo::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(16,16,16,.92) 0%,rgba(16,16,16,.6) 45%,rgba(16,16,16,.2) 80%)}
.givepage .ghero-in{position:relative;z-index:1;padding-block:clamp(110px,18vw,220px) clamp(40px,6vw,70px)}
.givepage .ghero .gv-kicker{color:var(--g-red)}
.givepage .ghero h1{font-size:clamp(4rem,16vw,8.5rem);margin:0 0 16px;max-width:12ch}
.givepage .ghero h1 em{font-style:normal;color:var(--g-red)}
.givepage .glede{color:#fff;font-size:clamp(1.15rem,2.6vw,1.45rem);font-weight:600;margin:0 0 22px;max-width:30ch}
.givepage .gfirst{margin:0;padding:14px 16px;border-left:4px solid var(--g-red);background:#1c1c1c;color:#d6d6d6;max-width:36ch}
.givepage .gfirst b{color:#fff}

/* why give here: rings */
.givepage .gring{background:var(--g-deep);color:#fff}
.givepage .gring-in{padding-block:clamp(28px,5vw,48px)}
.givepage .gring .gv-kicker{color:#fff;opacity:.8}
.givepage .rhead{font-family:var(--display);font-weight:900;font-size:clamp(1.7rem,5vw,2.6rem);letter-spacing:-.03em;margin:0 0 24px}
.givepage .rgrid{display:grid;grid-template-columns:1fr;gap:18px}
.givepage .rc{margin:0;min-width:0;display:grid;grid-template-columns:84px 1fr;align-items:center;gap:16px}
.givepage .rsvg{position:relative;width:84px;aspect-ratio:1}
.givepage .rsvg svg{width:100%;height:100%;transform:rotate(-90deg)}
.givepage .rsvg .trk{fill:none;stroke:rgba(255,255,255,.18);stroke-width:9}
.givepage .rsvg .arc{fill:none;stroke:#fff;stroke-width:9;stroke-linecap:round;stroke-dasharray:var(--c);stroke-dashoffset:var(--f);transition:stroke-dashoffset 1.3s var(--ease)}
.givepage .gring.pre .arc{stroke-dashoffset:var(--c)}
.givepage .rsvg b{position:absolute;inset:0;display:grid;place-items:center;font-size:1.7rem;line-height:1}
.givepage .rc figcaption{max-width:34ch;font-size:1.02rem;font-weight:500;line-height:1.4}
.givepage .rc figcaption b{font-weight:800}
.givepage .rsrc{margin:22px 0 0;font-size:.7rem;color:rgba(255,255,255,.7)}

/* giving box */
.givepage .gbox{background:var(--g-dark)}
.givepage .gbox-in{padding-block:clamp(44px,7vw,80px);max-width:620px}
.givepage .gform{background:#fff;color:var(--ink);border-radius:14px;overflow:hidden;box-shadow:0 0 0 1px #2e2e2e,0 24px 60px -30px rgba(0,0,0,.8);min-width:0}
.givepage .gform iframe{display:block;width:100%;border:0;transition:height .3s ease}
.givepage .gfall{margin:0;padding:12px 16px 16px;font-size:.9rem;color:var(--muted);text-align:center;border-top:1px solid var(--line)}

/* in person */
.givepage .gperson{background:var(--g-red);color:var(--g-dark)}
.givepage .gperson-in{padding-block:clamp(44px,6vw,72px);display:grid;gap:24px;align-items:center}
.givepage .gp-img{width:100%;max-width:100%;aspect-ratio:3/2;object-fit:cover;border-radius:4px}
.givepage .gperson p{margin:0;font-size:1.1rem;max-width:44ch}

@media (min-width:760px){
  .givepage .gperson-in{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:48px}
}
@media (min-width:900px){
  .givepage .ghero-photo img{object-position:50% 46%}
  .givepage .ghero-in{padding-block:clamp(200px,24vw,320px) 64px}
}
@media (min-width:960px){
  .givepage .gsplit{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr)}
  .givepage .gsplit>section{display:flex;align-items:center}
  .givepage .gsplit .gring-in,.givepage .gsplit .gbox-in{width:100%;max-width:none;padding-block:clamp(56px,6vw,90px);padding-inline:clamp(28px,4vw,64px)}
  .givepage .gsplit .gring-in{padding-left:max(20px,calc((100vw - 1160px)/2 + 20px))}
  .givepage .gsplit .gbox-in{padding-right:max(20px,calc((100vw - 1160px)/2 + 20px))}
  .givepage .gsplit .gform{max-width:560px}
  .givepage .rc{grid-template-columns:96px 1fr}
  .givepage .rsvg{width:96px}
}
/* desktop: white stats panel with red type, crop keeps the grandpa's head in frame */
@media (min-width:960px){
  .givepage .gsplit .gring{background:#fff;color:var(--g-deep)}
  .givepage .gsplit .gring .gv-kicker{color:var(--g-deep)}
  .givepage .gsplit .rsvg .trk{stroke:color-mix(in srgb,var(--g-deep) 16%,#fff)}
  .givepage .gsplit .rsvg .arc{stroke:var(--g-deep)}
  .givepage .gsplit .rsrc{color:color-mix(in srgb,var(--g-deep) 70%,#fff)}
  .givepage .ghero-photo img{object-position:50% 22%}
}
/* desktop: split hero (copy left, whole photo right) and tighter stats/form panels */
@media (min-width:960px){
  .givepage .ghero{display:grid;grid-template-columns:minmax(0,11fr) minmax(0,9fr);min-height:min(78vh,760px)}
  .givepage .ghero-photo{position:relative;inset:auto;grid-column:2;grid-row:1}
  .givepage .ghero-photo img{position:absolute;inset:0;object-position:50% 38%}
  .givepage .ghero-photo::after{background:linear-gradient(to right,var(--g-dark) 0%,rgba(16,16,16,0) 18%)}
  .givepage .ghero-in{grid-column:1;grid-row:1;align-self:center;width:100%;max-width:none;margin:0;
    padding-block:72px;padding-left:max(20px,calc((100vw - 1160px)/2 + 20px));padding-right:48px}
  .givepage .ghero h1{font-size:clamp(4rem,7vw,6.6rem)}

  .givepage .gsplit{grid-template-columns:1fr 1fr}
  .givepage .gsplit>.gring{justify-content:flex-end}
  .givepage .gsplit>.gbox{justify-content:flex-start}
  .givepage .gsplit .gring-in,.givepage .gsplit .gbox-in{width:100%;max-width:560px;margin:0;padding:56px 48px}
}
/* desktop: one side gutter for every Give section, much narrower than the 1160 column */
@media (min-width:960px){
  .givepage{--gx:clamp(28px,5vw,88px)}
  .givepage .gv-wrap{max-width:none;padding-inline:var(--gx)}
  .givepage .ghero-in{padding-left:var(--gx);padding-right:56px}
  .givepage .gsplit .gring-in,.givepage .gsplit .gbox-in{max-width:none;padding-block:64px}
  .givepage .gsplit .gring-in{padding-left:var(--gx);padding-right:clamp(28px,3.5vw,56px)}
  .givepage .gsplit .gbox-in{padding-left:clamp(28px,3.5vw,56px);padding-right:var(--gx)}
  .givepage .gsplit .gform{max-width:none}
  .givepage .gsplit .rc figcaption{max-width:44ch}
}
@media (prefers-reduced-motion:reduce){.givepage *{transition:none!important}}

/* ---------- Prayer (prayer.html) ----------
   Layout: short hero, the wall as a card grid, the request form at the end.
   Moderator view adds a review queue above the wall. */
.praypage{--p-dark:var(--ink-deep);--p-red:var(--red);--p-deep:var(--red-deep);--p-paper:#f6f4f1;--p-dim:#5f5a56}
.praypage h1,.praypage h2{text-transform:none;letter-spacing:normal;margin:0;max-width:none;text-wrap:balance}
.praypage .p-wrap{width:100%;max-width:1240px;margin-inline:auto;padding-inline:clamp(20px,5vw,88px)}
.praypage .tee{font-family:var(--display);font-weight:900;font-stretch:62%;font-variation-settings:"wdth" 62;text-transform:uppercase;letter-spacing:-.005em;line-height:.9}
.praypage .p-kicker{font-family:var(--display);font-weight:700;text-transform:uppercase;letter-spacing:.14em;font-size:.74rem;color:var(--p-red);margin:0 0 14px}
.praypage .psec{font-family:var(--display);font-weight:900;font-size:clamp(1.8rem,4.6vw,2.8rem);letter-spacing:-.035em;line-height:1}
.praypage .pnote{color:var(--p-dim);margin:8px 0 20px;max-width:52ch}
.praypage .pbtn{display:inline-block;background:var(--p-deep);color:#fff;font-family:var(--display);font-weight:700;font-size:1.02rem;padding:15px 28px;border:0;border-radius:999px;cursor:pointer;transition:transform .2s}
.praypage .pbtn:hover{transform:translateY(-2px)}
.praypage .pbtn:focus-visible,.praypage button:focus-visible,.praypage input:focus-visible,.praypage textarea:focus-visible{outline:3px solid var(--p-red);outline-offset:2px}


.praypage .phero{background:var(--p-dark);color:#fff}
.praypage .phero-in{padding-block:clamp(56px,9vw,110px)}
.praypage .phero h1{font-size:clamp(3.4rem,11vw,7rem);max-width:13ch;margin:0 0 18px}
.praypage .phero h1 em{font-style:normal;color:var(--p-red)}
.praypage .plede{font-size:clamp(1.1rem,2.4vw,1.35rem);max-width:40ch;margin:0 0 26px;color:#e4e4e4}

.praypage .pwall{background:var(--p-paper)}
.praypage .pwall>.p-wrap{padding-block:clamp(48px,7vw,88px)}
.praypage .pwall-head{display:flex;flex-wrap:wrap;gap:14px;align-items:end;justify-content:space-between;margin-bottom:24px}
.praypage .ptabs{display:flex;gap:6px}
.praypage .ptabs button{border:2px solid var(--ink);background:transparent;border-radius:99px;padding:8px 16px;font-weight:700;cursor:pointer}
.praypage .ptabs button[aria-selected="true"]{background:var(--ink);color:#fff}
.praypage .pgrid{display:grid;grid-template-columns:1fr;gap:14px}
.praypage .pcard{background:#fff;border-radius:14px;padding:20px 20px 16px;display:flex;flex-direction:column;gap:12px;box-shadow:0 1px 0 rgba(0,0,0,.06);min-width:0}
.praypage .pcard.ans{background:var(--p-dark);color:#fff}
.praypage .pc-top{display:flex;justify-content:space-between;gap:10px;align-items:baseline;font-size:.85rem}
.praypage .pc-top b{font-size:1rem}
.praypage .pc-top time{color:var(--p-dim)}
.praypage .pcard.ans .pc-top time{color:#aaa}
.praypage .pc-text{margin:0;font-size:1.05rem;line-height:1.5;overflow-wrap:anywhere}
.praypage .pc-badge{align-self:flex-start;font-family:var(--display);font-weight:900;font-stretch:62%;font-variation-settings:"wdth" 62;text-transform:uppercase;letter-spacing:.06em;font-size:.9rem;color:var(--p-red);border:2px solid var(--p-red);padding:1px 9px;border-radius:4px}
.praypage .pc-foot{display:flex;flex-wrap:wrap;gap:8px;align-items:center;justify-content:space-between;margin-top:auto}
.praypage .pray{display:inline-flex;align-items:center;gap:8px;border:2px solid var(--line);background:#fff;color:var(--ink);border-radius:99px;padding:8px 14px 8px 12px;font-weight:700;cursor:pointer;min-height:44px;transition:transform .15s,border-color .2s,background .2s}
.praypage .pray .hands{font-size:1.15rem;line-height:1}
.praypage .pray[aria-pressed="true"]{border-color:var(--p-deep);background:var(--p-deep);color:#fff}
.praypage .pray.pop{transform:scale(1.08)}
.praypage .pcard.ans .pray{background:transparent;color:#fff;border-color:#444}
.praypage .pcard.ans .pray[aria-pressed="true"]{background:var(--p-deep);border-color:var(--p-deep)}
.praypage .mbtn{border:2px solid var(--ink);background:transparent;border-radius:99px;padding:8px 14px;font-weight:700;cursor:pointer;font-size:.88rem;min-height:40px}
.praypage .pcard.ans .mbtn{border-color:#fff;color:#fff}
.praypage .mbtn.go{background:var(--ink);color:#fff}
.praypage .pempty{color:var(--p-dim)}

.praypage .pmod{background:#fff;border-bottom:4px solid #fff3c4}
.praypage .pmod>.p-wrap{padding-block:40px}
.praypage .pmod-head{display:flex;align-items:center;gap:12px;margin-top:10px}
.praypage .pcount{background:var(--p-deep);color:#fff;border-radius:99px;min-width:30px;padding:2px 10px;text-align:center;font-weight:700}
.praypage .plist{display:grid;gap:10px;margin-bottom:34px}
.praypage .plist .pcard{border:2px solid var(--line);box-shadow:none}
.praypage .plist .pc-email{font-size:.85rem;color:var(--p-dim)}

.praypage .pask{background:#fff}
.praypage .pask-in{display:grid;gap:24px;padding-block:clamp(48px,7vw,88px)}
.praypage .pform{display:grid;gap:8px;max-width:620px}
.praypage .pform label{font-weight:700;font-size:.92rem;margin-top:8px}
.praypage .pform label span{font-weight:400;color:var(--p-dim)}
.praypage .pform input[type=text],.praypage .pform input[type=email],.praypage .pform textarea{width:100%;border:2px solid var(--line);border-radius:12px;padding:13px 14px;font-size:1rem;background:#fff}
.praypage .pform textarea{resize:vertical;min-height:130px}
.praypage .pmeta{font-size:.8rem;color:var(--p-dim);text-align:right}
.praypage .pcheck{display:flex;gap:10px;align-items:center;font-weight:600!important}
.praypage .pcheck input{width:20px;height:20px;accent-color:var(--p-deep)}
.praypage .pform .pbtn{justify-self:start;margin-top:12px}
.praypage .pstatus{margin:6px 0 0;font-weight:600;min-height:1.5em}
.praypage .pstatus.err{color:var(--p-deep)}

@media (min-width:720px){.praypage .pgrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1080px){.praypage .pgrid{grid-template-columns:repeat(3,minmax(0,1fr))}.praypage .pask-in{grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);gap:56px}}
.praypage .phero{position:relative;overflow:hidden}
.praypage .phero-photo{position:absolute;inset:0}
.praypage .phero-photo img{width:100%;height:100%;object-fit:cover;object-position:50% 30%}
.praypage .phero-photo::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(16,16,16,.94) 0%,rgba(16,16,16,.65) 45%,rgba(16,16,16,.15) 85%)}
.praypage .phero-in{position:relative;z-index:1;padding-top:clamp(240px,60vw,360px)}
@media (min-width:960px){
  .praypage .phero{display:grid;grid-template-columns:minmax(0,11fr) minmax(0,9fr);min-height:min(78vh,720px)}
  .praypage .phero-photo{position:relative;grid-column:2;grid-row:1}
  .praypage .phero-photo img{position:absolute;inset:0;object-position:50% 35%}
  .praypage .phero-photo::after{background:linear-gradient(to right,var(--p-dark) 0%,rgba(16,16,16,0) 20%)}
  .praypage .phero-in{grid-column:1;grid-row:1;align-self:center;max-width:none;margin:0;padding-block:72px;padding-right:56px}
  .praypage .phero h1{font-size:clamp(3.6rem,7vw,6.4rem)}
}
/* hug photo beside the form */
.praypage .pask-img{display:block;width:100%;max-width:100%;aspect-ratio:4/5;object-fit:cover;object-position:50% 0%;border-radius:6px}
@media (min-width:1080px){
  .praypage .pask-in{grid-template-areas:"copy form" "img form";grid-template-rows:auto 1fr;align-items:start}
  .praypage .pask-in>div{grid-area:copy}
  .praypage .pask-in>.pform{grid-area:form}
  .praypage .pask-in>.pask-img{grid-area:img;max-width:420px}
}
@media (max-width:1079px){.praypage .pask-img{order:3;aspect-ratio:4/3;object-position:50% 0%}}
/* hug photo runs to the edges and the bottom of the section */
.praypage .pask-in{--gut:clamp(20px,5vw,88px);--pb:clamp(48px,7vw,88px)}
.praypage .pask-img{border-radius:0;width:calc(100% + 2*var(--gut));max-width:none;margin:0 calc(-1*var(--gut)) calc(-1*var(--pb))}
@media (min-width:1080px){
  .praypage .pask-in{--edge:calc(var(--gut) + max(0px,(100vw - 1240px)/2))}
  .praypage .pask-in>.pask-img{max-width:none;width:calc(100% + var(--edge));margin:0 0 calc(-1*var(--pb)) calc(-1*var(--edge));align-self:end}
}
/* desktop: smaller hug photo, inside the column */
@media (min-width:1080px){
  .praypage .pask-in>.pask-img{width:100%;max-width:520px;aspect-ratio:1/1;margin:0;align-self:start;border-radius:6px}
}
@media (prefers-reduced-motion:reduce){.praypage *{transition:none!important}}


/* prayer team page */
.praypage .tlogin{max-width:420px;display:grid;gap:10px}
.praypage .tlogin input{width:100%;border:2px solid var(--line);border-radius:12px;padding:13px 14px;font-size:1rem}
.praypage .tbar{display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between;margin-bottom:10px}
.praypage .tlink{background:none;border:0;padding:0;font-weight:700;text-decoration:underline;text-decoration-color:var(--p-red);text-decoration-thickness:2px;text-underline-offset:5px;cursor:pointer}
.praypage .pcard .pc-email a{color:inherit;font-weight:700}

/* ---------- Footer matches the menu: I'm New, About, Next Steps, then Sunday ---------- */
.footer .footer-main{grid-template-columns:minmax(0,1.6fr) repeat(4,minmax(0,1fr));gap:40px}
@media (max-width:900px){
  .footer .footer-main{grid-template-columns:1fr 1fr;gap:30px 24px}
  .footer .footer-main>:first-child{grid-column:1/-1}
  .footer .footer-main>:last-child{grid-column:auto}
}
@media (max-width:600px){
  .footer-bottom span{display:block}
  .footer-bottom span+span{margin-top:4px}
}

/* ---------- Contact (contact.html): borrows the prayer page's form and type ---------- */
.contactpage .chero .phero-photo img{object-position:56% 30%}
@media (min-width:960px){.contactpage .chero{grid-template-columns:minmax(0,2fr) minmax(0,3fr);min-height:520px}.contactpage .chero .phero-photo img{object-position:50% 40%}.contactpage .chero .phero-photo::after{background:linear-gradient(to right,var(--p-dark) 0%,rgba(16,16,16,0) 12%)}}
.contactpage .cdirect{margin:0;font-size:1.1rem;line-height:2}
.contactpage .textlink{font-weight:700;text-decoration:underline;text-decoration-color:var(--p-red);text-decoration-thickness:2px;text-underline-offset:5px}
.praypage .pform input[type=tel]{width:100%;border:2px solid var(--line);border-radius:12px;padding:13px 14px;font-size:1rem;background:#fff}
.contactpage .pask .p-wrap{padding-block:clamp(48px,7vw,88px)}
.contactpage .pnote.cor{margin-top:36px}

/* prayer page: no photo now, so Ask for prayer is one centered column on desktop */
@media (min-width:1080px){
  .praypage .pask-in{grid-template-columns:1fr;grid-template-areas:none;grid-template-rows:auto;max-width:720px;gap:8px}
  .praypage .pask-in>div,.praypage .pask-in>.pform{grid-area:auto}
  .praypage .pask-in .pform{max-width:none}
}

/* ---------- Homepage proof: Mari's story ---------- */
.home .proof{background:var(--band);padding-block:clamp(56px,10vw,104px)}
.home .proof-in{width:100%;max-width:1200px;margin-inline:auto;padding-inline:20px;display:grid;gap:clamp(24px,4vw,56px);align-items:center}
.home .proof .eyebrow{color:var(--red-deep);margin-bottom:12px}
.home .proof h2{font-family:var(--display);font-weight:900;font-size:clamp(2.1rem,7vw,3.6rem);line-height:.95;letter-spacing:-.035em;margin:0 0 12px;text-wrap:balance}
.home .proof-sub{margin:0;color:var(--muted);font-size:clamp(1.05rem,2.4vw,1.2rem)}
.home .yt,.home .yt-frame{position:relative;display:block;width:100%;max-width:100%;aspect-ratio:16/9;border:0;padding:0;border-radius:4px;overflow:hidden;background:var(--ink-deep)}
.home .yt{cursor:pointer}
.home .yt img{width:100%;height:100%;object-fit:cover;transition:transform .4s ease}
.home .yt:hover img{transform:scale(1.03)}
.home .yt-play{position:absolute;left:50%;top:50%;width:76px;height:76px;margin:-38px 0 0 -38px;border-radius:50%;background:var(--red-deep);box-shadow:0 10px 30px rgba(0,0,0,.35)}
.home .yt-play::before{content:"";position:absolute;left:31px;top:24px;border-style:solid;border-width:14px 0 14px 22px;border-color:transparent transparent transparent #fff}
.home .yt:focus-visible{outline:3px solid var(--red-deep);outline-offset:3px}
@media (min-width:860px){.home .proof-in{grid-template-columns:minmax(0,4fr) minmax(0,7fr)}}
@media (prefers-reduced-motion:reduce){.home .yt img{transition:none}}

/* ---------- Plan a Visit: Mari's story ---------- */
.visit .vproof{padding-block:clamp(30px,4vw,44px);border-top:1px solid var(--line)}
.visit .vproof .kick{font-family:var(--display);font-weight:700;text-transform:uppercase;letter-spacing:.14em;font-size:.72rem;color:var(--red-deep);margin:0 0 10px}
.visit .vproof h2{font-family:var(--display);font-weight:800;font-size:clamp(1.5rem,4.4vw,2.05rem);line-height:1.08;letter-spacing:-.025em;margin:0 0 18px}
.visit .yt,.visit .yt-frame{position:relative;display:block;width:100%;max-width:100%;aspect-ratio:16/9;border:0;padding:0;border-radius:2px;overflow:hidden;background:var(--ink-deep)}
.visit .yt{cursor:pointer}
.visit .yt img{width:100%;height:100%;object-fit:cover}
.visit .yt-play{position:absolute;left:50%;top:50%;width:68px;height:68px;margin:-34px 0 0 -34px;border-radius:50%;background:var(--red-deep);box-shadow:0 10px 30px rgba(0,0,0,.35)}
.visit .yt-play::before{content:"";position:absolute;left:27px;top:21px;border-style:solid;border-width:13px 0 13px 20px;border-color:transparent transparent transparent #fff}
.visit .yt:focus-visible{outline:3px solid var(--red-deep);outline-offset:3px}

/* Plan a Visit: the site-wide ".faq div{display:none}" was hiding every answer */
.visit .faq details .a{display:none}
.visit .faq details[open] .a{display:block}
/* What We Believe: keep the numbered belief buttons inside the wheel so they
   never float above the phone menu */
.beliefpage .wheel{isolation:isolate;z-index:0}

/* Join a Team, phone: arrows sit right under the timeline, above the scene,
   so you can step through Sunday without scrolling down to find them */
@media (max-width:899px){
  .teampage .sunday-in{display:flex;flex-direction:column}
  .teampage .sunday-in>.snav{order:1;margin:0 0 22px}
  .teampage .sunday-in>.scene{order:2}
  .teampage .snav .shint{display:none}
}