/* =============================================================================
   PROs Networking Group — pro-networking.org
   Rebuilt off Duda 2026-09-22. Tokens lifted from the live site, then measured:
   every contrast ratio below was computed, not eyeballed (build-rules.md).

   Live value            Ratio live        Shipped                  Ratio shipped
   gold band + white     1.65:1  FAIL      gold band + ink          10.52:1
   orange btn + white    2.84:1  FAIL      orange btn + ink         6.13:1
   hero panel #75b9da    2.16:1  FAIL      panel darkened #2f6a85   5.96:1
   body gray #646464     5.92:1  OK        unchanged
   heading #463939      11.03:1  OK        unchanged
   ============================================================================= */

@font-face { font-family: 'Poppins'; src: url('/fonts/poppins-300.woff2') format('woff2'); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: 'Poppins'; src: url('/fonts/poppins-400.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Poppins'; src: url('/fonts/poppins-500.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Poppins'; src: url('/fonts/poppins-600.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'Poppins'; src: url('/fonts/poppins-700.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }

/* Fallback metrics so swapping Poppins in does not move a single line break. */
@font-face {
  font-family: 'Poppins Fallback'; src: local('Arial');
  ascent-override: 105%; descent-override: 35%; line-gap-override: 0%; size-adjust: 104.5%;
}

:root {
  --gold:        #fdbf3e;   /* Duda band start */
  --gold-deep:   #b4882c;   /* Duda band end */
  --orange:      #d7872f;   /* Duda rgb(215,135,47) primary button */
  --orange-deep: #a35f14;   /* 4.99:1 on white, for text-on-white uses */
  --teal:        #2f6a85;   /* hero panel, darkened from #3b81a1/#75b9da for AA */
  --teal-light:  #4a96be;
  --red:         #c3002f;   /* Duda check marks, 6.25:1 on white */
  --ink:         #1a1a1a;
  --heading:     #463939;   /* Duda rgb(70,57,57) */
  --body:        #646464;   /* Duda rgb(100,100,100), 5.92:1 on white */
  --muted:       #767676;
  --band:        #f9f9f9;   /* Duda rgb(249,249,249) */
  --band-cool:   #f8f9fc;   /* Duda rgb(248,249,252) */
  --line:        #e4e4e4;
  --white:       #fff;
  --link:        #15607d;   /* 7.00:1 on white */
  --radius:      10px;
  --shadow:      0 2px 10px rgba(0,0,0,.08);
  --shadow-lg:   0 10px 30px rgba(0,0,0,.12);
  --container:   1200px;
  --measure:     900px;
  --font: 'Poppins', 'Poppins Fallback', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
/* .btn sets display:inline-block, which outranks the UA's [hidden] rule and
   left the submit button visible on step one of the Thank You form. */
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }
body {
  margin: 0; font-family: var(--font); font-weight: 300; font-size: 16px;
  line-height: 1.75; color: var(--body); background: var(--white);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
h1, h2, h3, h4, h5, h6 { font-family: var(--font); color: var(--heading); margin: 0 0 .6em; line-height: 1.25; font-weight: 600; }
h1 { font-size: clamp(1.9rem, 4vw, 2.6rem); }
h2 { font-size: clamp(1.5rem, 3vw, 2rem); }
h3 { font-size: clamp(1.15rem, 2.2vw, 1.4rem); }
h4 { font-size: 1.05rem; }
p { margin: 0 0 1.1em; }
a { color: var(--link); }
/* Underline links only where they sit inside running copy. Excluding cards by
   class silently missed .avatar-card and underlined 31 names on /about. */
main p a, main li a, main .blog-article a, main figcaption a, main .contact-list a {
  text-decoration: underline; text-underline-offset: 2px;
}
main p a.btn, main li a.btn { text-decoration: none; }
.container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 24px; }
.container.narrow { max-width: var(--measure); }
.skip-link { position: absolute; left: -9999px; }
.skip-link:focus { left: 12px; top: 12px; z-index: 100; background: var(--white); color: var(--ink); padding: 10px 16px; border-radius: 6px; }
:focus-visible { outline: 3px solid var(--teal); outline-offset: 2px; }

/* ------------------------------------------------------------------ buttons */
.btn {
  display: inline-block; padding: 12px 26px; border-radius: 999px;
  font-weight: 500; font-size: .95rem; text-decoration: none; border: 2px solid transparent;
  background: var(--orange); color: var(--ink);   /* ink label: white was 2.84:1 */
  transition: background .18s ease, color .18s ease, border-color .18s ease;
}
.btn:hover { background: var(--orange-deep); color: var(--white); }
.btn--outline { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn--outline:hover { background: var(--ink); color: var(--white); }
.btn--light { background: var(--white); color: var(--ink); border-color: var(--white); }
.btn--light:hover { background: transparent; color: var(--white); border-color: var(--white); }
/* Third button on the hero panel. A BARE outline fails here: the panel is a
   gradient and the buttons sit at its light end (#4a96be), where a white label
   measures 3.28:1. The translucent ink fill takes it to 5.42:1 while still
   reading as the quieter of the three. (.btn--outline is wrong on this panel
   too - its ink label on teal is 2.2:1.) */
.btn--outline-light {
  background: rgba(0, 0, 0, .25); color: var(--white); border-color: rgba(255, 255, 255, .8);
}
.btn--outline-light:hover { background: var(--white); color: var(--ink); border-color: var(--white); }
.btn-row { display: flex; flex-wrap: wrap; gap: 14px; margin: 1.4em 0 0; }
.section--center .btn-row { justify-content: center; }

/* ------------------------------------------------------------------- header */
.site-header { position: sticky; top: 0; z-index: 50; background: var(--white); border-bottom: 1px solid var(--line); }
.site-header > .container { display: flex; align-items: center; gap: 14px; min-height: 76px; flex-wrap: nowrap; }
.logo { display: block; flex: none; }
.logo img { width: 150px; height: auto; }
.nav { margin-left: auto; display: flex; align-items: center; gap: 10px; min-width: 0; }
.nav__list { display: flex; align-items: center; gap: 4px; list-style: none; margin: 0; padding: 0; }
.nav__item { position: relative; }
.nav__link {
  display: inline-block; padding: 10px 10px; color: var(--heading); text-decoration: none;
  font-size: .88rem; font-weight: 400; white-space: nowrap; border-bottom: 2px solid transparent;
}
.nav__link:hover { color: var(--orange-deep); }
.nav__link.is-active { border-bottom-color: var(--orange); color: var(--ink); font-weight: 500; }
.nav__toggle { display: none; }
.nav__sub {
  position: absolute; left: 0; top: 100%; min-width: 250px; list-style: none; margin: 0; padding: 8px 0;
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-lg);
  opacity: 0; visibility: hidden; transform: translateY(6px); transition: all .16s ease;
}
.nav__item:hover .nav__sub, .nav__item:focus-within .nav__sub { opacity: 1; visibility: visible; transform: none; }
.nav__sub a { display: block; padding: 8px 18px; font-size: .88rem; color: var(--heading); text-decoration: none; }
.nav__sub a:hover { background: var(--band); color: var(--orange-deep); }
.header-cta { flex: none; display: flex; align-items: center; gap: 12px; }
.header-cta .btn { padding: 10px 18px; font-size: .85rem; white-space: nowrap; }

/* Member login. Labelled on desktop, icon-only in the mobile bar so it is one
   tap away without opening the menu. */
.login-link {
  display: inline-flex; align-items: center; gap: 7px; white-space: nowrap;
  font-size: .85rem; font-weight: 500; color: var(--heading); text-decoration: none;
  padding: 8px 2px; border-bottom: 2px solid transparent;
}
.login-link:hover { color: var(--orange-deep); border-bottom-color: var(--orange); }
.login-link svg { width: 18px; height: 18px; }
.login-icon {
  display: none; place-items: center; flex: none; width: 42px; height: 42px;
  border-radius: 50%; color: var(--heading); text-decoration: none;
}
.login-icon:hover { background: var(--band); color: var(--orange-deep); }
.login-icon svg { width: 22px; height: 22px; }
@media (max-width: 1240px) and (min-width: 1041px) {
  .logo img { width: 120px; }
  .nav__link { padding: 10px 7px; font-size: .84rem; }
  .header-cta .btn { padding: 9px 14px; font-size: .8rem; }
}
.burger { display: none; background: none; border: 0; padding: 8px; cursor: pointer; color: var(--heading); }
.burger svg { width: 26px; height: 26px; }

/* --------------------------------------------------------------------- hero */
/* min-height sets how much photo is visible; the padding on .hero__inner is
   what keeps the panel off the nav and off the next section. Without that
   padding the panel grows to exactly the hero's height and touches both. */
.hero { position: relative; display: flex; align-items: center; min-height: 680px; overflow: hidden; }
.hero__media { position: absolute; inset: 0; }
.hero__media img { width: 100%; height: 100%; object-fit: cover; }
.hero::after { content: ''; position: absolute; inset: 0; background: rgba(0,0,0,.25); }
.hero__inner { position: relative; z-index: 2; padding-top: 72px; padding-bottom: 72px; }
.hero__panel {
  max-width: 520px; padding: 38px 40px; border-radius: 4px; color: var(--white);
  background: linear-gradient(135deg, var(--teal) 0%, var(--teal-light) 100%);
}
.hero__panel h1 { color: var(--white); font-weight: 600; }
.hero__panel p { color: var(--white); margin-bottom: 0; }
.hero__panel .btn-row { margin-top: 1.6em; }
.hero--banner { min-height: 0; padding: 0; }

/* ---- Home hero: panel overhangs the photo ----------------------------------
   The photo is a fixed-height band; the panel sits over it and hangs past its
   bottom edge into the white below, which is how the original site read. The
   panel is translucent so the room shows through it.

   Two things that have to stay in step:
   - .hero--home must NOT clip (the overhang is the point), so overflow is
     visible and the stacking is done with grid rather than absolute insets.
   - the section AFTER it carries extra top padding equal to the overhang, or
     the mission copy collides with the panel. */
.hero--home {
  /* align-items:end anchors the panel to the photo's BOTTOM edge, so the
     overhang below is a fixed distance no matter how tall the panel grows.
     Anchoring from the top instead made the overhang depend on the button
     count, and with three buttons it vanished entirely. */
  display: grid; min-height: 0; overflow: visible; align-items: end;
}
.hero--home > * { grid-area: 1 / 1; }
.hero--home .hero__media { position: relative; inset: auto; height: 620px; }
.hero--home::after { display: none; }            /* no dark wash: the panel carries the contrast */
.hero--home .hero__inner { padding-top: 40px; padding-bottom: 0; z-index: 2; }
.hero--home .hero__panel {
  /* Translucent, so the room reads through it - but the room contains a bright
     window and white walls. Measured on the rendered pixels: with tint alone
     the median behind the heading was 6.0:1 while the lightest 2% fell to
     1.6:1, i.e. white text over the window was unreadable. backdrop-filter
     floors the photo's luminance BEFORE the tint composites, which keeps the
     see-through effect and removes the bright patches.
     .44 rather than .48 since the wide room shot replaced the closer one: that
     photo puts the bright left wall behind the panel, and .48 left the tablet
     width sitting exactly on 4.50:1. Worst text row by viewport now, 99.5th
     percentile of the background with glyphs and their halos masked out:
     1440 5.15, 1200 5.21, 768 4.68, 390 4.98, 320 5.10. Re-measure after any
     change of hero photo; none of this is safe to assume. */
  background: linear-gradient(135deg, rgba(31, 90, 117, .80) 0%, rgba(62, 134, 173, .72) 100%);
  backdrop-filter: brightness(.44) saturate(1.15);
  -webkit-backdrop-filter: brightness(.44) saturate(1.15);
  box-shadow: 0 18px 44px rgba(0, 0, 0, .28);
  border-radius: 6px;
  /* The bottom padding is >= the overhang on purpose, so the part of the panel
     hanging over the white below is empty blue rather than a button floating
     off the photo. */
  padding: 44px 46px 84px;
  max-width: none;          /* the wrap carries the width now */
  width: 100%;
}
/* The overhang's backdrop is the white section below, not the photo, and
   brightness(.48) turns white into mid grey - so the hanging part rendered a
   visibly lighter blue than the rest of the panel, a ~24-per-channel step
   measured on the live page. The wrap is the panel's PARENT, so its background
   is part of what backdrop-filter samples; a dark footing in its bottom 72px
   gives the overhang the same backdrop luminance the photo gives the rest.
   A pseudo-element on the panel cannot do this: negative-z children paint
   above the element's own background, not into its backdrop. */
.hero--home .hero__panelwrap {
  max-width: 600px;
  margin-bottom: -72px;                           /* the overhang */
  border-radius: 6px;                             /* match, or the corners poke out */
  background: linear-gradient(to top, #2e2e2e 72px, transparent 72px);
}
/* Where backdrop-filter is unavailable the photo cannot be darkened in place,
   so fall back to a near-opaque tint rather than shipping unreadable text. */
@supports not ((backdrop-filter: brightness(.5)) or (-webkit-backdrop-filter: brightness(.5))) {
  .hero--home .hero__panel {
    background: linear-gradient(135deg, rgba(27, 80, 104, .97) 0%, rgba(52, 116, 150, .96) 100%);
  }
}
.hero--home + .section { padding-top: 136px; }    /* 72 overhang + the usual 64 */
.hero--banner .hero__inner { padding-top: 0; padding-bottom: 0; }
.page-banner {
  background: linear-gradient(90deg, var(--gold) 0%, var(--gold-deep) 100%);
  padding: 54px 0; text-align: center;
}
.page-banner h1 { color: var(--ink); margin: 0; }   /* white here is 1.65:1 */
.page-banner p { color: var(--ink); margin: .4em 0 0; opacity: .85; }

/* ----------------------------------------------------------------- sections */
.section { padding: 64px 0; }
.section--band { background: var(--band); }
.section--cool { background: var(--band-cool); }
.section--gold { background: linear-gradient(90deg, var(--gold) 0%, var(--gold-deep) 100%); }
.section--gold h2, .section--gold h3, .section--gold p { color: var(--ink); }
.section--center { text-align: center; }
.section--tight { padding: 40px 0; }
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
.split--top { align-items: start; }
.split--media-first > :first-child { order: -1; }
.split--narrow { grid-template-columns: 1fr 1.6fr; }
.grid--2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 32px; }
.grid--3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
.grid--4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; }
.media { border-radius: var(--radius); overflow: hidden; }
.media--cover img { width: 100%; height: 100%; object-fit: cover; }
.section__media img { width: 100%; height: 100%; object-fit: cover; }

/* mission block: logo beside copy, as live */
.mission { display: grid; grid-template-columns: 170px 1fr; gap: 40px; align-items: start; }
.mission img { width: 150px; }

/* numbered value blocks (About) */
.values { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px 48px; margin-top: 2.4em; }
.value__num {
  display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%;
  background: var(--gold); color: var(--ink); font-weight: 600; font-size: .95rem; margin-bottom: 14px;
}
.value h3 { font-size: 1rem; margin-bottom: .4em; }
.value p { margin: 0; font-size: .95rem; }

/* stat counters */
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 2.2em; }
.stat__num { font-size: clamp(2rem, 4vw, 2.6rem); font-weight: 600; color: var(--heading); line-height: 1; }
.stat__label { font-size: .9rem; color: var(--muted); margin: .5em 0 0; }

/* what-we-offer check list */
.checks { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px 32px; margin: 1.2em 0 0; padding: 0; list-style: none; }
.checks li { display: flex; gap: 10px; align-items: baseline; color: var(--red); font-size: .95rem; }
.checks li::before { content: '\2713'; font-weight: 600; }

/* quote band */
.quote { max-width: 780px; margin: 0 auto; text-align: left; }
.quote__mark { font-size: 3.4rem; line-height: 1; color: var(--red); font-weight: 700; }
.quote p { font-size: clamp(1.05rem, 2vw, 1.35rem); color: var(--heading); font-weight: 400; line-height: 1.55; }
.quote__by { display: flex; align-items: center; gap: 14px; margin-top: 1.4em; }
.quote__by img { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; }
.quote__by span { font-size: .9rem; color: var(--muted); }

/* ------------------------------------------------------------ member cards */
.member-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 26px; }
.member-card {
  display: flex; flex-direction: column; background: var(--white); border: 1px solid var(--line);
  border-radius: var(--radius); overflow: hidden; text-decoration: none; color: inherit;
  transition: transform .18s ease, box-shadow .18s ease;
}
.member-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.member-card img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; }
.member-card__body { padding: 16px 18px 20px; text-align: center; }
.member-card__name { font-weight: 600; color: var(--heading); font-size: 1rem; margin: 0 0 .25em; line-height: 1.3; }
.member-card__biz { font-size: .82rem; color: var(--muted); margin: 0 0 14px; min-height: 2.2em; }
.member-card__cta { display: inline-block; font-size: .78rem; padding: 7px 16px; border: 1px solid var(--line); border-radius: 999px; color: var(--ink); }
.member-card:hover .member-card__cta { border-color: var(--orange); background: var(--orange); }

/* round avatar grid (About "team" strip, member profile footer) */
.avatar-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 30px 20px; }
.avatar-grid--3 { grid-template-columns: repeat(3, 1fr); }
.avatar-card { text-align: center; text-decoration: none; color: inherit; }
.avatar-card img { width: 100%; max-width: 150px; margin: 0 auto 12px; aspect-ratio: 1 / 1; border-radius: 50%; object-fit: cover; }
.avatar-card__name { font-size: .9rem; font-weight: 600; color: var(--heading); margin: 0 0 .15em; line-height: 1.3; }
.avatar-card__biz { font-size: .78rem; color: var(--muted); }

/* ------------------------------------------------------- member profile page */
.profile { display: grid; grid-template-columns: 340px 1fr; gap: 52px; align-items: start; }
.profile__photo img { width: 100%; aspect-ratio: 1 / 1; border-radius: 50%; object-fit: cover; }
.profile__social { display: flex; gap: 14px; justify-content: center; margin-top: 18px; }
.profile__social a { font-size: .9rem; }
.profile h1 { margin-bottom: .1em; }
.profile__biz { font-size: 1.2rem; color: var(--heading); font-weight: 500; margin: 0 0 1em; padding-bottom: 1em; border-bottom: 1px solid var(--line); }
.profile__facts { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
.profile__facts li { display: flex; align-items: center; gap: 16px; font-size: .95rem; }
.profile__facts svg { width: 22px; height: 22px; flex: none; color: var(--heading); }
.refer { text-align: center; padding-top: 8px; }
.refer p { font-size: .95rem; color: var(--muted); }
.refer__links { display: flex; justify-content: center; gap: 14px; }
.refer__links a {
  display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%;
  background: var(--ink); color: var(--white);
}
.refer__links svg { width: 19px; height: 19px; }
.about-block { display: grid; grid-template-columns: 180px 1fr; gap: 36px; align-items: start; }
.about-block h2 { margin: 0; }
.about-block > div { border-left: 2px solid var(--line); padding-left: 32px; }

/* ------------------------------------------------------------- seat cards */
.seat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }
.seat-card {
  display: flex; flex-direction: column; background: var(--white); border: 1px solid var(--line);
  border-radius: var(--radius); overflow: hidden; text-decoration: none; color: inherit;
  transition: transform .18s ease, box-shadow .18s ease;
}
.seat-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.seat-card img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.seat-card__body { padding: 20px; text-align: center; }
.seat-card__title { font-weight: 600; font-size: 1.05rem; color: var(--heading); margin: 0 0 14px; }
.seat-card__cta { display: inline-block; font-size: .8rem; padding: 8px 20px; border: 1px solid var(--orange); border-radius: 999px; color: var(--ink); }
.seat-card:hover .seat-card__cta { background: var(--orange); }

/* icon feature cards (open-seats) */
.feature { text-align: center; }
.feature__icon { display: grid; place-items: center; width: 62px; height: 62px; margin: 0 auto 18px; border-radius: 50%; background: var(--band); color: var(--heading); }
.feature__icon svg { width: 28px; height: 28px; }
.feature h3 { margin-bottom: .5em; }

/* --------------------------------------------------------- contact details */
.contact-list { list-style: none; margin: 1.6em 0 0; padding: 0; display: grid; gap: 22px; }
.contact-list li { display: flex; gap: 18px; align-items: flex-start; }
.contact-list a { color: var(--link); }
.icon-badge { display: grid; place-items: center; flex: none; width: 46px; height: 46px; border-radius: 50%; background: var(--red); color: var(--white); }
.icon-badge svg { width: 20px; height: 20px; }
.map-embed { border: 0; width: 100%; height: 380px; display: block; filter: grayscale(.25); }

/* -------------------------------------------------------------------- forms */
.form { max-width: 560px; }
.form-fields { display: grid; gap: 16px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.field { display: grid; gap: 6px; }
.field label { font-size: .85rem; color: var(--heading); font-weight: 500; }
.field input, .field textarea, .field select {
  width: 100%; padding: 11px 14px; font: inherit; font-size: .95rem; color: var(--ink);
  background: var(--band); border: 1px solid var(--line); border-radius: 6px;
}
.field textarea { min-height: 120px; resize: vertical; }
.field input:focus, .field textarea:focus, .field select:focus { background: var(--white); border-color: var(--teal); outline: none; box-shadow: 0 0 0 3px rgba(47,106,133,.18); }
.form .btn { justify-self: start; cursor: pointer; }
.form-note { font-size: .82rem; color: var(--muted); margin: 0; }
.form-success { display: none; padding: 20px 22px; border-radius: var(--radius); background: #eef7ee; border: 1px solid #cbe4cb; color: #1f5c1f; }
.form-success.show { display: block; }
.form-send-error { margin: 14px 0 0; }
.consent { display: flex; gap: 10px; align-items: flex-start; font-size: .85rem; color: var(--muted); }
fieldset { border: 0; margin: 0; padding: 0; }
legend { font-size: .85rem; font-weight: 500; color: var(--heading); padding: 0 0 8px; }
.radio-row { display: flex; flex-wrap: wrap; gap: 10px; }
.radio-chip { display: inline-flex; align-items: center; gap: 8px; padding: 9px 18px; border: 1px solid var(--line); border-radius: 999px; font-size: .9rem; cursor: pointer; background: var(--white); }
.radio-chip:has(input:checked) { border-color: var(--orange); background: #fdf3e6; color: var(--ink); }
.step { display: none; }
.step.is-current { display: grid; gap: 16px; }
.step-head { font-size: .8rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin: 0; }
.step-nav { display: flex; gap: 12px; flex-wrap: wrap; }

/* --------------------------------------------------------------------- blog */
.blog-filters { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-bottom: 40px; }
.filter-btn { padding: 8px 20px; border: 1px solid var(--line); background: var(--white); border-radius: 999px; font: inherit; font-size: .85rem; color: var(--heading); cursor: pointer; }
.filter-btn:hover { border-color: var(--orange); }
.filter-btn.active { background: var(--orange); border-color: var(--orange); color: var(--ink); font-weight: 500; }
.blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
.post-card { display: flex; flex-direction: column; text-decoration: none; color: inherit; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; transition: transform .18s ease, box-shadow .18s ease; }
.post-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.post-card-thumb img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.post-card-body { padding: 20px 22px 24px; display: flex; flex-direction: column; flex: 1; }
.post-card-cat { font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; color: var(--orange-deep); font-weight: 600; margin-bottom: 10px; }
.post-card-title { font-weight: 600; font-size: 1.05rem; color: var(--heading); line-height: 1.35; margin: 0 0 10px; }
.post-card-desc { font-size: .88rem; margin: 0 0 16px; }
.post-card-meta { font-size: .8rem; color: var(--muted); margin-top: auto; }

.blog-post-hero { padding: 48px 24px 8px; max-width: 1100px; margin: 0 auto; }
.blog-post-hero img { width: 100%; max-height: 460px; object-fit: cover; border-radius: 12px; margin-bottom: 28px; }
.blog-post-hero-content { max-width: 900px; }
.blog-post-cat { display: inline-block; padding: 5px 16px; border-radius: 999px; background: var(--gold); color: var(--ink); font-size: .75rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; margin-bottom: 16px; }
.blog-post-hero-content h1 { font-size: clamp(1.7rem, 3.6vw, 2.5rem); }
.post-meta { font-size: .9rem; color: var(--muted); display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.post-meta-dot { width: 4px; height: 4px; border-radius: 50%; background: currentColor; opacity: .4; }
.blog-post-wrap { display: grid; grid-template-columns: minmax(0,1fr) 320px; gap: 52px; max-width: 1100px; margin: 0 auto; padding: 28px 24px 64px; }
.blog-article { font-size: 1.02rem; line-height: 1.8; }
.blog-article h2 { font-size: 1.55rem; margin: 2.4em 0 .7em; }
.blog-article h3 { font-size: 1.22rem; margin: 2em 0 .6em; }
.blog-article img { border-radius: var(--radius); margin: 1.6em 0; }
.blog-article video { width: 100%; border-radius: var(--radius); margin: 1.6em 0; }
.blog-article ul, .blog-article ol { margin: 0 0 1.25em 1.3em; padding: 0; }
.blog-article li { margin-bottom: .5em; }
.post-figure { margin: 1.8em 0; }
.post-figure img { display: block; width: 100%; height: auto; margin: 0; }
.post-figure figcaption {
  margin-top: .6em; font-size: .9rem; line-height: 1.5; color: var(--muted);
}
/* A phone portrait at the full 680px column is 900px tall and swallows the
   article. Cap the tall ones and centre them; landscape shots still run full
   width. */
.post-figure--portrait img { max-width: 460px; margin-inline: auto; }
.post-figure--portrait figcaption { max-width: 460px; margin-inline: auto; }
.blog-article blockquote { margin: 1.6em 0; padding: 4px 0 4px 22px; border-left: 3px solid var(--gold); color: var(--heading); font-style: italic; }
.blog-sidebar { display: flex; flex-direction: column; gap: 22px; }
.sidebar-card { border: 1px solid var(--line); border-radius: var(--radius); padding: 22px; }
.sidebar-head { font-weight: 600; color: var(--heading); margin-bottom: 12px; }
.sidebar-body { display: flex; flex-direction: column; }
.sidebar-link { display: block; padding: 10px 0; font-size: .88rem; border-bottom: 1px solid var(--line); text-decoration: none; color: var(--heading); }
.sidebar-link:last-child { border-bottom: none; }
.sidebar-link:hover { color: var(--orange-deep); }
.sidebar-cta { border-radius: var(--radius); padding: 26px 22px; background: var(--band); text-align: center; }
.sidebar-cta-title { font-weight: 600; color: var(--heading); margin-bottom: .5em; }
.sidebar-cta p { font-size: .9rem; }

/* ------------------------------------------------------------------- footer */
.site-footer { background: var(--white); border-top: 1px solid var(--line); padding: 54px 0 34px; }
.footer-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 40px; align-items: start; }
.site-footer img.footer-logo { width: 150px; }
.site-footer h3 { font-size: .95rem; margin-bottom: .8em; }
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { margin-bottom: 8px; font-size: .9rem; }
.site-footer a { color: var(--body); text-decoration: none; }
.site-footer a:hover { color: var(--orange-deep); }
.socials { display: flex; gap: 14px; margin-top: 18px; }
.socials a { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; color: var(--heading); }
.socials a:hover { background: var(--band); }
.socials svg { width: 19px; height: 19px; }
.footer-bottom { margin-top: 34px; padding-top: 22px; border-top: 1px solid var(--line); text-align: center; font-size: .82rem; color: var(--muted); }
.footer-bottom a { color: var(--muted); }

/* --------------------------------------------------------------- responsive */
@media (max-width: 1024px) {
  .member-grid { grid-template-columns: repeat(3, 1fr); }
  .avatar-grid { grid-template-columns: repeat(4, 1fr); }
  .blog-grid { grid-template-columns: repeat(2, 1fr); }
  .blog-post-wrap { grid-template-columns: 1fr; gap: 36px; }
  .values { grid-template-columns: repeat(2, 1fr); }
}
/* Nav collapses to the burger below 1041px: with the member-login link added
   the full bar no longer fits a ~900px viewport without the page scrolling
   sideways. */
@media (max-width: 1040px) {
  .site-header > .container { min-height: 66px; }
  .burger { display: block; margin-left: auto; }
  .nav {
    position: fixed; inset: 66px 0 auto; margin: 0; background: var(--white);
    border-bottom: 1px solid var(--line); box-shadow: var(--shadow-lg);
    max-height: calc(100vh - 66px); overflow-y: auto; padding: 12px 0 22px;
    display: none;
  }
  .nav.is-open { display: block; }
  .nav__list { flex-direction: column; align-items: stretch; gap: 0; padding: 0 24px; }
  .nav__item { border-bottom: 1px solid var(--line); }
  .nav__link { padding: 14px 0; font-size: 1rem; width: 100%; border-bottom: 0; }
  .nav__link.is-active { color: var(--orange-deep); }
  .nav__toggle { display: inline-grid; place-items: center; position: absolute; right: 0; top: 6px; width: 40px; height: 40px; background: none; border: 0; cursor: pointer; color: var(--heading); }
  .nav__toggle svg { width: 18px; height: 18px; transition: transform .18s ease; }
  .nav__item.is-open .nav__toggle svg { transform: rotate(180deg); }
  .nav__sub { position: static; opacity: 1; visibility: visible; transform: none; border: 0; box-shadow: none; padding: 0 0 10px 14px; display: none; min-width: 0; }
  .nav__item.is-open .nav__sub { display: block; }
  .nav .header-cta { padding: 18px 24px 0; flex-direction: column; align-items: stretch; gap: 14px; }
  .nav .header-cta .login-link { justify-content: center; border: 1px solid var(--line); border-radius: 999px; padding: 11px 18px; }
  .nav .header-cta .login-link:hover { border-color: var(--orange); }
  .login-icon { display: grid; }
  .burger { margin-left: 0; }
}

/* Layout stacking stays at 900px. The nav collapses earlier (above) because of
   its own width; two-column sections are still comfortable at 1000px. */
@media (max-width: 900px) {
  .split, .split--narrow, .grid--2, .grid--3, .grid--4, .mission, .profile, .about-block, .seat-grid, .stats { grid-template-columns: 1fr; gap: 28px; }
  .about-block > div { border-left: 0; padding-left: 0; }
  .section { padding: 48px 0; }
  .hero { min-height: 560px; }
  .hero__inner { padding-top: 48px; padding-bottom: 48px; }
  .hero__panel { padding: 30px 26px; }
  /* Home hero, narrow: the overhang is a desktop device. Kept at this width it
     reads as an empty blue band under the photo, because the panel is nearly
     the full column and the part hanging past the photo has only white behind
     it - which the backdrop-filter renders a visibly lighter blue. So drop the
     overhang, let the photo fill the whole hero, and put the panel on top of
     it the way a normal mobile hero works. */
  /* .hero.hero--home, not .hero--home: the `.hero { min-height }` rules in
     this block and the 720 one are equally specific and come later, so a
     single-class selector loses and the photo gets forced taller than the
     panel - up to 220px of empty room below it at tablet widths. */
  .hero.hero--home { min-height: 0; align-items: stretch; overflow: hidden; }
  .hero--home .hero__media { position: absolute; inset: 0; height: auto; }
  /* The hero photo is a 2.7:1 room shot and this box is portrait, so cover
     keeps only a narrow column of it. Centred, that column is the empty
     floor between the tables; pushed right it is the people. */
  .hero--home .hero__media img { object-position: 78% 50%; }
  .hero--home .hero__inner { padding-top: 40px; padding-bottom: 40px; }
  .hero--home .hero__panel { padding: 32px 26px 34px; }
  .hero--home .hero__panelwrap { max-width: none; margin-bottom: 0; background: none; }
  .hero--home + .section { padding-top: 48px; }
  .footer-grid { grid-template-columns: 1fr; gap: 30px; text-align: center; }
  .socials { justify-content: center; }
  .contact-list li { text-align: left; }
}
@media (max-width: 720px) {
  .hero { min-height: 520px; }
  .hero__inner { padding-top: 36px; padding-bottom: 36px; }
  .member-grid { grid-template-columns: repeat(2, 1fr); }
  .avatar-grid { grid-template-columns: repeat(3, 1fr); }
  .blog-grid { grid-template-columns: 1fr; }
  .values, .checks, .form-row { grid-template-columns: 1fr; }
  .mission { gap: 20px; }
  .mission img { margin: 0 auto; }
}

/* reveal, fail-safe: hidden only once JS adds the class, hero excluded */
.js-reveal .reveal-init { opacity: 0; transform: translateY(14px); }
.reveal-in { opacity: 1 !important; transform: none !important; transition: opacity .5s ease, transform .5s ease; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js-reveal .reveal-init { opacity: 1; transform: none; }
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ------------------------------------------------------- member help page --
   Numbered walkthrough with a real screenshot under each step. The images are
   captures of the live portal, so they are wide and detailed: full-bleed to
   the measure, with a border so a white UI does not bleed into a white page. */
.help-toc { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 1.5em; }
.help-toc a {
  border: 1px solid var(--line); border-radius: 999px; padding: 8px 16px;
  font-size: .94rem; text-decoration: none; background: var(--white);
}
.help-toc a:hover { border-color: var(--orange); }
.help-steps { list-style: none; margin: 0; padding: 0; counter-reset: help; }
.help-step { counter-increment: help; margin: 0 0 2.6em; }
.help-step h3 { display: flex; align-items: baseline; gap: 12px; margin: 0 0 .5em; }
.help-step h3::before {
  content: counter(help);
  flex: 0 0 auto; width: 30px; height: 30px; border-radius: 50%;
  background: var(--teal); color: var(--white);
  font-size: .88rem; font-weight: 600; line-height: 30px; text-align: center;
}
.help-step > p, .help-step > ul { margin-left: 42px; }
.help-shot { margin: 1.1em 0 0 42px; }
.help-shot img {
  display: block; width: 100%; height: auto;
  border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.help-shot--phone { margin-left: 0; max-width: 300px; }
@media (max-width: 720px) {
  .help-step > p, .help-step > ul, .help-shot { margin-left: 0; }
  .help-step h3::before { width: 26px; height: 26px; line-height: 26px; }
}