/* =========================================================
   WARRIOR MEN INTERNATIONAL
   The front door.

   A man who has never heard of this lands here. He should
   understand, in about eight seconds, what it is for and
   whether it is for him.

   The hero is the spear. The creed carries the rhythm. The
   pathway shows him the whole road before he steps onto it.
   ========================================================= */


/* ---------------------------------------------------------
   TOP BAR
   Thin. Gets out of the way.
   --------------------------------------------------------- */
.bar {
  position: sticky;
  top: 0;
  z-index: 80;
  background: rgba(18, 22, 28, 0.86);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--mid) var(--ease),
              background var(--mid) var(--ease);
}
.bar[data-scrolled="true"] {
  border-bottom-color: var(--line);
  background: rgba(18, 22, 28, 0.95);
}

.bar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  height: 68px;
}

.bar__logo {
  display: flex;
  align-items: center;
  gap: var(--s-3);
}
.bar__logo img {
  width: 34px;
  height: 34px;
  object-fit: contain;
}
.bar__logo-text {
  font-family: var(--display);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--stone-100);
  line-height: 1.35;
}
.bar__logo-text span {
  display: block;
  font-size: 0.625rem;
  letter-spacing: 0.18em;
  color: var(--stone-600);
}

.bar__nav {
  display: flex;
  align-items: center;
  gap: var(--s-5);
}
.bar__link {
  font-size: var(--step--1);
  font-weight: 600;
  color: var(--stone-400);
  transition: color var(--fast) var(--ease);
}
.bar__link:hover { color: var(--stone-100); }


/* ---------------------------------------------------------
   HERO
   The spear is the thesis.
   --------------------------------------------------------- */
.hero {
  position: relative;
  overflow: hidden;
  padding-block: var(--s-9) var(--s-8);
  background: var(--navy-900);
}

/* Forged texture, the same faint diagonals as the gate. */
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(
    -45deg,
    transparent 0px, transparent 3px,
    rgba(200, 135, 63, 0.018) 3px,
    rgba(200, 135, 63, 0.018) 4px
  );
  pointer-events: none;
}

/* The forge, banked low and left. */
.hero::after {
  content: '';
  position: absolute;
  left: -18%;
  bottom: -34%;
  width: 74%;
  aspect-ratio: 1;
  background: radial-gradient(
    circle,
    rgba(200, 135, 63, 0.11) 0%,
    transparent 60%
  );
  pointer-events: none;
}

.hero__grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr 0.85fr;
  align-items: center;
  gap: var(--s-8);
}

.hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  margin-bottom: var(--s-5);
}
.hero__eyebrow::before {
  content: '';
  width: 28px;
  height: 1px;
  background: var(--bronze);
}
.hero__eyebrow span {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--bronze);
}

/* The creed. Every second line drops to bronze. */
.hero__creed {
  font-family: var(--display);
  font-weight: 700;
  text-transform: uppercase;
  font-size: clamp(2.5rem, 5.2vw, 4.25rem);
  line-height: 0.96;
  letter-spacing: 0.005em;
  color: var(--stone-100);
  margin-bottom: var(--s-6);
}
.hero__creed span { display: block; }
.hero__creed span:nth-child(even) { color: var(--bronze); }

.hero__lede {
  max-width: 46ch;
  font-size: var(--step-1);
  line-height: 1.75;
  color: var(--stone-400);
  margin-bottom: var(--s-7);
}
.hero__lede strong { color: var(--stone-200); font-weight: 600; }

.hero__cta {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  flex-wrap: wrap;
}

.hero__note {
  margin-top: var(--s-5);
  font-size: var(--step--1);
  color: var(--stone-600);
}

/* The spear, right. */
.hero__mark {
  display: grid;
  place-items: center;
}
.hero__mark img {
  width: 100%;
  max-width: 380px;
  filter: drop-shadow(0 24px 60px rgba(0, 0, 0, 0.5));
  animation: settle 900ms var(--ease) both;
}

@keyframes settle {
  from { opacity: 0; transform: translateY(16px) scale(0.97); }
  to   { opacity: 1; transform: none; }
}


/* ---------------------------------------------------------
   THE CHARGE
   One sentence, alone, on the line between the hero and the
   rest of the page. This is the thing the ministry actually
   believes, so it gets its own room.
   --------------------------------------------------------- */
.charge {
  border-block: 1px solid var(--line);
  background: var(--navy-850);
  padding-block: var(--s-8);
}

.charge__text {
  max-width: 46ch;
  margin-inline: auto;
  text-align: center;
  font-family: var(--display);
  font-size: clamp(1.375rem, 2.6vw, 1.875rem);
  font-weight: 500;
  line-height: 1.35;
  color: var(--stone-200);
}
.charge__text b {
  color: var(--bronze);
  font-weight: 600;
}

.charge__sub {
  max-width: 52ch;
  margin: var(--s-5) auto 0;
  text-align: center;
  font-size: var(--step-0);
  line-height: 1.75;
  color: var(--stone-500);
}


/* ---------------------------------------------------------
   THE PATHWAY
   Horizontal here, so a man sees the whole road at once.
   Same forged diamond nodes as the app itself.
   --------------------------------------------------------- */
.path {
  padding-block: var(--s-9);
}

.path__head {
  max-width: 44ch;
  margin-bottom: var(--s-8);
}
.path__title {
  font-family: var(--display);
  font-size: clamp(1.875rem, 3.4vw, 2.75rem);
  font-weight: 700;
  text-transform: uppercase;
  line-height: 1.05;
  color: var(--stone-100);
  margin: var(--s-4) 0 var(--s-4);
}
.path__lede {
  font-size: var(--step-1);
  line-height: 1.75;
  color: var(--stone-400);
}

.path__rail {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--s-5);
}

/* The rule that runs behind the nodes. */
.path__rail::before {
  content: '';
  position: absolute;
  top: 15px;
  left: 15px;
  right: 15px;
  height: 2px;
  background: linear-gradient(
    90deg,
    var(--bronze) 0%,
    var(--bronze-deep) 30%,
    var(--line-bright) 70%,
    var(--line-bright) 100%
  );
  border-radius: 1px;
}

.stage {
  position: relative;
  padding-top: var(--s-7);
}

.stage__node {
  position: absolute;
  top: 0;
  left: 2px;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: var(--r-sm);
  background: var(--navy-800);
  border: 1.5px solid var(--line-bright);
  transform: rotate(45deg);
  z-index: 1;
  transition: all var(--mid) var(--ease);
}
.stage__node span {
  transform: rotate(-45deg);
  font-family: var(--display);
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--stone-500);
}

/* The first stage is where every man starts, so it is struck. */
.stage:first-child .stage__node {
  background: var(--bronze);
  border-color: var(--bronze);
  box-shadow: 0 0 0 5px var(--bronze-ash);
}
.stage:first-child .stage__node span { color: var(--navy-900); }

.stage__name {
  font-family: var(--display);
  font-size: var(--step-2);
  font-weight: 600;
  color: var(--stone-100);
  margin-bottom: var(--s-2);
}

.stage__what {
  font-size: var(--step--1);
  line-height: 1.65;
  color: var(--stone-500);
}


/* ---------------------------------------------------------
   THE PILLARS
   Ten. A quiet grid. The point is the breadth: this is not
   a devotional app, it is the whole of a man's life.
   --------------------------------------------------------- */
.pillars {
  padding-block: var(--s-9);
  border-top: 1px solid var(--line);
  background: var(--navy-800);
}

.pillars__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--s-6);
  flex-wrap: wrap;
  margin-bottom: var(--s-7);
}

.pillars__title {
  font-family: var(--display);
  font-size: clamp(1.875rem, 3.4vw, 2.75rem);
  font-weight: 700;
  text-transform: uppercase;
  line-height: 1.05;
  color: var(--stone-100);
  margin-top: var(--s-4);
}

.pillars__note {
  max-width: 34ch;
  font-size: var(--step--1);
  line-height: 1.7;
  color: var(--stone-500);
}

.pillars__grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
}

.pillar {
  background: var(--navy-700);
  padding: var(--s-5);
  transition: background var(--fast) var(--ease);
}
.pillar:hover { background: var(--navy-600); }

.pillar__num {
  font-family: var(--display);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--bronze);
  margin-bottom: var(--s-3);
}

.pillar__name {
  font-family: var(--body);
  font-size: var(--step-0);
  font-weight: 700;
  color: var(--stone-100);
  line-height: 1.35;
  margin-bottom: var(--s-2);
}

.pillar__line {
  font-size: var(--step--1);
  line-height: 1.6;
  color: var(--stone-500);
}


/* ---------------------------------------------------------
   WHAT IS INSIDE
   Three plain claims. No feature-grid theatre.
   --------------------------------------------------------- */
.inside {
  padding-block: var(--s-9);
}

.inside__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-7);
}

.thing {
  padding-left: var(--s-5);
  border-left: 2px solid var(--line-bright);
}
.thing:first-child { border-left-color: var(--bronze); }

.thing__title {
  font-family: var(--display);
  font-size: var(--step-2);
  font-weight: 600;
  color: var(--stone-100);
  margin-bottom: var(--s-3);
}

.thing__body {
  font-size: var(--step-0);
  line-height: 1.75;
  color: var(--stone-400);
}


/* ---------------------------------------------------------
   THE ASK
   The whole page has been walking toward this.
   --------------------------------------------------------- */
.ask {
  position: relative;
  overflow: hidden;
  padding-block: var(--s-9);
  border-top: 1px solid var(--line);
  background: var(--navy-900);
  text-align: center;
}

.ask::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -60%;
  transform: translateX(-50%);
  width: 70%;
  aspect-ratio: 1;
  background: radial-gradient(
    circle,
    rgba(200, 135, 63, 0.10) 0%,
    transparent 58%
  );
  pointer-events: none;
}

.ask__inner {
  position: relative;
  z-index: 1;
  max-width: 40ch;
  margin-inline: auto;
}

.ask__title {
  font-family: var(--display);
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 700;
  text-transform: uppercase;
  line-height: 1.05;
  color: var(--stone-100);
  margin: var(--s-4) 0 var(--s-5);
}

.ask__body {
  font-size: var(--step-1);
  line-height: 1.75;
  color: var(--stone-400);
  margin-bottom: var(--s-7);
}

.ask__cta {
  display: flex;
  justify-content: center;
  gap: var(--s-4);
  flex-wrap: wrap;
}

.ask__note {
  margin-top: var(--s-5);
  font-size: var(--step--1);
  color: var(--stone-600);
}


/* ---------------------------------------------------------
   FOOT
   --------------------------------------------------------- */
.foot {
  padding-block: var(--s-7);
  border-top: 1px solid var(--line);
  background: var(--navy-850);
}

.foot__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-5);
  flex-wrap: wrap;
}

.foot__brand {
  display: flex;
  align-items: center;
  gap: var(--s-4);
}
.foot__brand img { width: 40px; height: 40px; object-fit: contain; }

.foot__name {
  font-family: var(--display);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--stone-300);
  line-height: 1.5;
}
.foot__name span {
  display: block;
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
  color: var(--stone-600);
}

.foot__links {
  display: flex;
  gap: var(--s-5);
  flex-wrap: wrap;
}
.foot__links a {
  font-size: var(--step--1);
  color: var(--stone-500);
}
.foot__links a:hover { color: var(--bronze); }

.foot__legal {
  width: 100%;
  padding-top: var(--s-5);
  margin-top: var(--s-5);
  border-top: 1px solid var(--line-soft);
  font-size: 0.75rem;
  line-height: 1.7;
  color: var(--stone-600);
}


/* ---------------------------------------------------------
   RESPONSIVE
   --------------------------------------------------------- */
@media (max-width: 1040px) {
  .pillars__grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 900px) {
  .hero__grid {
    grid-template-columns: 1fr;
    gap: var(--s-7);
  }

  /* The spear leads on a phone. It is the strongest thing here. */
  .hero__mark { order: -1; }
  .hero__mark img { max-width: 240px; }

  .path__rail {
    grid-template-columns: 1fr;
    gap: 0;
    padding-left: 44px;
  }

  /* The rule turns vertical. */
  .path__rail::before {
    top: 10px;
    bottom: 10px;
    left: 15px;
    right: auto;
    width: 2px;
    height: auto;
    background: linear-gradient(
      180deg,
      var(--bronze) 0%,
      var(--bronze-deep) 26%,
      var(--line-bright) 62%,
      var(--line-bright) 100%
    );
  }

  .stage {
    padding-top: 0;
    padding-bottom: var(--s-6);
  }
  .stage:last-child { padding-bottom: 0; }

  .stage__node {
    left: -44px;
    top: 2px;
  }

  .inside__grid { grid-template-columns: 1fr; gap: var(--s-6); }
}

@media (max-width: 680px) {
  .bar__nav .bar__link { display: none; }

  .pillars__grid { grid-template-columns: repeat(2, 1fr); }

  .hero { padding-block: var(--s-7) var(--s-8); }
  .path, .pillars, .inside, .ask { padding-block: var(--s-8); }

  .hero__cta .btn,
  .ask__cta .btn { width: 100%; }

  .foot__inner { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 420px) {
  .pillars__grid { grid-template-columns: 1fr; }
}