/* ==========================================================================
   COMPONENTS — per-section blocks and the contact form
   Each block below maps to one <section> in index.html.
   ========================================================================== */

/* MANIFESTO ----------------------------------------------------------------- */
.manifesto { background: var(--beige); padding: 100px var(--gutter); }
.manifesto-box {
  max-width: 900px; margin: 0 auto; text-align: center;
  border: 3px double var(--gold);
  padding: 64px 56px; position: relative;
  background: var(--beige-soft);
}
.manifesto-box::before, .manifesto-box::after {
  content: ''; position: absolute;
  width: 10px; height: 10px;
  background: var(--red); transform: rotate(45deg);
  left: 50%; margin-left: -5px;
}
.manifesto-box::before { top: -6px; }
.manifesto-box::after { bottom: -6px; }
.manifesto .deco-kicker { color: var(--red); }
.manifesto h2 { margin-top: 16px; }
.manifesto p {
  font-family: var(--font-serif);
  font-size: 19px; color: var(--ink);
  max-width: 720px; margin: 18px auto 0; line-height: 1.75;
}
.manifesto p em { color: var(--red); font-style: italic; }

/* CAPABILITIES -------------------------------------------------------------- */
#capabilities { background: var(--beige); }
.cap-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 32px; margin-top: 32px; }
.cap { border: 1px solid #e8e2d3; padding: 36px; background: #fff; }
.cap h3 { color: var(--navy); font-size: 20px; margin-bottom: 12px; }
.cap p { font-size: 15px; color: var(--grey); }
.cap-note {
  text-align: center;
  font-family: var(--font-serif);
  font-style: italic; color: var(--grey);
  font-size: 16px; margin-top: 36px; line-height: 1.6;
}

/* MODEL --------------------------------------------------------------------- */
.model-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px;
  margin-top: 56px;
  background: rgba(195, 164, 87, .5);
  border: 1px solid rgba(195, 164, 87, .5);
  overflow: hidden;
}
.model-step { background: var(--beige-soft); padding: 34px 26px; }
.model-step .num { font-family: var(--font-deco); font-size: 14px; color: var(--red); font-weight: 700; letter-spacing: 2px; }
.model-step h3 { font-size: 18.5px; color: var(--navy); margin: 10px 0; }
.model-step p { font-size: 14.5px; color: var(--grey); }

/* Results strip inside the model section */
.results { margin-top: 40px; padding-top: 24px; border-top: 1px solid #e8e2d3; }
.results-title { font-family: var(--font-deco); font-size: 11px; font-weight: 700; letter-spacing: 3px; text-transform: uppercase; color: var(--red); margin-bottom: 20px; }
.results-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 44px; }
.results-grid .stat-num { font-family: var(--font-serif); font-size: 16px; font-weight: 700; color: var(--navy); line-height: 1.3; }
.results-grid .stat-desc { font-size: 12.5px; color: var(--grey); margin-top: 8px; line-height: 1.5; }

/* PORTFOLIO ----------------------------------------------------------------- */
.port { background: var(--navy); color: var(--beige); }
.port h2 { color: var(--beige); }
.port .sec-kicker { color: var(--gold); }
.port .lede { color: #c8cfdc; }
.port-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; margin-top: 56px; }
.card {
  background: rgba(255, 255, 255, .02);
  border: 1px solid rgba(195, 164, 87, .3);
  padding: 32px; display: flex; flex-direction: column;
}
.card.featured { border-top: 3px solid var(--gold); }
.card h3 { font-size: 20px; color: var(--beige); }
.card .tag { font-family: var(--font-deco); font-size: 11px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--gold); margin: 6px 0 12px; }
.card p { font-size: 14.5px; color: #ccd3df; flex: 1; }
.card .result { margin-top: 18px; padding-top: 14px; border-top: 1px dashed rgba(195, 164, 87, .4); font-size: 13.5px; color: var(--gold-soft); font-weight: 600; }
.card .result::before { content: '\25B8  '; color: var(--gold); }

/* TEAM ---------------------------------------------------------------------- */
.team-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 48px 40px; margin-top: 56px; }
.member { text-align: center; }
/* Small, centered circular portrait — a refined accent, not a full-width tile. */
.member .avatar {
  width: 112px; height: 112px; aspect-ratio: 1;
  border-radius: 50%;
  margin: 0 auto 18px;
  background: linear-gradient(150deg, var(--navy) 0%, var(--navy-mid) 100%);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-serif); font-size: 34px; color: var(--gold); font-weight: 700;
  /* thin gold ring + soft lift, understated */
  box-shadow: 0 0 0 1px rgba(195, 164, 87, .55), 0 6px 18px rgba(15, 27, 46, .14);
}
/* Photo avatars — grayscale + identical crop so the row reads as one set.
   Falls back to the initials style above if a member has no photo. */
.member img.avatar {
  display: block;
  object-fit: cover;
  object-position: center 22%;
  filter: grayscale(100%);
  background: var(--navy);
}
.member h3 { font-size: 18px; color: var(--navy); }
.member .role { font-family: var(--font-deco); font-size: 11.5px; font-weight: 700; letter-spacing: 1.8px; text-transform: uppercase; color: var(--red); margin: 4px 0 10px; }
.member p { font-size: 13.5px; color: var(--grey); max-width: 280px; margin: 0 auto; }

.advisors { margin-top: 64px; padding: 32px 36px; background: #fff; border: 1px solid #e8e2d3; }
.advisors b { color: var(--navy); font-size: 15px; }
.advisor-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; margin-top: 18px; }
.advisor-cat { font-family: var(--font-deco); font-size: 11px; font-weight: 700; letter-spacing: 2.2px; text-transform: uppercase; color: var(--red); margin-bottom: 8px; }
.advisor-grid p { font-size: 14px; color: var(--grey); line-height: 1.55; }

/* CONTACT ------------------------------------------------------------------- */
.contact { background: linear-gradient(160deg, var(--navy-deep), var(--navy)); color: var(--beige); }
.contact h2 { color: var(--beige); }
.contact .sec-kicker { color: var(--gold); }
.contact .lede { color: #c8cfdc; }
.contact-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; margin-top: 48px; align-items: start; }
.contact-aside p { color: #c8cfdc; font-size: 15px; margin-bottom: 20px; }
.contact-aside a { color: var(--gold); text-decoration: none; }

/* Contact form -------------------------------------------------------------- */
.contact-form { display: grid; gap: 18px; }
.field { display: flex; flex-direction: column; gap: 7px; }
.field label {
  font-family: var(--font-deco);
  font-size: 11px; font-weight: 700; letter-spacing: 1.8px; text-transform: uppercase;
  color: var(--gold-soft);
}
.field input, .field textarea {
  font-family: var(--font-body);
  font-size: 15px; color: var(--beige);
  background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(195, 164, 87, .3);
  border-radius: 2px; padding: 13px 15px;
  transition: border-color .2s, background .2s;
}
.field input:focus, .field textarea:focus {
  outline: none;
  border-color: var(--gold);
  background: rgba(255, 255, 255, .07);
}
.field textarea { resize: vertical; min-height: 130px; }
.field input::placeholder, .field textarea::placeholder { color: #7c8698; }

/* Honeypot — hidden from real users, catches bots */
.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.contact-form .btn-gold { justify-self: start; margin-top: 4px; }
.contact-form button[disabled] { opacity: .6; cursor: default; }

.form-status { font-size: 14.5px; min-height: 20px; }
.form-status.is-success { color: var(--gold-soft); }
.form-status.is-error { color: #e8a598; }

@media (max-width: 760px) {
  .contact-layout { grid-template-columns: 1fr; gap: 36px; }
}

/* Responsive grid collapse — kept here (after the grid definitions above) so
   these breakpoint overrides win the cascade regardless of stylesheet order. */
@media (max-width: 900px) {
  .cap-grid, .model-grid, .port-grid, .team-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .cap-grid, .model-grid, .port-grid, .team-grid { grid-template-columns: 1fr; }
  .advisor-grid, .results-grid { grid-template-columns: 1fr; }
}