/* ==========================================================================
   Team Wong Hawaiʻi - /agents page
   Additive only. Loads after style.css and adds no rule that touches a class
   the home page uses. Every value below is a token already declared in
   style.css :root; no hex is invented and no type step is added.

   Gold (--gold #b9904f) carries no text anywhere here: it is used only as a
   filled rule, matching the market band. Gold-coloured type would be
   --gold-text and is paper-ground only, so it never appears on the dark bands.
   ========================================================================== */

/* --- Hero additions ------------------------------------------------------ */
.page__lede { max-width: 54ch; font-size: var(--fs-400); line-height: 1.5; }
.page__act { margin-top: 1.75rem; }

/* --- Group story --------------------------------------------------------- */
.story { padding-block: var(--band); }
.story__inner { display: grid; gap: clamp(1.5rem, 3vw, 3.5rem); }
.story__h { font-size: var(--fs-600); max-width: 18ch; }
.story__body p { max-width: 68ch; }
.story__body p:last-child { margin-bottom: 0; }
@media (min-width: 940px) {
  .story__inner { grid-template-columns: minmax(0, 38fr) minmax(0, 62fr); align-items: start; }
}

/* --- Roster -------------------------------------------------------------- */
.roster { padding-block: var(--band); border-top: 1px solid var(--line); }
.roster__head { padding-bottom: 1.5rem; border-bottom: 1px solid var(--line); margin-bottom: clamp(1.75rem, 3vw, 2.75rem); }
.roster__grid { display: grid; gap: clamp(1.25rem, 2.2vw, 2rem); }
@media (min-width: 700px) { .roster__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .roster__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.member {
  display: grid; align-content: start;
  padding: clamp(1.25rem, 2vw, 1.75rem);
  background: var(--paper);
  border: 1px solid var(--line); border-top: 3px solid var(--gold);
  border-radius: var(--r-lg);
}
.member__name { font-family: var(--display); font-weight: 700; font-size: var(--fs-400); color: var(--ink); letter-spacing: -0.01em; }
.member__role {
  margin: 0.5rem 0 0;
  font-family: var(--display); font-weight: 600; font-size: var(--fs-100);
  letter-spacing: 0.09em; text-transform: uppercase; color: var(--gold-text);
  line-height: 1.5;
}
.member__note { margin: 0.9rem 0 0; font-size: var(--fs-200); line-height: 1.6; color: var(--body); }

/* --- Credentials band ---------------------------------------------------- */
.creds { background: var(--blue); padding-block: clamp(3rem, 6vw, 5.5rem); }
.creds .eyebrow { color: var(--paper); }
.creds__h { font-size: var(--fs-600); letter-spacing: -0.03em; max-width: 20ch; }
.creds__src { margin: 1.1rem 0 0; font-size: var(--fs-300); color: var(--paper); max-width: 66ch; }
.creds__rule { height: 7px; background: var(--gold); border-radius: 1px; margin: clamp(1.75rem, 3.5vw, 2.75rem) 0 clamp(1.75rem, 3vw, 2.5rem); }
.creds__list { display: grid; gap: 0.85rem clamp(1.5rem, 3vw, 3rem); }
@media (min-width: 760px) { .creds__list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.creds__list li {
  color: var(--paper); font-size: var(--fs-300); line-height: 1.5;
  padding-left: 1.15rem; border-left: 2px solid rgba(251, 250, 247, 0.35);
}
.creds__act { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.75rem; margin: clamp(2rem, 4vw, 3rem) 0 0; }
.creds__tel, .close__tel {
  font-family: var(--display); font-weight: 600; font-size: var(--fs-200);
  letter-spacing: 0.09em; text-transform: uppercase; color: var(--paper);
  text-decoration: underline; text-decoration-thickness: 2px;
  text-decoration-color: rgba(251, 250, 247, 0.6); text-underline-offset: 6px;
  display: inline-block; padding-block: 11px;
}
.creds__tel:hover, .close__tel:hover { text-decoration-color: var(--paper); }

/* --- Capabilities -------------------------------------------------------- */
.caps { padding-block: var(--band); }
.caps__lede { margin: 1rem 0 clamp(1.75rem, 3vw, 2.5rem); font-size: var(--fs-400); max-width: 62ch; }
.caps__list { display: grid; gap: 0; border-top: 1px solid var(--line); }
.caps__list li { display: grid; gap: 0.3rem; padding: 1.35rem 0; border-bottom: 1px solid var(--line); }
.caps__list b { font-family: var(--display); font-weight: 600; font-size: var(--fs-400); color: var(--ink); letter-spacing: -0.01em; }
.caps__list span { max-width: 74ch; }
@media (min-width: 940px) {
  .caps__list li { grid-template-columns: minmax(0, 30fr) minmax(0, 70fr); gap: 0 clamp(1.5rem, 3vw, 3rem); align-items: baseline; }
}

/* --- Service area -------------------------------------------------------- */
.area { padding-block: var(--band) 0; }
.area__inner { max-width: 74ch; }
.area__inner p { margin-top: 1rem; }

/* --- FAQ ----------------------------------------------------------------- */
.faq { padding-block: var(--band); }
.faq__inner { max-width: 74ch; }
.faq__list { margin-top: clamp(1.5rem, 3vw, 2.25rem); border-top: 1px solid var(--line); }
.qa { padding: 1.5rem 0; border-bottom: 1px solid var(--line); }
.qa h3 { font-family: var(--display); font-weight: 600; font-size: var(--fs-400); color: var(--ink); letter-spacing: -0.01em; }
.qa p { margin: 0.7rem 0 0; }

/* --- Closing band -------------------------------------------------------- */
.close { background: var(--ocean-deep); padding-block: clamp(3rem, 6vw, 5rem); }
.close__inner { max-width: 74ch; }
.close__inner h2 { font-size: var(--fs-600); letter-spacing: -0.03em; }
.close__inner p { color: var(--paper); margin-top: 1.1rem; }
.close__act { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.75rem; margin-top: 1.75rem; }
.close__legal { font-size: var(--fs-200); margin-top: 1.5rem; padding-top: 1.25rem; border-top: 1px solid rgba(251, 250, 247, 0.3); }

/* --- Button colour inside .on-dark --------------------------------------
   style.css has `.on-dark a { color: var(--paper) }`, which is a class plus an
   element and therefore outranks the plain `.btn--paper` class that sets the
   blue label colour. An anchor styled as a paper button inside an .on-dark
   section came out paper-on-paper: invisible.

   The home page never triggers this. Its .worth and footer paper buttons are
   <button> elements, which .on-dark a does not match, and the header's
   .sitenav__tel anchor sits in .site-head, which is not an .on-dark section.
   This page is the first to put an anchor button on an .on-dark ground.

   Restated at class-plus-class so it wins cleanly, without touching style.css
   or weakening the .on-dark link rule that every other link there relies on.
   Hover was already correct: .btn--paper:hover outranks a:hover.
   ------------------------------------------------------------------------ */
.on-dark .btn--paper { color: var(--blue); }
.on-dark .btn--paper:hover { color: var(--paper); }