/* ============================================================
   BROTHERHOOD — GROUPS PAGE
   Page-specific styles. Relies on site.css + colors_and_type.css
   for header, footer, buttons, .bh-wrap, .section, .eyebrow-block.
   ============================================================ */

/* ---------- HERO: the invitation ---------- */
.groups-hero {
  position: relative; overflow: hidden;
  padding: clamp(140px, 19vh, 220px) 0 clamp(64px, 9vw, 110px);
  background: linear-gradient(162deg, #7D2D3F 0%, #5A3551 40%, #45506E 72%, #374967 100%);
}
.groups-hero__glow {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(92% 72% at 84% 4%, rgba(221,67,67,.24) 0%, transparent 54%);
}
.groups-hero__stripes {
  position: absolute; top: 0; right: 0; width: clamp(180px, 28vw, 400px); aspect-ratio: 360/320;
  z-index: 1; pointer-events: none; opacity: .46;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 44%), linear-gradient(180deg, #000 54%, transparent 100%);
  -webkit-mask-composite: source-in;
          mask-image: linear-gradient(90deg, transparent 0%, #000 44%), linear-gradient(180deg, #000 54%, transparent 100%);
          mask-composite: intersect;
}
.groups-hero__stripes img { width: 100%; height: 100%; object-fit: fill; display: block; }
.groups-hero__inner { position: relative; z-index: 2; max-width: 1140px; margin: 0 auto; padding: 0 32px; }
.groups-hero__eyebrow { color: var(--bh-pale-blue); margin: 0 0 20px; }
.groups-hero__title {
  font-family: var(--font-display); font-weight: 600; text-transform: uppercase;
  font-size: clamp(46px, 7vw, 100px); line-height: .9; letter-spacing: -.01em;
  color: var(--fg-1); margin: 0; max-width: 15ch; text-wrap: balance;
}
.groups-hero__title em { font-style: normal; color: var(--bh-bright-red); }
.groups-hero__lead {
  font-family: var(--font-body); font-weight: 300; font-size: clamp(19px, 2.1vw, 26px);
  line-height: 1.5; color: rgba(255,255,255,.9); margin: 26px 0 0; max-width: 60ch;
}
.groups-hero__actions { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 38px; }
.bh-btn--lg { padding: 16px 34px; font-size: 14px; }

/* ---------- shared section intro ---------- */
.g-intro { max-width: 780px; }
.g-intro .bh-h2 { color: var(--fg-1); margin: 0; }
.g-intro p { color: var(--fg-2); margin: 18px 0 0; font-size: clamp(17px, 1.5vw, 20px); line-height: 1.55; }

/* ---------- WHY HOST ---------- */
.why__grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(24px, 3.2vw, 44px); margin-top: clamp(44px, 5vw, 64px);
}
.why__icon {
  width: 54px; height: 54px; border-radius: var(--r-md); margin-bottom: 22px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(221,67,67,.12); border: 1px solid rgba(221,67,67,.3); color: var(--bh-terra);
}
.why__icon i { width: 26px; height: 26px; stroke-width: 1.7; }
.why__item h3 {
  font-family: var(--font-display); font-weight: 600; text-transform: uppercase;
  font-size: clamp(22px, 2.3vw, 28px); line-height: 1.04; color: var(--fg-1); margin: 0 0 12px;
}
.why__item p { color: var(--fg-2); margin: 0; line-height: 1.6; }
@media (max-width: 860px) { .why__grid { grid-template-columns: 1fr; gap: 34px; } }

/* ---------- HOW IT WORKS ---------- */
.how__grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(18px, 2.2vw, 26px); margin-top: clamp(44px, 5vw, 64px);
}
.how__card {
  background: var(--surface-1); border: 1px solid var(--line); border-radius: var(--r-md);
  padding: clamp(28px, 3vw, 38px); box-shadow: var(--shadow-md); display: flex; flex-direction: column;
}
.how__num { font-family: var(--font-super); font-size: 12px; letter-spacing: .18em; text-transform: uppercase; color: var(--bh-pale-blue); }
.how__icon { color: var(--bh-bright-red); margin: 20px 0 18px; }
.how__icon i { width: 34px; height: 34px; stroke-width: 1.55; }
.how__card h3 {
  font-family: var(--font-display); font-weight: 600; text-transform: uppercase;
  font-size: clamp(22px, 2.2vw, 27px); line-height: 1.04; color: var(--fg-1); margin: 0 0 12px;
}
.how__card p { color: var(--fg-2); margin: 0; line-height: 1.58; flex: 1; }
.how__detail {
  margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line);
  font-family: var(--font-super); font-size: 12px; letter-spacing: .04em; text-transform: uppercase;
  color: var(--fg-3); display: flex; align-items: center; gap: 9px;
}
.how__detail i { width: 16px; height: 16px; color: var(--bh-terra); }
@media (max-width: 860px) { .how__grid { grid-template-columns: 1fr; } }

/* ---------- WHO IT'S FOR ---------- */
.who__grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 16px; margin-top: clamp(44px, 5vw, 60px);
}
.who__card {
  background: rgba(255,255,255,.03); border: 1px solid var(--line); border-radius: var(--r-md);
  padding: 30px 24px; transition: border-color .2s ease, background-color .2s ease, transform .2s ease;
}
.who__card:hover { border-color: rgba(255,255,255,.26); background: rgba(255,255,255,.05); transform: translateY(-3px); }
.who__ic {
  width: 48px; height: 48px; border-radius: var(--r-md); margin-bottom: 20px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(189,214,231,.08); border: 1px solid var(--line); color: var(--bh-terra);
}
.who__ic i { width: 26px; height: 26px; stroke-width: 1.6; }
.who__card h3 {
  font-family: var(--font-display); font-weight: 600; text-transform: uppercase;
  font-size: 19px; line-height: 1.08; color: var(--fg-1); margin: 0 0 9px;
}
.who__card p { font-size: 14px; color: var(--fg-2); margin: 0; line-height: 1.5; }

/* ---------- INQUIRY FORM ---------- */
.inquire__grid {
  display: grid; grid-template-columns: .82fr 1.18fr; gap: clamp(36px, 5vw, 76px); align-items: start;
}
.inquire__intro { position: sticky; top: 104px; }
.inquire__intro .bh-h2 { color: var(--fg-1); margin: 0; }
.inquire__intro p { color: var(--fg-2); margin: 18px 0 0; line-height: 1.6; }
.inquire__note {
  margin-top: 26px; display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--font-super); font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
  color: rgba(255,255,255,.55); border: 1px dashed rgba(255,255,255,.28); padding: 8px 12px; border-radius: var(--r-sm);
}
.inquire__note i { width: 14px; height: 14px; }

.gform {
  position: relative; overflow: hidden;
  background: linear-gradient(180deg, rgba(42,39,51,.74), rgba(30,28,38,.84)), var(--haze-blue-red);
  border: 1px solid var(--line); border-radius: var(--r-md); box-shadow: var(--shadow-lg);
  padding: clamp(28px, 3.4vw, 46px);
}
.gform__brayer {
  position: absolute; top: 0; right: 0; width: 220px; opacity: .4; mix-blend-mode: screen;
  pointer-events: none; transform: translate(26%, -34%) rotate(8deg);
}
.gform__inner { position: relative; z-index: 1; }
.gform__row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.gfield { display: flex; flex-direction: column; gap: 7px; margin-bottom: 16px; }
.gfield--full { grid-column: 1 / -1; }
.gfield label {
  font-family: var(--font-super); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.62);
}
.gfield label .opt { opacity: .55; text-transform: none; letter-spacing: .02em; }
.gfield input, .gfield select, .gfield textarea {
  width: 100%; font-family: var(--font-body); font-size: 16px; padding: 13px 15px;
  border-radius: var(--r-sm); border: 1px solid rgba(255,255,255,.3); background: rgba(0,0,0,.32);
  color: #fff; outline: none; transition: border-color .18s; min-width: 0;
}
.gfield textarea { resize: vertical; min-height: 116px; line-height: 1.5; }
.gfield select {
  -webkit-appearance: none; appearance: none; cursor: pointer; padding-right: 40px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center;
}
.gfield select option { background: #2A2733; color: #fff; }
.gfield input::placeholder, .gfield textarea::placeholder { color: rgba(255,255,255,.45); }
.gfield input:focus, .gfield select:focus, .gfield textarea:focus { border-color: var(--bh-bright-red); }
.gform__err { font-family: var(--font-body); font-size: 13px; color: #FFB4A8; margin: 0 0 6px; min-height: 1em; }
.gform__actions { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 6px; }
.gform__fine { font-family: var(--font-body); font-size: 12.5px; color: rgba(255,255,255,.5); margin: 0; line-height: 1.45; flex: 1; min-width: 180px; }

/* success state */
.gform__done { display: none; flex-direction: column; align-items: flex-start; gap: 16px; text-align: left; }
.gform.is-sent .gform__inner { display: none; }
.gform.is-sent .gform__done { display: flex; animation: optinIn .45s cubic-bezier(.2,.7,.2,1); }
.gform__check {
  width: 60px; height: 60px; border-radius: 50%; background: var(--bh-deep-green);
  display: flex; align-items: center; justify-content: center; color: #fff; box-shadow: 0 0 0 8px rgba(0,104,69,.18);
}
.gform__check i { width: 28px; height: 28px; }
.gform__done h3 {
  font-family: var(--font-display); font-weight: 600; text-transform: uppercase;
  font-size: clamp(26px, 3vw, 36px); line-height: 1; color: #fff; margin: 0;
}
.gform__done p { color: rgba(255,255,255,.82); margin: 0; line-height: 1.55; }

@media (max-width: 920px) {
  .inquire__grid { grid-template-columns: 1fr; gap: 36px; }
  .inquire__intro { position: static; }
}
@media (max-width: 520px) { .gform__row { grid-template-columns: 1fr; } }

/* ---------- CLOSING CTA (reuses .band shell) ---------- */
.band__actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-top: 30px; }