/* ═══ ABOUT RĀNGAI, rangai.nz (Oct 2026): the agreed mission framework ════════════════
   templates/rangai-about.php. The site's own look: the dark green, cream type, the
   condensed capitals and the home page's buttons (.hire-wide-btn from main.css).
   functions.php enqueues this on /about while the visitor is on rangai.nz.

   One type scale (Oct 2026, from three design reviews): at 1440 wide the levels run
   96 hero, 64 mission, 48 section titles, 32 How we work, 25.6 cards, 22 lead,
   16 body. The hero is the home page's own title sizes, the section titles
   the home page's, and the display face is set one way throughout (-0.01em).
   ═══════════════════════════════════════════════════════════════════════════════ */

.ra-wrap { max-width: var(--container-max); margin-inline: auto; padding-inline: var(--container-pad); }
.ra-section { padding-block: clamp(2.5rem, 6vw, 4.5rem); } /* the home page's section rhythm */
.ra-kicker {
  margin: 0 0 1rem; font-family: var(--font-sans); font-size: 0.875rem; font-weight: 700; line-height: 1.6;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-yellow);
}
.ra-title {
  margin: 0 0 1.75rem; font-family: var(--font-display); font-weight: 800; text-transform: uppercase;
  line-height: 0.9; letter-spacing: -0.01em; font-size: clamp(1.9rem, 4.5vw, 3rem);
}
.ra-text { max-width: 56ch; margin: 0; font-size: 1rem; line-height: 1.6; color: rgba(255, 251, 238, 0.88); }
.ra-lead { max-width: 52ch; margin: 1.5rem 0 0; font-size: clamp(1.125rem, 0.9rem + 0.7vw, 1.375rem); line-height: 1.5; }

/* Hero: the bush canopy from above under the green, the title in the site's display face. Fills
   the screen below the 68px header and its hairline, as the home page's does, so no sliver of the next
   title shows at the fold. */
.ra-hero {
  position: relative; overflow: hidden; display: flex; align-items: flex-end; background: var(--color-deep);
  min-height: calc(100vh - 69px);  /* fallback for browsers without svh */
  min-height: calc(100svh - 69px);
}
.ra-hero__img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center;
  filter: grayscale(0.35);
}
.ra-hero::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(to top,
    var(--color-deep) 0%,
    color-mix(in srgb, var(--color-deep) 75%, transparent) 45%,
    color-mix(in srgb, var(--color-deep) 35%, transparent) 100%);
}
.ra-hero__inner { position: relative; z-index: 1; width: 100%; padding-block: clamp(4rem, 12vh, 7rem) clamp(2.5rem, 6vw, 4rem); }
.ra-hero__title {
  margin: 0; font-family: var(--font-display); font-weight: 800; text-transform: uppercase;
  line-height: 0.9; letter-spacing: -0.01em; font-size: clamp(2.75rem, 8vw, 6rem);
}

/* Mission: the statement, then why it matters. Stacked on phones and tablets; from 1024px side by side, the
   why sitting level with the statement's last line, so the right half is not empty. */
.ra-statement {
  margin: 0 0 2rem; max-width: 22ch; font-family: var(--font-display); font-weight: 800; text-transform: uppercase;
  line-height: 0.92; letter-spacing: -0.01em; font-size: clamp(2.5rem, 5vw, 4rem); color: var(--color-text);
}
@media (min-width: 1024px) {
  .ra-mission {
    display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    column-gap: clamp(2.5rem, 5vw, 5rem); align-items: end;
  }
  .ra-statement { margin-bottom: 0; }
  .ra-mission__body .ra-text { font-size: clamp(1.05rem, 0.9rem + 0.4vw, 1.25rem); line-height: 1.55; }
}

/* The five foundations. Each card shares its three rows (icon, name, line) with the cards beside it, so a
   name that wraps (Self-sustainability) does not push its line below the others. */
.ra-pillars { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; }
.ra-pillar {
  display: grid; grid-row: span 3; grid-template-rows: subgrid; row-gap: 0;
  padding: 1.5rem 1.25rem 1.6rem; border: 1px solid var(--color-border); border-radius: 14px;
  background: color-mix(in srgb, var(--color-text) 3%, transparent);
}
.ra-pillar__icon {
  width: 36px; height: 36px; fill: none; stroke: var(--color-yellow); stroke-width: 1.6;
  stroke-linecap: round; stroke-linejoin: round;
}
.ra-pillar__name {
  margin: 1.1rem 0 0.6rem; font-family: var(--font-display); font-weight: 800; text-transform: uppercase;
  line-height: 1; letter-spacing: -0.01em; font-size: clamp(1.25rem, 2vw, 1.6rem);
}
.ra-pillar__line { margin: 0; font-size: 0.95rem; line-height: 1.55; color: rgba(255, 251, 238, 0.85); }

/* How we work: three columns on gold hairlines, their links lined up along the bottom */
.ra-how { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.5rem, 3vw, 2.5rem); }
.ra-how__item {
  display: flex; flex-direction: column; align-items: flex-start;
  border-top: 2px solid var(--color-yellow); padding-top: 1.25rem;
}
.ra-how__item h3 {
  margin: 0 0 0.75rem; font-family: var(--font-display); font-weight: 800; text-transform: uppercase;
  line-height: 1; letter-spacing: -0.01em; font-size: clamp(1.5rem, 2.4vw, 2rem);
}
.ra-how__item p { max-width: 56ch; margin: 0 0 0.75rem; line-height: 1.6; color: rgba(255, 251, 238, 0.88); }
.ra-how__item .ra-link { margin-top: auto; }
.ra-link { display: inline-flex; align-items: center; gap: 0.5rem; min-height: 44px; color: var(--color-yellow); font-weight: 700; text-decoration: none; }
.ra-link:hover, .ra-link:focus-visible { text-decoration: underline; text-underline-offset: 0.3em; }

/* Close: one wide button, as the home page's Get in Touch */
.ra-close .hire-wide-btn { margin-top: 2rem; }

/* 769 to 1100px: three cards then two wider ones, so the second row has no empty slot */
@media (min-width: 769px) and (max-width: 1100px) {
  .ra-pillars { grid-template-columns: repeat(6, 1fr); }
  .ra-pillar { grid-column: span 2; }
  .ra-pillar:nth-last-child(-n+2) { grid-column: span 3; }
}
@media (max-width: 768px) {
  .ra-pillars { grid-template-columns: 1fr 1fr; gap: 10px; }
  .ra-pillar:last-child { grid-column: span 2; }
  .ra-how { grid-template-columns: 1fr; }
}
/* Phones: one card a row with the icon beside it, so each line reads at a normal length */
@media (max-width: 640px) {
  .ra-hero__title { font-size: clamp(3.4rem, 14vw, 4.5rem); } /* the home page's phone title */  .ra-pillars { grid-template-columns: 1fr; }
  .ra-pillar {
    grid-row: auto; grid-template-rows: none; grid-template-columns: 32px 1fr; column-gap: 1rem;
    padding: 1.1rem 1.1rem 1.2rem;
  }
  .ra-pillar:last-child { grid-column: auto; }
  .ra-pillar__icon { grid-row: 1 / span 2; width: 32px; height: 32px; margin-top: 0.15rem; }
  .ra-pillar__name, .ra-pillar__line { grid-column: 2; }
  .ra-pillar__name { margin: 0 0 0.35rem; }
}