/* ==========================================================================
   Everything Panama
   Lato throughout, light page, deep navy chrome, antique gold accent.
   ========================================================================== */

:root {
  --navy:       #142230;
  --navy-deep:  #0D1621;
  --navy-soft:  #24384A;
  --gold:       #C0964F;
  --gold-light: #D4B173;
  --gold-pale:  #E8D6B4;
  --head:       #1B2732;
  --body:       #5E6A75;
  --body-light: #8994A0;
  --page:       #FFFFFF;
  --mist:       #F5F3EF;
  --mist-2:     #EBE7DF;
  --line:       #E2DDD4;
  --line-soft:  #EFEBE4;

  /* theindependentlawyer.com uses Lato for body and headings alike.
     --serif is kept as a name so the display elements stay easy to retarget. */
  --serif: "Lato", "Segoe UI", system-ui, -apple-system, sans-serif;
  --sans:  "Lato", "Segoe UI", system-ui, -apple-system, sans-serif;

  --wrap: 1240px;
  --gut: clamp(20px, 5vw, 56px);

  --step--1: clamp(0.8rem, 0.77rem + 0.13vw, 0.87rem);
  --step-0:  clamp(0.97rem, 0.94rem + 0.17vw, 1.06rem);
  --step-1:  clamp(1.16rem, 1.08rem + 0.36vw, 1.4rem);
  --step-2:  clamp(1.45rem, 1.27rem + 0.85vw, 2.05rem);
  --step-3:  clamp(1.85rem, 1.5rem + 1.7vw, 2.9rem);
  --step-4:  clamp(2.3rem, 1.6rem + 3.2vw, 4.3rem);
  --step-5:  clamp(2.8rem, 1.7rem + 5.4vw, 6rem);
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

body {
  margin: 0;
  background: var(--page);
  color: var(--body);
  font-family: var(--sans);
  font-size: var(--step-0);
  line-height: 1.72;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }
a { color: inherit; }

h1, h2, h3, h4 {
  font-family: var(--sans);
  font-weight: 700;
  color: var(--head);
  line-height: 1.22;
  letter-spacing: -0.012em;
  margin: 0;
  text-wrap: balance;
}

p { margin: 0 0 1.15em; text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gut); }

/* ------------------------------------------------------------- shared bits */
.eyebrow {
  font-family: var(--sans);
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 500;
  margin: 0 0 1.15rem;
}

.rule { width: 54px; height: 2px; background: var(--gold); margin: 0 0 1.6rem; }

.lead { font-size: var(--step-1); line-height: 1.62; color: var(--body); }

.section { padding-block: clamp(64px, 8vw, 118px); }
.section--mist { background: var(--mist); }
.section--navy { background: var(--navy); }

/* ------------------------------------------------------------- buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.65rem;
  font-family: var(--sans);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 1.12em 1.9em;
  border: 1px solid var(--gold);
  border-radius: 0;
  background: var(--gold);
  color: #fff;
  text-decoration: none;
  cursor: pointer;
  line-height: 1;
  white-space: nowrap;
  transition: background 0.22s ease, border-color 0.22s ease, color 0.22s ease;
}
.btn:hover { background: transparent; color: var(--gold); }
.btn:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.btn svg { width: 15px; height: 15px; flex: none; }

.btn--outline { background: transparent; color: var(--head); border-color: var(--line); }
.btn--outline:hover { background: var(--head); border-color: var(--head); color: #fff; }

.btn--onnavy { background: transparent; border-color: rgba(255, 255, 255, 0.4); color: #fff; }
.btn--onnavy:hover { background: #fff; border-color: #fff; color: var(--navy); }

.btn--wa { background: #1F6F5C; border-color: #1F6F5C; color: #fff; }
.btn--wa:hover { background: transparent; color: #fff; border-color: rgba(255, 255, 255, 0.5); }

.textlink { color: inherit; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.textlink:hover { color: var(--gold-light); }

.arrowlink {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--gold);
  text-decoration: none;
  transition: gap 0.22s ease, color 0.22s ease;
}
.arrowlink svg { width: 14px; height: 14px; }
.arrowlink:hover { gap: 0.85rem; color: var(--head); }

/* ------------------------------------------------------------- utility bar */
.utility {
  background: var(--navy-deep);
  color: rgba(255, 255, 255, 0.62);
  font-size: 0.74rem;
  letter-spacing: 0.06em;
}
.utility__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  min-height: 40px;
  flex-wrap: wrap;
}
.utility__left { display: flex; align-items: center; gap: 1.6rem; flex-wrap: wrap; }
.utility__item { display: inline-flex; align-items: center; gap: 0.45rem; }
.utility__item svg { width: 13px; height: 13px; opacity: 0.6; flex: none; }
.utility__right { display: flex; align-items: center; gap: 1rem; }

.langs { display: flex; align-items: center; gap: 0.3rem; font-size: 0.72rem; letter-spacing: 0.1em; }
.langs a {
  text-decoration: none;
  color: rgba(255, 255, 255, 0.55);
  text-transform: uppercase;
  padding: 0.25em 0.4em;
  transition: color 0.18s ease;
}
.langs a:hover { color: #fff; }
.langs a[aria-current="true"] { color: var(--gold-light); }
.langs span { color: rgba(255, 255, 255, 0.22); }

/* ------------------------------------------------------------- header */
.header {
  position: sticky;
  top: 0;
  z-index: 200;
  background: var(--page);
  border-bottom: 1px solid var(--line-soft);
  transition: box-shadow 0.25s ease;
}
.header.is-stuck { box-shadow: 0 2px 22px rgba(20, 34, 48, 0.08); }
.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  min-height: 82px;
  max-width: 100%;
  flex-wrap: nowrap;
}
/* the nav is the only part allowed to give ground before the breakpoints bite */
.header__inner > nav { min-width: 0; }
.header__right { flex: none; }

.brand { display: flex; align-items: center; text-decoration: none; flex: none; }
.brand__text { display: flex; flex-direction: column; line-height: 1.1; }
.brand__name {
  font-family: var(--serif);
  font-size: 1.34rem;
  color: var(--head);
  letter-spacing: 0.028em;
  text-transform: uppercase; font-weight: 900; }
.brand__sub {
  font-size: 0.58rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--gold);
  margin-top: 3px;
  font-weight: 500;
}

.nav { display: flex; align-items: center; gap: clamp(1rem, 2vw, 1.9rem); }
.nav a {
  text-decoration: none;
  font-size: 0.76rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--head);
  position: relative;
  padding-block: 6px;
  white-space: nowrap;
  transition: color 0.18s ease;
}
.nav a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.24s ease;
}
.nav a:hover { color: var(--gold); }
.nav a:hover::after { transform: scaleX(1); }

/* Contact lives in the header button on desktop, so it only needs to appear
   in the nav once that button is out of reach on small screens. */
.nav__mobile-only { display: none; }

.header__right { display: flex; align-items: stretch; gap: 1rem; }

/* Two tall solid blocks sitting flush at the right of the bar. */
.header__actions { display: flex; align-items: stretch; gap: 6px; }
.header__cta,
.header__group,
.header__ig {
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  padding: 0.9rem 1.5rem;
  min-height: 62px;
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 500;
  white-space: nowrap;
  border: 0;
  transition: background 0.2s ease, color 0.2s ease;
}
.header__cta { background: var(--navy); color: #fff; }
.header__cta:hover { background: var(--navy-soft); }

.header__group { background: var(--gold); color: #fff; gap: 0.7rem; padding-inline: 1.35rem; }
.header__group:hover { background: #A87F3E; }
.header__group svg { width: 21px; height: 21px; flex: none; }
.header__group-text { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.2; }
.header__ig {
  background: var(--navy-deep);
  color: #fff;
  gap: 0.7rem;
  padding-inline: 1.35rem;
}
.header__ig:hover { background: var(--navy-soft); }
.header__ig svg { width: 20px; height: 20px; flex: none; }

.header__group-sub {
  font-size: 0.6rem;
  letter-spacing: 0.06em;
  text-transform: none;
  opacity: 0.88;
  font-weight: 400;
  margin-top: 2px;
}

.burger { display: none; background: none; border: 0; padding: 8px; cursor: pointer; color: var(--head); }
.burger svg { width: 24px; height: 24px; }

/* ------------------------------------------------------------- hero
   Panama City photograph behind the headline. Drop a file in and set
   heroImage in site.json; until then the navy ground carries it alone. */
.hero {
  position: relative;
  background: var(--navy);
  color: #fff;
  padding-block: clamp(64px, 8vw, 112px) clamp(48px, 7vw, 96px);
  overflow: hidden;
  /* tall enough that the sign in the photograph is never cut through */
  min-height: min(86vh, 830px);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.hero__bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  /* biased low so the sign and the waterfront stay in frame rather than sky */
  background-position: center 62%;
  opacity: 1;
}
/* Darkness is weighted to the left, where the headline sits, and eases off to
   the right so the sign and the palm keep their colour. The bottom band holds
   the stats row. */
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(94deg,
      rgba(13, 22, 33, 0.93) 0%,
      rgba(13, 22, 33, 0.84) 28%,
      rgba(13, 22, 33, 0.5) 58%,
      rgba(13, 22, 33, 0.24) 100%),
    linear-gradient(180deg,
      rgba(13, 22, 33, 0.52) 0%,
      rgba(13, 22, 33, 0.06) 46%,
      rgba(13, 22, 33, 0.22) 100%);
}
.hero__inner { position: relative; z-index: 2; }

.hero__eyebrow {
  font-size: 0.72rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--gold-light);
  font-weight: 700;
  margin: 0 0 1.5rem;
}
.hero h1 {
  color: #fff;
  font-size: clamp(2.1rem, 1.45rem + 2.9vw, 3.9rem);
  line-height: 1.14;
  max-width: 20ch;
  margin-bottom: 1.5rem;
  text-shadow: 0 1px 24px rgba(13, 22, 33, 0.4);
}
.hero__lead {
  font-size: var(--step-1);
  line-height: 1.66;
  color: rgba(255, 255, 255, 0.82);
  max-width: 54ch;
  margin-bottom: 2.3rem;
}
.hero__actions { display: flex; gap: 0.8rem; flex-wrap: wrap; }

/* Stats live below the hero, not on top of it. The sign in the photograph sits
   along the bottom edge, and anything laid over it turned both to mush. */
.statsband { background: var(--navy); }
.stats { display: grid; grid-template-columns: repeat(4, 1fr); }
.stats .stat {
  padding: clamp(22px, 3vw, 34px) clamp(12px, 2vw, 26px);
  border-right: 1px solid rgba(255, 255, 255, 0.18);
  text-align: center;
}
.stats .stat:last-child { border-right: 0; }
.stat__figure {
  font-family: var(--serif);
  font-size: var(--step-2);
  color: var(--gold-light);
  line-height: 1;
  display: block; font-weight: 700; }
.stat__label {
  font-size: 0.78rem;
  color: rgba(255, 255, 255, 0.62);
  line-height: 1.45;
  margin-top: 0.55rem;
  display: block;
  letter-spacing: 0.02em;
}

/* ------------------------------------------------------------- section head */
.sechead { max-width: 720px; margin-bottom: clamp(40px, 5vw, 68px); }
.sechead--center { margin-inline: auto; text-align: center; }
.sechead--center .rule { margin-inline: auto; }
.sechead h2 { font-size: var(--step-3); margin-bottom: 1.1rem; }
.sechead p { color: var(--body); font-size: var(--step-0); }

/* ------------------------------------------------------------- services */
.pillar { margin-bottom: clamp(48px, 6vw, 84px); }
.pillar:last-child { margin-bottom: 0; }

.pillar__head {
  display: flex;
  align-items: baseline;
  gap: 1.1rem;
  padding-bottom: 1.1rem;
  border-bottom: 1px solid var(--line);
  margin-bottom: clamp(24px, 3vw, 40px);
}
.pillar__index {
  font-family: var(--serif);
  font-size: 1.05rem;
  color: var(--gold);
  letter-spacing: 0.08em;
  flex: none; font-weight: 700; }
.pillar__name { font-size: var(--step-2); letter-spacing: 0.02em; }

.svcs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 290px), 1fr));
  gap: clamp(18px, 2.2vw, 30px);
}
.svc {
  background: var(--page);
  border: 1px solid var(--line);
  padding: clamp(24px, 2.6vw, 36px);
  display: flex;
  flex-direction: column;
  transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
}
.svc:hover {
  border-color: var(--gold);
  box-shadow: 0 14px 40px rgba(20, 34, 48, 0.07);
  transform: translateY(-3px);
}
.svc__name { font-size: var(--step-1); margin-bottom: 0.9rem; letter-spacing: 0.015em; }
.svc__body { font-size: 0.9rem; line-height: 1.68; margin-bottom: 1.2rem; }
.svc__facts { list-style: none; margin: 0 0 1.5rem; padding: 0; display: grid; gap: 0.6rem; }
.svc__facts li {
  font-size: 0.82rem;
  line-height: 1.55;
  color: var(--body);
  padding-left: 1.15rem;
  position: relative;
}
.svc__facts li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.62em;
  width: 6px; height: 6px;
  border: 1px solid var(--gold);
  transform: rotate(45deg);
}
.svc .arrowlink { margin-top: auto; }

/* ------------------------------------------------------------- how */
.steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr));
  gap: clamp(28px, 4vw, 52px);
}
.step { text-align: center; }
.step__index {
  width: 62px; height: 62px;
  margin: 0 auto 1.4rem;
  border: 1px solid var(--gold);
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-family: var(--serif);
  font-size: 1.15rem;
  color: var(--gold); font-weight: 700; }
.step h3 { font-size: var(--step-1); margin-bottom: 0.75rem; }
.step p { font-size: 0.9rem; }

/* ------------------------------------------------------------- team
   Small circular portraits inside a gold ring. */
/* Jake founded the group, so he leads on his own row and the other two sit
   beneath him. Two rows, not three across. */
/* Centred wrap rather than a fixed column count. Three sit per row at desktop
   width, and any leftover row centres itself, so 4, 5 or 7 people all look
   deliberate instead of leaving an orphan hanging on the left. */
.team {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(28px, 3vw, 46px);
  max-width: 1120px;
  margin-inline: auto;
}
.member { flex: 0 1 300px; max-width: 330px; }

/* The lead sits in its own container above the wrap, so no card can ever
   slide up beside it however many people are added. */
.team-lead {
  max-width: 520px;
  margin: 0 auto clamp(30px, 4vw, 50px);
  padding-bottom: clamp(22px, 3vw, 36px);
  border-bottom: 1px solid var(--line);
}
.member--lead { flex: none; max-width: none; }
.member--lead .member__portrait { width: 196px; height: 196px; }
.member { text-align: center; display: flex; flex-direction: column; }
.member__portrait {
  width: 168px; height: 168px;
  margin: 0 auto 1.4rem;
  border-radius: 50%;
  border: 4px solid var(--gold);
  padding: 5px;
  background: var(--page);
  flex: none;
}
.member__portrait img {
  width: 100%; height: 100%;
  border-radius: 50%;
  object-fit: cover;
  object-position: center 20%;
}
.member__name { font-size: var(--step-2); margin-bottom: 0.35rem; letter-spacing: 0.02em; }
.member__role {
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 500;
  line-height: 1.65;
  margin-bottom: 1.1rem;
}
.member__bio { font-size: 0.88rem; line-height: 1.7; margin-bottom: 1.2rem; }
.member__handles {
  border-top: 1px solid var(--line);
  padding-top: 1rem;
  margin-top: auto;
  font-size: 0.84rem;
  color: var(--head);
}
.member__handles b {
  display: block;
  font-size: 0.63rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--body-light);
  font-weight: 500;
  margin-bottom: 0.4rem;
}
.member__credit { margin-top: 0.9rem; font-size: 0.78rem; color: var(--body-light); line-height: 1.6; }
.member__credit a { color: var(--gold); text-underline-offset: 3px; }

/* ------------------------------------------------------------- finder */
.finder { background: var(--navy); color: #fff; }
.finder h2 { color: #fff; font-size: var(--step-3); margin-bottom: 1.2rem; }
.finder__lead { color: rgba(255, 255, 255, 0.7); max-width: 44ch; }
.finder .eyebrow { color: var(--gold-light); }
.finder__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: start;
}
.quiz {
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid rgba(255, 255, 255, 0.15);
  padding: clamp(24px, 3vw, 42px);
  min-height: 400px;
  display: flex;
  flex-direction: column;
}
.quiz__bar {
  display: flex;
  align-items: center;
  gap: 1rem;
  font-size: 0.66rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.45);
  margin-bottom: 1.8rem;
}
.quiz__track { flex: 1; height: 1px; background: rgba(255, 255, 255, 0.16); position: relative; }
.quiz__fill { position: absolute; inset: 0 auto 0 0; background: var(--gold); width: 0; transition: width 0.45s ease; }
.quiz__q { font-family: var(--serif); font-size: var(--step-2); color: #fff; line-height: 1.22; margin-bottom: 0.8rem; font-weight: 700; }
.quiz__help { font-size: 0.86rem; color: rgba(255, 255, 255, 0.55); line-height: 1.6; margin-bottom: 1.7rem; }
.quiz__opts { display: grid; gap: 0.6rem; margin-bottom: 1.6rem; }
.quiz__opt {
  display: block;
  width: 100%;
  text-align: left;
  font: inherit;
  font-size: 0.9rem;
  line-height: 1.5;
  color: #fff;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.2);
  padding: 0.95em 1.15em;
  cursor: pointer;
  transition: background 0.18s ease, border-color 0.18s ease, padding-left 0.18s ease;
}
.quiz__opt:hover { background: rgba(255, 255, 255, 0.07); border-color: var(--gold); padding-left: 1.45em; }
.quiz__opt:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.quiz__foot { margin-top: auto; padding-top: 1.2rem; }
.quiz__back {
  background: none; border: 0; padding: 0;
  font-family: var(--sans);
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.45);
  cursor: pointer;
  transition: color 0.18s ease;
}
.quiz__back:hover { color: #fff; }
.quiz__result-label { font-size: 0.66rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold); margin-bottom: 1rem; }
.quiz__result-name { font-family: var(--serif); font-size: var(--step-3); color: #fff; line-height: 1.16; margin-bottom: 1.2rem; font-weight: 700; }
.quiz__result-body { font-size: 0.92rem; color: rgba(255, 255, 255, 0.74); line-height: 1.72; margin-bottom: 1.3rem; }
.quiz__result-next {
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.6);
  line-height: 1.65;
  border-left: 2px solid var(--gold);
  padding-left: 1.1rem;
  margin-bottom: 1.8rem;
}

.fade-in { animation: fadeUp 0.42s cubic-bezier(0.2, 0, 0.2, 1) both; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ------------------------------------------------------------- community */
.community__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
}
.quote {
  font-family: var(--serif);
  font-size: var(--step-2);
  line-height: 1.42;
  color: var(--head);
  margin: 0 0 1rem;
  padding-left: clamp(18px, 2.5vw, 30px);
  border-left: 2px solid var(--gold); font-weight: 700; }
.quote__attrib {
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--body-light);
  padding-left: clamp(20px, 2.5vw, 32px);
  margin-bottom: 2.2rem;
}
.community__points { list-style: none; margin: 0 0 2.2rem; padding: 0; display: grid; gap: 0.9rem; }
.community__points li { font-size: 0.92rem; padding-left: 1.7rem; position: relative; line-height: 1.6; }
.community__points li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.58em;
  width: 8px; height: 8px;
  border: 1px solid var(--gold);
  transform: rotate(45deg);
}

.groupcard { background: var(--navy); color: #fff; padding: clamp(28px, 3.5vw, 48px); text-align: center; }
.groupcard__badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.66rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold-light);
  margin-bottom: 1.8rem;
}
.groupcard__badge .live { width: 7px; height: 7px; border-radius: 50%; background: var(--gold); }
.groupcard__count { font-family: var(--serif); font-size: var(--step-5); line-height: 0.94; color: #fff; display: block; font-weight: 900; }
.groupcard__countlabel { font-size: 0.85rem; color: rgba(255, 255, 255, 0.6); margin: 1rem 0 2rem; display: block; }
.groupcard__name { font-family: var(--serif); font-size: var(--step-1); color: #fff; margin-bottom: 0.5rem; font-weight: 700; }
.groupcard__meta { font-size: 0.7rem; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(255, 255, 255, 0.45); margin-bottom: 2rem; }
.groupcard .btn { width: 100%; }

/* ------------------------------------------------------------- faq
   Native details/summary so every answer is in the HTML whether or not it is
   open. Search engines and AI crawlers read the closed ones too. */
.faq { max-width: 860px; margin-inline: auto; border-top: 1px solid var(--line); }
.faq__item { border-bottom: 1px solid var(--line); }
.faq__q {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 1.35rem 0;
  font-size: var(--step-1);
  font-weight: 700;
  color: var(--head);
  line-height: 1.4;
  transition: color 0.18s ease;
}
.faq__q::-webkit-details-marker { display: none; }
.faq__q::after {
  content: "";
  flex: none;
  width: 12px; height: 12px;
  margin-left: auto;
  margin-top: 0.4em;
  border-right: 2px solid var(--gold);
  border-bottom: 2px solid var(--gold);
  transform: rotate(45deg);
  transition: transform 0.25s ease;
}
.faq__q:hover { color: var(--gold); }
.faq__q:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.faq__item[open] .faq__q::after { transform: rotate(-135deg); }
.faq__a { padding: 0 0 1.5rem; max-width: 72ch; }
.faq__a p { font-size: 0.96rem; line-height: 1.75; color: var(--body); }

/* ------------------------------------------------------------- contact */
.contact__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: clamp(32px, 5vw, 68px);
  align-items: start;
}
.chips__label {
  font-size: 0.66rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--body-light);
  font-weight: 500;
  margin-bottom: 1rem;
  display: block;
}
.chips { display: flex; flex-wrap: wrap; gap: 0.45rem; margin-bottom: 2.4rem; }
.chip {
  font-family: var(--sans);
  font-size: 0.82rem;
  line-height: 1;
  padding: 0.72em 1em;
  border: 1px solid var(--line);
  background: var(--page);
  color: var(--body);
  cursor: pointer;
  transition: all 0.18s ease;
}
.chip:hover { border-color: var(--gold); color: var(--head); }
.chip[aria-pressed="true"] { background: var(--navy); border-color: var(--navy); color: #fff; }
.chip:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

.direct { border-top: 1px solid var(--line); padding-top: 1.6rem; }
.direct__label {
  font-size: 0.66rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--body-light);
  font-weight: 500;
  margin-bottom: 1.2rem;
}
.direct__item {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.9rem 0;
  border-bottom: 1px solid var(--line-soft);
  text-decoration: none;
  transition: padding-left 0.2s ease;
}
.direct__item:hover { padding-left: 6px; }
.direct__item:hover .direct__val { color: var(--gold); }
.direct__key { font-size: 0.68rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--body-light); flex: none; }
.direct__val { font-size: 0.94rem; color: var(--head); text-align: right; transition: color 0.2s ease; }

.form { display: grid; gap: 1.1rem; background: var(--page); border: 1px solid var(--line); padding: clamp(24px, 3vw, 42px); }
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; }
.field { display: grid; gap: 0.45rem; }
.field label { font-size: 0.66rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--body-light); font-weight: 500; }
.field input, .field select, .field textarea {
  font: inherit;
  font-size: 0.94rem;
  color: var(--head);
  background: var(--page);
  border: 1px solid var(--line);
  border-radius: 0;
  padding: 0.85em 1em;
  width: 100%;
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.field textarea { resize: vertical; min-height: 118px; line-height: 1.6; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(192, 150, 79, 0.13);
}
.field input::placeholder, .field textarea::placeholder { color: var(--body-light); opacity: 0.75; }
.field select {
  appearance: none; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%235E6A75' stroke-width='1.4' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1em center;
  background-size: 11px;
  padding-right: 2.5em;
}
.form__consent { font-size: 0.76rem; color: var(--body-light); line-height: 1.6; }
.form__status { font-size: 0.88rem; line-height: 1.6; padding: 0.9em 1.1em; display: none; }
.form__status.is-ok { display: block; background: #EFF6F2; color: #1F6F5C; border: 1px solid #C9E2D7; }
.form__status.is-err { display: block; background: #FCF2EC; color: #A8522A; border: 1px solid #EFD6C4; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.todo {
  display: inline-block;
  font-size: 0.56rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #fff;
  background: #B4552C;
  padding: 0.28em 0.5em;
  margin-left: 0.5rem;
  vertical-align: middle;
  white-space: nowrap;
  font-weight: 500;
}

/* ---------------------------------------------------- referral disclosure
   Must be visible where the introduction is promised, not only in the legal
   notice. Quiet, but not hidden. */
.disclosure {
  max-width: 66ch;
  margin: clamp(38px, 5vw, 60px) auto 0;
  padding-top: 1.4rem;
  border-top: 1px solid var(--line);
  text-align: center;
  font-size: 0.86rem;
  line-height: 1.7;
  color: var(--body-light);
}

/* ------------------------------------------------------------- prose
   Privacy policy and legal notice. One measured column, nothing decorative. */
.prose { max-width: 68ch; margin-inline: auto; }
.prose h1 { font-size: var(--step-3); margin-bottom: 0.9rem; }
.prose__meta {
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--body-light);
  font-weight: 700;
  margin-bottom: 1.8rem;
}
.prose__intro {
  font-size: var(--step-1);
  line-height: 1.66;
  color: var(--body);
  padding-bottom: 1.8rem;
  border-bottom: 2px solid var(--gold);
  margin-bottom: 2.4rem;
}
.prose section { margin-bottom: 2.2rem; }
.prose section:last-child { margin-bottom: 0; }
.prose h2 { font-size: var(--step-1); margin-bottom: 0.8rem; }
.prose p { font-size: 0.96rem; line-height: 1.78; color: var(--body); }

/* ------------------------------------------------------------- footer */
.footer { background: var(--navy-deep); color: rgba(255, 255, 255, 0.6); padding-block: clamp(52px, 6vw, 84px) 2rem; font-size: 0.88rem; }
.footer__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr));
  gap: clamp(28px, 4vw, 54px);
  padding-bottom: clamp(36px, 4vw, 56px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
.footer .brand__name { color: #fff; font-weight: 900; }
.footer__tagline { margin-top: 1.3rem; max-width: 32ch; line-height: 1.75; }
.footer h4 {
  font-family: var(--sans);
  font-size: 0.68rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #fff;
  font-weight: 500;
  margin-bottom: 1.3rem;
}
.footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.7rem; }
.footer a { color: rgba(255, 255, 255, 0.65); text-decoration: none; transition: color 0.18s ease; }
.footer a:hover { color: var(--gold-light); }
.footer__bottom { padding-top: 1.9rem; display: flex; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; align-items: flex-start; }
.footer__legal { font-size: 0.76rem; line-height: 1.7; max-width: 74ch; color: rgba(255, 255, 255, 0.45); }
.footer__rights { font-size: 0.76rem; color: rgba(255, 255, 255, 0.45); white-space: nowrap; }

/* ------------------------------------------------------------- whatsapp */
.wa-float {
  position: fixed;
  right: 20px; bottom: 20px;
  z-index: 500;
  width: 54px; height: 54px;
  border-radius: 50%;
  background: #1F6F5C;
  color: #fff;
  display: grid;
  place-items: center;
  box-shadow: 0 8px 26px rgba(20, 34, 48, 0.3);
  text-decoration: none;
  transition: transform 0.2s ease;
}
.wa-float:hover { transform: scale(1.07); }
.wa-float svg { width: 27px; height: 27px; }

/* ------------------------------------------------------------- reveal
   Scoped to .js so nothing is hidden when JavaScript is off. */
.js .reveal { opacity: 0; transform: translateY(16px); transition: opacity 0.75s ease, transform 0.75s ease; }
.js .reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .js .reveal { opacity: 1; transform: none; } }

/* ------------------------------------------------------------- responsive */
/* Panama Circle drops to its icon first, the group keeps its label longer */
@media (max-width: 1360px) {
  .header__ig .header__group-text { display: none; }
  .header__ig { padding-inline: 1.1rem; }
}

@media (max-width: 1240px) {
  .header__group-text { display: none; }
  .header__group { padding-inline: 1.1rem; }
}

@media (max-width: 1080px) {
  .stats { grid-template-columns: repeat(2, 1fr); }
  .stats .stat:nth-child(2) { border-right: 0; }
    .stats .stat:nth-child(3),
  .stats .stat:nth-child(4) { border-top: 1px solid rgba(255,255,255,0.18); }
}

@media (max-width: 1000px) {
  .finder__grid, .community__grid, .contact__grid { grid-template-columns: 1fr; }
  .footer__grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 900px) {
  .nav { display: none; }
  .burger { display: block; }
  .nav.is-open {
    display: flex;
    position: fixed;
    inset: 82px 0 auto 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--page);
    border-bottom: 1px solid var(--line);
    padding: 0.5rem var(--gut) 1.5rem;
    box-shadow: 0 20px 40px rgba(20, 34, 48, 0.12);
    max-height: calc(100vh - 82px);
    overflow-y: auto;
  }
  .nav.is-open a { padding: 1rem 0; border-bottom: 1px solid var(--line-soft); font-size: 0.86rem; }
  .nav.is-open a::after { display: none; }
  .nav.is-open .nav__mobile-only { display: block; }
}

@media (max-width: 720px) {
  /* The wordmark is the widest thing in the bar; shrink it so the group
     block and the burger still fit on a 375px screen. */
  .header__inner { gap: 0.6rem; min-height: 68px; }
  .brand__name { font-size: 0.92rem; letter-spacing: 0.015em; font-weight: 900; }
  .brand__sub { font-size: 0.47rem; letter-spacing: 0.14em; }
  .header__right { gap: 0.45rem; }
  .burger { padding: 4px; }
  .burger svg { width: 22px; height: 22px; }
  .nav.is-open { inset-block-start: 68px; max-height: calc(100vh - 68px); }
}

@media (max-width: 700px) {
  .member { flex: 1 1 100%; max-width: none; }
  .team-lead { border-bottom: 0; padding-bottom: 0; max-width: none; margin-bottom: clamp(28px, 6vw, 44px); }
}

/* ---------------------------------------------------- hero on small screens
   A wide photo behind a tall narrow hero loses about 70% of its width to the
   cover crop, leaving a slice through the middle of the sign. Below 900px the
   photo instead runs full width as a band along the bottom, at its own
   proportions, with the headline on navy above it. */
@media (max-width: 900px) {
  .hero {
    min-height: 0;
    display: block;
    padding-block: clamp(38px, 8vw, 60px) calc(67vw + 30px);
  }
  .hero__bg {
    inset: auto 0 0 0;
    height: 67vw;
    background-size: cover;
    background-position: center;
    /* fades up into the navy so the top edge is not a hard seam */
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 24%);
    mask-image: linear-gradient(180deg, transparent 0%, #000 24%);
  }
  .hero::after {
    background: linear-gradient(180deg,
      rgba(13, 22, 33, 0.3) 0%,
      rgba(13, 22, 33, 0.06) 55%,
      rgba(13, 22, 33, 0.3) 100%);
  }
  .hero h1 { max-width: none; }
}

/* portrait placeholder while the photo lazy loads */
.member__portrait { background: var(--mist-2); }

/* ---------------------------------------------------- touch targets
   Everything tappable needs roughly 40px of height on a phone. Several of
   these are visually small by design, so the padding grows rather than the
   type: the link keeps its size, the hit area does not. */
@media (max-width: 900px) {
  .langs a { padding: 0.62em 0.6em; }
  .utility__right a[aria-label] { padding: 0.55rem; margin: -0.55rem -0.3rem; }
  .burger { padding: 10px 13px; }
  .arrowlink { padding-block: 0.72rem; }
  .chip { padding: 1.05em 1.1em; }
  .footer ul a { display: inline-block; padding-block: 0.5rem; }
  .footer ul { gap: 0.2rem; }
  .member__credit a { display: inline-block; padding-block: 0.3rem; }
  /* the wordmark tagline was down at 7.5px, under the legible floor */
  .brand__sub { font-size: 0.58rem; letter-spacing: 0.15em; }
}

@media (max-width: 640px) {
  .header__cta { display: none; }
  .header__ig { min-height: 48px; padding-inline: 0.8rem; }
  .header__group { min-height: 48px; padding-inline: 0.8rem; }
  .form__row { grid-template-columns: 1fr; }
  .footer__grid { grid-template-columns: 1fr; gap: 32px; }
  .header .btn span { display: none; }
  .header .btn { padding: 0.95em 1.1em; }
  .quiz { min-height: 0; }
  .direct__item { flex-direction: column; align-items: flex-start; gap: 0.25rem; }
  .direct__val { text-align: left; }
  .member__portrait { width: 148px; height: 148px; }
}

@media print {
  .header, .utility, .wa-float, .quiz { display: none; }
  body { background: #fff; }
}


/* ------------------------------------------------------ partner logo strip */
.logos {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(14px, 1.6vw, 22px);
  max-width: 1080px;
  margin: clamp(30px, 4vw, 46px) auto 0;
}
.logos__item {
  flex: 0 0 148px;
  width: 148px;
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: var(--page);
  border: 1px solid var(--line);
  text-decoration: none;
  overflow: hidden;
  transition: border-color 0.2s ease, transform 0.2s ease;
}
/* logos that carry their own background block fill the tile edge to edge */
.logos__item--bleed { padding: 0; border-color: transparent; }
.logos__item--bleed img { width: 100%; height: 100%; object-fit: cover; }
.logos__item:hover { border-color: var(--gold); transform: translateY(-3px); }
.logos__item--bleed:hover { border-color: var(--gold); }
.logos__item img { max-width: 100%; max-height: 100%; object-fit: contain; }
.logos__ph {
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--body-light);
  text-align: center;
  line-height: 1.4;
}


/* -------------------------------------- two meetup tracks in the events card */
.tracks { display: flex; flex-direction: column; gap: 1.35rem; margin: 0 0 1.4rem; }
.track + .track { padding-top: 1.35rem; border-top: 1px solid var(--line-soft); }
.track__head { display: flex; align-items: center; gap: 0.7rem; margin-bottom: 0.5rem; }
.track__logo { width: 40px; height: 40px; object-fit: cover; flex: none; }
.track__label {
  font-size: 0.7rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--head);
}
.track__text { margin: 0; font-size: var(--step--1); }
.track .arrowlink { margin-top: 0.75rem; }