/* ============================================================
   KEYSTONE BUSINESS NETWORK — DESIGN TOKENS
   Gold   #C79A2D   Charcoal #2D3436   White #FFFFFF
   Every other value below is a tint/shade of those three —
   no additional hues are introduced anywhere in this file.
   ============================================================ */
:root{
  --gold:        #C79A2D;
  --gold-soft:   #E7D4A1;
  --gold-dim:    #8A6B1F;
  --charcoal:    #2D3436;
  --charcoal-90: #1B1F20;
  --charcoal-70: #454C4E;
  --charcoal-40: #8C9294;
  --charcoal-15: #DADDDE;
  --ivory:       #FAFAF8;
  --white:       #FFFFFF;

  --serif: 'Playfair Display', Georgia, serif;
  --sans:  'Inter', -apple-system, sans-serif;

  --container: 1240px;
  --gutter: clamp(24px, 6vw, 96px);
  --ease: cubic-bezier(.22,.61,.36,1);
}

*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *{animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important;}
}
body{
  font-family:var(--sans);
  color:var(--charcoal);
  background:var(--ivory);
  line-height:1.6;
  font-weight:300;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
a{color:inherit; text-decoration:none;}
img{max-width:100%; display:block;}
button{font-family:inherit; cursor:pointer;}
:focus-visible{outline:2px solid var(--gold); outline-offset:3px;}

h1,h2,h3,h4{
  font-family:var(--serif);
  font-weight:500;
  line-height:1.12;
  letter-spacing:-0.01em;
  color:var(--charcoal-90);
}
.eyebrow{
  font-family:var(--sans);
  font-size:.72rem;
  letter-spacing:.28em;
  text-transform:uppercase;
  color:var(--gold-dim);
  font-weight:500;
  display:flex;
  align-items:center;
  gap:14px;
}
.eyebrow::before{content:'';width:34px;height:1px;background:var(--gold);display:inline-block;}

.wrap{max-width:var(--container); margin:0 auto; padding-left:var(--gutter); padding-right:var(--gutter);}
.section{padding:min(14vw,150px) 0;}
.section-tight{padding:min(9vw,96px) 0;}

/* ---------- reveal-on-scroll ---------- */
.reveal{opacity:0; transform:translateY(28px); transition:opacity 1s var(--ease), transform 1.1s var(--ease);}
.reveal.in{opacity:1; transform:translateY(0);}
.reveal-delay-1.in{transition-delay:.12s;}
.reveal-delay-2.in{transition-delay:.24s;}
.reveal-delay-3.in{transition-delay:.36s;}

/* ---------- gold hairline divider (signature motif) ---------- */
.hairline{width:100%; height:1px; background:linear-gradient(90deg, transparent, var(--charcoal-15) 12%, var(--charcoal-15) 88%, transparent);}
.hairline-gold{height:1px; background:linear-gradient(90deg, transparent, var(--gold) 50%, transparent);}

/* ---------- "photography" placeholder panels ----------
   Duotone charcoal/gold gradient standing in for premium
   editorial photography. Swap any .photo element's
   background-image for licensed brand photography. */
.photo{
  position:relative;
  background:
    radial-gradient(120% 140% at 15% 10%, rgba(199,154,45,.35), transparent 55%),
    linear-gradient(155deg, var(--charcoal-90) 0%, var(--charcoal) 55%, var(--charcoal-70) 100%);
  overflow:hidden;
}
.photo::after{
  content:'';
  position:absolute; inset:0;
  background-image:
    repeating-linear-gradient(115deg, rgba(255,255,255,.035) 0 2px, transparent 2px 6px);
  mix-blend-mode:overlay;
}
.photo-arch{
  position:absolute; inset:0; display:flex; align-items:flex-end; justify-content:center;
  opacity:.5;
}
.photo-caption{
  position:absolute; left:24px; bottom:20px;
  font-size:.68rem; letter-spacing:.18em; text-transform:uppercase;
  color:rgba(255,255,255,.55);
}

/* ============ NAV ============ */
header{
  position:fixed; top:0; left:0; right:0; z-index:100;
  padding:26px 0;
  transition:background .5s var(--ease), padding .5s var(--ease), box-shadow .5s var(--ease);
}
header .wrap{display:flex; align-items:center; justify-content:space-between;}
header.solid{
  background:rgba(255,255,255,.92);
  backdrop-filter:blur(14px);
  padding:16px 0;
  box-shadow:0 1px 0 var(--charcoal-15);
}
.logo{
  font-family:var(--serif); font-size:1.3rem; letter-spacing:.04em;
  color:var(--white); display:flex; align-items:center; gap:10px;
  transition:color .5s var(--ease);
}
header.solid .logo{color:var(--charcoal-90);}
.logo-img{width:150px;height:auto;max-height:54px;object-fit:contain;}
.logo .mark{width:15px;height:15px;}
.logo .mark path{stroke:var(--gold); fill:none; stroke-width:1.4;}
.logo b{font-weight:600;}
.logo span{font-family:var(--sans); font-size:.62rem; letter-spacing:.24em; color:var(--gold); display:block; font-weight:500; text-transform:uppercase;}

nav ul{list-style:none; display:flex; gap:38px; align-items:center;}
nav a{
  font-size:.82rem; letter-spacing:.03em; color:rgba(255,255,255,.85);
  position:relative; padding-bottom:4px; transition:color .5s var(--ease);
}
header.solid nav a{color:var(--charcoal-70);}
nav a::after{content:'';position:absolute; left:0; right:100%; bottom:0; height:1px; background:var(--gold); transition:right .4s var(--ease);}
nav a:hover::after{right:0;}
nav a:hover{color:var(--gold);}
.nav-cta{
  border:1px solid var(--gold); color:var(--gold) !important; padding:10px 22px;
  font-size:.75rem; letter-spacing:.12em; text-transform:uppercase;
}
.nav-cta::after{display:none;}
.nav-cta:hover{background:var(--gold); color:var(--charcoal-90) !important;}
header.solid .nav-cta{color:var(--gold-dim) !important;}
header.solid .nav-cta:hover{color:var(--charcoal-90) !important;}

.burger{display:none; flex-direction:column; gap:5px; background:none; border:0;}
.burger span{width:24px; height:1px; background:var(--white); transition:.4s;}
header.solid .burger span{background:var(--charcoal-90);}

/* progress bar */
#progress{position:fixed; top:0; left:0; height:2px; background:var(--gold); z-index:200; width:0%;}

/* ============ HERO ============ */
.hero{
  position:relative; height:100vh; min-height:640px;
  display:flex; align-items:flex-end;
  color:var(--white); overflow:hidden;
}
.hero .photo{position:absolute; inset:0;}
.hero-overlay{
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(27,31,32,.35) 0%, rgba(27,31,32,.55) 55%, rgba(27,31,32,.92) 100%);
}
.hero-inner{position:relative; z-index:2; width:100%; padding-bottom:min(9vw,92px);}
.hero .eyebrow{color:var(--gold-soft); margin-bottom:26px;}
.hero .eyebrow::before{background:var(--gold-soft);}
.hero h1{
  font-size:clamp(2.4rem, 5.6vw, 5rem);
  color:var(--white);
  max-width:16.5em;
  animation:riseIn 1.3s var(--ease) both;
}
.hero-sub{
  margin-top:28px; font-size:clamp(1rem,1.6vw,1.2rem); font-weight:300; color:rgba(255,255,255,.82);
  display:flex; flex-wrap:wrap; gap:6px 12px; max-width:640px;
  animation:riseIn 1.3s .2s var(--ease) both;
}
.hero-sub b{font-weight:500; color:var(--white);}
@keyframes riseIn{from{opacity:0; transform:translateY(22px);} to{opacity:1; transform:translateY(0);}}
.hero-ctas{margin-top:46px; display:flex; gap:18px; flex-wrap:wrap; animation:riseIn 1.3s .4s var(--ease) both;}
.btn{
  display:inline-flex; align-items:center; gap:10px;
  padding:16px 32px; font-size:.78rem; letter-spacing:.14em; text-transform:uppercase;
  border:1px solid var(--gold); transition:all .45s var(--ease);
}
.btn-primary{background:var(--gold); color:var(--charcoal-90);}
.btn-primary:hover{background:transparent; color:var(--gold); box-shadow:0 0 26px rgba(199,154,45,.35);}
.btn-ghost{color:var(--white); border-color:rgba(255,255,255,.5);}
.btn-ghost:hover{border-color:var(--gold); color:var(--gold);}

.scroll-cue{
  position:absolute; left:50%; bottom:34px; transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:10px; z-index:2;
  color:rgba(255,255,255,.6); font-size:.65rem; letter-spacing:.2em; text-transform:uppercase;
}
.scroll-cue .line{width:1px; height:34px; background:rgba(255,255,255,.4); position:relative; overflow:hidden;}
.scroll-cue .line::after{content:'';position:absolute; top:-100%; left:0; width:100%; height:100%; background:var(--gold); animation:cue 2.2s ease-in-out infinite;}
@keyframes cue{0%{top:-100%;} 60%{top:100%;} 100%{top:100%;}}

/* ============ ABOUT (split) ============ */
.split{display:grid; grid-template-columns:1fr 1fr; gap:0; align-items:stretch;}
.split .photo{min-height:560px;}
.split-text{display:flex; align-items:center;}
.split-text .inner{padding:min(7vw,80px);}
.split-text h2{font-size:clamp(1.9rem,3.4vw,2.9rem); margin:18px 0 26px;}
.split-text p{color:var(--charcoal-70); font-size:1.02rem; max-width:34em;}
.split-text p + p{margin-top:16px;}
.split.reverse{grid-template-columns:1fr 1fr;}
.split.reverse .split-text{order:2;}
.split.reverse .photo{order:1;}

/* ============ STORY (arch) ============ */
.story{background:var(--charcoal-90); color:var(--white); position:relative;}
.story .eyebrow{color:var(--gold-soft);}
.story .eyebrow::before{background:var(--gold-soft);}
.story-grid{display:grid; grid-template-columns:1.05fr .95fr; gap:80px; align-items:center;}
.story h2{color:var(--white); font-size:clamp(2rem,3.6vw,3.2rem); margin:20px 0 28px;}
.story p{color:rgba(255,255,255,.68); font-size:1.05rem; max-width:32em;}
.story p + p{margin-top:18px;}
.story blockquote{
  font-family:var(--serif); font-style:italic; font-size:1.4rem; color:var(--gold-soft);
  margin-top:34px; padding-left:26px; border-left:1px solid var(--gold);
}
.arch-figure{position:relative; display:flex; justify-content:center;}
.arch-figure svg{width:100%; max-width:420px;}
.arch-figure .keystone-pulse{animation:pulse 3.4s ease-in-out infinite;}
@keyframes pulse{0%,100%{fill:var(--gold);} 50%{fill:var(--gold-soft);}}

/* ============ WHY JOIN — alternating full-width ============ */
.why-item{display:grid; grid-template-columns:1fr 1fr;}
.why-item .photo{min-height:480px;}
.why-item:nth-child(even){grid-template-columns:1fr 1fr;}
.why-item:nth-child(even) .split-text{order:2;}
.why-item:nth-child(even) .photo{order:1;}
.why-text .inner{padding:min(6vw,72px);}
.why-num{font-family:var(--serif); font-style:italic; color:var(--gold); font-size:1rem; margin-bottom:10px; display:block;}
.why-text h3{font-size:clamp(1.6rem,2.6vw,2.3rem); margin-bottom:16px;}
.why-text p{color:var(--charcoal-70); max-width:30em;}

/* ============ KEYSTONE METHOD (circular) ============ */
.method{background:var(--charcoal-90); color:var(--white); text-align:center;}
.method .eyebrow{justify-content:center;}
.method .eyebrow::before{display:none;}
.method h2{color:var(--white); font-size:clamp(2rem,3.6vw,3rem); margin:18px 0 12px;}
.method-sub{color:rgba(255,255,255,.6); max-width:34em; margin:0 auto 70px;}
.method-wheel{position:relative; width:min(600px,90vw); aspect-ratio:1; margin:0 auto;}
.method-ring{position:absolute; inset:0; border-radius:50%; border:1px solid rgba(255,255,255,.14);}
.method-ring::before{content:''; position:absolute; inset:14%; border-radius:50%; border:1px dashed rgba(199,154,45,.28);}
.method-center{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  flex-direction:column; text-align:center;
}
.method-center b{font-family:var(--serif); font-size:1.3rem; color:var(--gold-soft);}
.method-center span{font-size:.66rem; letter-spacing:.2em; text-transform:uppercase; color:rgba(255,255,255,.45); margin-top:6px;}
.pillar{
  position:absolute; width:132px; margin-left:-66px; margin-top:-66px;
  display:flex; flex-direction:column; align-items:center; text-align:center; gap:8px;
}
.pillar-dot{
  width:64px; height:64px; border-radius:50%; border:1px solid var(--gold);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--serif); font-style:italic; color:var(--gold-soft); font-size:.95rem;
  background:var(--charcoal-90); transition:all .5s var(--ease); cursor:default;
}
.pillar:hover .pillar-dot{background:var(--gold); color:var(--charcoal-90); box-shadow:0 0 30px rgba(199,154,45,.5); transform:scale(1.08);}
.pillar-label{font-size:.78rem; letter-spacing:.06em; color:rgba(255,255,255,.85);}
.pillar-desc{
  font-size:.76rem; color:rgba(255,255,255,.5); max-width:150px; line-height:1.5;
  opacity:0; max-height:0; overflow:hidden; transition:all .4s var(--ease);
}
.pillar:hover .pillar-desc{opacity:1; max-height:100px; margin-top:2px;}

/* ============ MEMBER EXPERIENCE ============ */
.experience-list{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--charcoal-15); margin-top:60px;}
.exp-item{background:var(--ivory); padding:44px 34px; transition:background .4s var(--ease);}
.exp-item:hover{background:var(--white); box-shadow:0 20px 50px rgba(45,52,54,.08);}
.exp-item .why-num{margin-bottom:22px;}
.exp-item h4{font-size:1.15rem; margin-bottom:10px; font-weight:500;}
.exp-item p{font-size:.88rem; color:var(--charcoal-70);}

/* ============ GALLERY ============ */
.masonry{columns:3 260px; column-gap:18px; margin-top:60px;}
.masonry .photo{margin-bottom:18px; break-inside:avoid; min-height:220px;}
.masonry .photo:nth-child(3n){min-height:320px;}
.masonry .photo:nth-child(5n){min-height:180px;}
.masonry .photo:hover .photo-caption{color:var(--gold-soft);}
.masonry .photo{transition:transform .5s var(--ease);}
.masonry .photo:hover{transform:translateY(-6px);}

/* ============ TESTIMONIALS ============ */
.testi{background:var(--charcoal-90); color:var(--white);}
.testi-wrap{max-width:760px; margin:0 auto; text-align:center; position:relative;}
.testi-slide{display:none;}
.testi-slide.active{display:block; animation:fadeUp .8s var(--ease);}
@keyframes fadeUp{from{opacity:0; transform:translateY(14px);} to{opacity:1; transform:translateY(0);}}
.testi-portrait{width:84px; height:84px; border-radius:50%; margin:0 auto 30px;}
.testi-quote{font-family:var(--serif); font-style:italic; font-size:clamp(1.2rem,2.2vw,1.7rem); line-height:1.55; color:var(--white);}
.testi-quote::before{content:'"'; color:var(--gold);}
.testi-quote::after{content:'"'; color:var(--gold);}
.testi-name{margin-top:30px; font-size:.85rem; letter-spacing:.04em;}
.testi-role{color:var(--gold-soft); font-size:.75rem; margin-top:4px; letter-spacing:.08em; text-transform:uppercase;}
.testi-dots{display:flex; gap:10px; justify-content:center; margin-top:44px;}
.testi-dots button{width:8px; height:8px; border-radius:50%; border:1px solid var(--gold); background:transparent; padding:0;}
.testi-dots button.active{background:var(--gold);}

/* ============ EVENTS timeline ============ */
.timeline{position:relative; margin-top:60px;}
.timeline-line{position:absolute; left:0; right:0; top:50%; height:1px; background:var(--charcoal-15); display:none;}
.event-row{display:grid; grid-template-columns:.7fr 2fr 1fr; gap:30px; align-items:center; padding:30px 0; border-top:1px solid var(--charcoal-15);}
.event-row:last-child{border-bottom:1px solid var(--charcoal-15);}
.event-date{font-family:var(--serif); font-size:1.5rem; color:var(--gold-dim);}
.event-date small{display:block; font-family:var(--sans); font-size:.65rem; letter-spacing:.14em; color:var(--charcoal-40); margin-top:4px;}
.event-name{font-size:1.15rem; font-weight:500; font-family:var(--serif);}
.event-loc{font-size:.82rem; color:var(--charcoal-70); margin-top:4px;}
.event-row a{font-size:.75rem; letter-spacing:.1em; text-transform:uppercase; color:var(--gold-dim); border-bottom:1px solid var(--gold); padding-bottom:2px; justify-self:end;}

/* ============ MEMBERSHIP ============ */
.tiers{display:grid; grid-template-columns:repeat(3,1fr); gap:0; border:1px solid var(--charcoal-15); margin-top:60px;}
.tier{padding:52px 40px; border-right:1px solid var(--charcoal-15); position:relative;}
.tier:last-child{border-right:none;}
.tier.featured{background:var(--charcoal-90); color:var(--white);}
.tier-name{font-family:var(--serif); font-size:1.5rem; margin-bottom:10px;}
.tier.featured .tier-name{color:var(--gold-soft);}
.tier-tag{font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--gold-dim); margin-bottom:28px; display:block;}
.tier.featured .tier-tag{color:var(--gold);}
.tier ul{list-style:none; margin:28px 0 36px;}
.tier li{font-size:.88rem; padding:10px 0; border-top:1px solid var(--charcoal-15); color:var(--charcoal-70);}
.tier.featured li{border-top:1px solid rgba(255,255,255,.12); color:rgba(255,255,255,.75);}
.tier li:first-child{border-top:none;}
.tier .btn{width:100%; justify-content:center;}

/* ============ LEADERSHIP ============ */
.leaders{display:grid; grid-template-columns:repeat(4,1fr); gap:34px; margin-top:60px;}
.leader .photo{aspect-ratio:4/5; margin-bottom:20px; background:var(--charcoal-90);}
.leader .photo img.leader-img{width:100%; height:100%; object-fit:cover; display:block;
  filter:grayscale(100%) contrast(1.02); transition:filter .5s var(--ease);}
.leader .photo:hover img.leader-img{filter:grayscale(0%);}
.leader h4{font-size:1.05rem; font-weight:500; font-family:var(--serif);}
.leader span{font-size:.78rem; color:var(--gold-dim); display:block; margin-top:4px;}

/* ============ IMPACT stats ============ */
.impact{position:relative; color:var(--white); overflow:hidden;}
.impact .photo{position:absolute; inset:0;}
.impact .overlay{position:absolute; inset:0; background:rgba(27,31,32,.82);}
.impact-inner{position:relative; z-index:2;}
.stat-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:40px; margin-top:60px; text-align:center;}
.stat b{font-family:var(--serif); font-size:clamp(2.2rem,4vw,3.4rem); color:var(--gold-soft); display:block;}
.stat span{font-size:.78rem; letter-spacing:.06em; color:rgba(255,255,255,.65); margin-top:8px; display:block;}

/* ============ AFRICA ============ */
.africa{position:relative; color:var(--white); min-height:640px; display:flex; align-items:center;}
.africa .photo{position:absolute; inset:0;}
.africa .overlay{position:absolute; inset:0; background:linear-gradient(90deg, rgba(27,31,32,.94) 30%, rgba(27,31,32,.35) 100%);}
.africa-inner{position:relative; z-index:2; max-width:620px;}
.africa h2{color:var(--white); font-size:clamp(2.1rem,4vw,3.4rem); margin:20px 0 24px;}
.africa p{color:rgba(255,255,255,.72); font-size:1.05rem;}
.chapters{display:flex; flex-wrap:wrap; gap:12px; margin-top:34px;}
.chapter-tag{border:1px solid rgba(255,255,255,.3); padding:8px 18px; font-size:.75rem; letter-spacing:.06em;}
.chapter-tag.active{border-color:var(--gold); color:var(--gold-soft);}

/* ============ CONTACT ============ */
.contact{position:relative; color:var(--white);}
.contact .photo{position:absolute; inset:0;}
.contact .overlay{position:absolute; inset:0; background:rgba(27,31,32,.9);}
.contact-grid{position:relative; z-index:2; display:grid; grid-template-columns:1fr 1fr; gap:80px;}
.contact h2{color:var(--white); font-size:clamp(2rem,3.4vw,2.8rem); margin:18px 0 24px;}
.contact-info{margin-top:40px;}
.contact-info div{margin-bottom:22px;}
.contact-info label{display:block; font-size:.68rem; letter-spacing:.18em; text-transform:uppercase; color:var(--gold-soft); margin-bottom:6px;}
.contact-info p{color:rgba(255,255,255,.85); font-size:1rem;}
.field{margin-bottom:22px;}
.field label{display:block; font-size:.7rem; letter-spacing:.12em; text-transform:uppercase; color:rgba(255,255,255,.55); margin-bottom:8px;}
.field input, .field textarea{
  width:100%; background:transparent; border:none; border-bottom:1px solid rgba(255,255,255,.3);
  color:var(--white); font-family:var(--sans); font-size:.95rem; padding:10px 2px; transition:border-color .3s;
}
.field input:focus, .field textarea:focus{border-color:var(--gold); outline:none;}
.field textarea{resize:vertical; min-height:90px;}
.contact form .btn{margin-top:16px;}

/* ============ FOOTER ============ */
footer{background:var(--charcoal-90); color:rgba(255,255,255,.6); padding:80px 0 30px;}
.footer-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr 1.2fr; gap:50px;}
.footer-logo{font-family:var(--serif); font-size:1.4rem; color:var(--white); margin-bottom:16px;}
.footer-col h5{font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; color:var(--gold-soft); margin-bottom:20px;}
.footer-col ul{list-style:none;}
.footer-col li{margin-bottom:12px; font-size:.85rem;}
.footer-col a:hover{color:var(--gold);}
.newsletter{display:flex; border-bottom:1px solid rgba(255,255,255,.3); margin-top:8px;}
.newsletter input{flex:1; background:none; border:none; color:var(--white); padding:10px 0; font-size:.85rem;}
.newsletter button{background:none; border:none; color:var(--gold); font-size:.8rem; letter-spacing:.08em;}
.footer-bottom{margin-top:70px; padding-top:26px; border-top:1px solid rgba(255,255,255,.12); display:flex; justify-content:space-between; flex-wrap:wrap; gap:14px; font-size:.75rem;}
.social{display:flex; gap:18px;}


/* ============ KBN MEMBERSHIP APPLICATION ============ */
.kbn-apply{background:var(--ivory);}
.kbn-form-wrap{max-width:980px;margin:52px auto 0;background:var(--white);border:1px solid var(--charcoal-15);box-shadow:0 18px 50px rgba(27,31,32,.08);padding:clamp(24px,5vw,52px);}
.kbn-intro{border-left:3px solid var(--gold);background:#F4EAD2;padding:16px 20px;margin-bottom:36px;color:#51482f;font-size:.92rem;}
.kbn-fieldset{border:0;padding:0;margin:0 0 38px;}
.kbn-legend{font-family:var(--serif);font-weight:500;color:var(--charcoal-90);font-size:1.3rem;padding:0 0 9px;border-bottom:1px solid var(--gold);width:100%;margin-bottom:20px;}
.kbn-num{color:var(--gold-dim);margin-right:8px;}
.kbn-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;}
.kbn-full{grid-column:1/-1;}
.kbn-field{margin-bottom:2px;}
.kbn-field label{display:block;font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--charcoal-70);margin-bottom:8px;font-weight:500;}
.kbn-req{color:#A75D3A;}
.kbn-field input,.kbn-field select,.kbn-field textarea{width:100%;padding:12px 13px;border:1px solid var(--charcoal-15);border-radius:0;background:#fff;color:var(--charcoal);font:400 .9rem var(--sans);transition:border-color .2s,box-shadow .2s;}
.kbn-field textarea{min-height:100px;resize:vertical;}
.kbn-field input:focus,.kbn-field select:focus,.kbn-field textarea:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 3px rgba(199,154,45,.12);}
.kbn-category-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;}
.kbn-category{border:1px solid var(--charcoal-15);padding:15px;display:flex;gap:11px;align-items:flex-start;cursor:pointer;transition:.2s;}
.kbn-category:hover,.kbn-category:has(input:checked){border-color:var(--gold);background:#F8F3E7;}
.kbn-category input{margin-top:4px;accent-color:var(--gold-dim);}
.kbn-cname{display:block;font-weight:600;color:var(--charcoal-90);font-size:.9rem;}
.kbn-cdesc{display:block;color:var(--charcoal-70);font-size:.76rem;margin-top:3px;}
.kbn-cprice{display:block;color:var(--gold-dim);font-size:.78rem;margin-top:6px;font-weight:500;letter-spacing:.04em;}
.kbn-covenant{background:var(--charcoal-90);color:#fff;padding:24px 26px;font-family:var(--serif);font-style:italic;font-size:.95rem;line-height:1.75;}
.kbn-covenant strong{color:var(--gold-soft);font-style:normal;}
.kbn-check{display:flex;gap:10px;align-items:flex-start;margin-top:16px;font-size:.82rem;color:var(--charcoal-70);}
.kbn-check input{margin-top:4px;accent-color:var(--gold-dim);}
.kbn-submit{width:100%;justify-content:center;margin-top:6px;}
.kbn-status{display:none;margin-top:16px;padding:14px 16px;font-size:.85rem;border:1px solid;}
.kbn-status.success{display:block;background:#edf6ef;color:#1e5c33;border-color:#b6dcc0;}
.kbn-status.error{display:block;background:#fbeaea;color:#8b211b;border-color:#eec3c1;}
@media(max-width:600px){.kbn-grid,.kbn-category-grid{grid-template-columns:1fr;}.kbn-full{grid-column:auto;}}

/* ============ RESPONSIVE ============ */
@media (max-width:980px){
  nav ul{display:none;}
  .burger{display:flex;}
  .split, .why-item, .story-grid, .contact-grid{grid-template-columns:1fr !important;}
  .split .photo, .why-item .photo{min-height:340px; order:1 !important;}
  .split-text{order:2 !important;}
  .experience-list{grid-template-columns:1fr 1fr;}
  .leaders{grid-template-columns:1fr 1fr;}
  .stat-grid{grid-template-columns:1fr 1fr;}
  .tiers{grid-template-columns:1fr;}
  .tier{border-right:none; border-bottom:1px solid var(--charcoal-15);}
  .footer-grid{grid-template-columns:1fr 1fr; gap:40px;}
  .event-row{grid-template-columns:1fr; gap:10px; text-align:left;}
  .event-row a{justify-self:start;}
  .masonry{columns:2 200px;}
}
@media (max-width:560px){
  .experience-list, .leaders, .stat-grid, .footer-grid{grid-template-columns:1fr;}
  .method-wheel{transform:scale(.82);}
}

/* ============================================================
   KEYSTONE BUSINESS NETWORK — PORTAL ADDITIONS
   Inherits all design tokens from the shared stylesheet above.
   ============================================================ */

/* ---------- portal layout shell ---------- */
.portal-page{background:var(--ivory); min-height:100vh; padding-top:110px;}
.portal-hero-band{background:var(--charcoal-90); color:var(--white); padding:54px 0 46px; margin-top:0;}
.portal-hero-band .eyebrow{color:var(--gold-soft);}
.portal-hero-band .eyebrow::before{background:var(--gold-soft);}
.portal-hero-band h1{color:var(--white); font-size:clamp(1.8rem,3.4vw,2.7rem); margin:14px 0 8px;}
.portal-hero-band p{color:rgba(255,255,255,.7); max-width:48em;}

/* ---------- top utility bar (authenticated) ---------- */
.portal-topbar{background:var(--charcoal-90); color:rgba(255,255,255,.8); font-size:.78rem; padding:8px 0; border-bottom:1px solid rgba(255,255,255,.1);}
.portal-topbar .wrap{display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap;}
.portal-topbar a{color:var(--gold-soft);}
.portal-topbar .who{display:flex; align-items:center; gap:14px; flex-wrap:wrap;}

/* ---------- generic container cards ---------- */
.card{background:var(--white); border:1px solid var(--charcoal-15); box-shadow:0 14px 40px rgba(27,31,32,.06); padding:clamp(20px,3vw,34px); border-radius:2px;}
.card + .card{margin-top:24px;}
.card-title{font-family:var(--serif); font-size:1.25rem; color:var(--charcoal-90); margin-bottom:18px; display:flex; align-items:center; gap:10px; flex-wrap:wrap;}
.grid-2{display:grid; grid-template-columns:1fr 1fr; gap:24px;}
.grid-3{display:grid; grid-template-columns:repeat(3,1fr); gap:24px;}
.grid-4{display:grid; grid-template-columns:repeat(4,1fr); gap:20px;}
@media(max-width:900px){.grid-2,.grid-3,.grid-4{grid-template-columns:1fr;}}

/* ---------- stat tiles ---------- */
.tile{background:var(--white); border:1px solid var(--charcoal-15); padding:22px; text-align:left;}
.tile b{font-family:var(--serif); font-size:1.9rem; color:var(--gold-dim); display:block; line-height:1;}
.tile span{font-size:.74rem; letter-spacing:.08em; text-transform:uppercase; color:var(--charcoal-40); margin-top:8px; display:block;}

/* ---------- alerts ---------- */
.alert{padding:14px 18px; border:1px solid; font-size:.86rem; margin-bottom:22px; border-radius:2px;}
.alert-success{background:#edf6ef; color:#1e5c33; border-color:#b6dcc0;}
.alert-error{background:#fbeaea; color:#8b211b; border-color:#eec3c1;}
.alert-info{background:#eef3f8; color:#234b6e; border-color:#c3d8ec;}
.alert-warn{background:#fbf3e6; color:#7a4d12; border-color:#ecd3a8;}

/* ---------- forms ---------- */
.form-row{display:grid; grid-template-columns:1fr 1fr; gap:18px;}
.field-full{grid-column:1/-1;}
.field-block{margin-bottom:18px;}
.field-block label{display:block; font-size:.7rem; letter-spacing:.1em; text-transform:uppercase; color:var(--charcoal-70); margin-bottom:8px; font-weight:500;}
.field-block .req{color:#A75D3A;}
.field-block input, .field-block select, .field-block textarea{
  width:100%; padding:12px 13px; border:1px solid var(--charcoal-15); border-radius:0;
  background:#fff; color:var(--charcoal); font:400 .92rem var(--sans); transition:border-color .2s, box-shadow .2s;
}
.field-block textarea{min-height:110px; resize:vertical;}
.field-block input:focus, .field-block select:focus, .field-block textarea:focus{outline:none; border-color:var(--gold); box-shadow:0 0 0 3px rgba(199,154,45,.12);}
.field-help{font-size:.74rem; color:var(--charcoal-40); margin-top:6px;}
.check-row{display:flex; gap:10px; align-items:flex-start; margin-top:14px; font-size:.84rem; color:var(--charcoal-70);}
.check-row input{margin-top:4px; accent-color:var(--gold-dim);}
@media(max-width:600px){.form-row{grid-template-columns:1fr;}}

/* ---------- buttons (portal) ---------- */
.btn-sm{padding:9px 18px; font-size:.72rem;}
.btn-block{width:100%; justify-content:center;}
.btn-danger{border-color:#8b211b; color:#8b211b; background:transparent;}
.btn-danger:hover{background:#8b211b; color:#fff; box-shadow:none;}
.linkgold{color:var(--gold-dim); border-bottom:1px solid var(--gold); font-size:.78rem; letter-spacing:.06em;}

/* ---------- tables ---------- */
.table-wrap{overflow-x:auto; border:1px solid var(--charcoal-15); background:#fff;}
table.data{width:100%; border-collapse:collapse; font-size:.85rem;}
table.data th{text-align:left; background:var(--charcoal-90); color:var(--gold-soft); font-weight:500; letter-spacing:.06em; text-transform:uppercase; font-size:.68rem; padding:12px 14px; white-space:nowrap;}
table.data td{padding:12px 14px; border-top:1px solid var(--charcoal-15); color:var(--charcoal-70); vertical-align:middle;}
table.data tr:hover td{background:#fbfaf6;}

/* ---------- badges ---------- */
.badge{display:inline-block; font-size:.66rem; letter-spacing:.08em; text-transform:uppercase; padding:4px 10px; border:1px solid; font-weight:500;}
.badge-pending{color:#7a4d12; border-color:#ecd3a8; background:#fbf3e6;}
.badge-review{color:#234b6e; border-color:#c3d8ec; background:#eef3f8;}
.badge-approved{color:#1e5c33; border-color:#b6dcc0; background:#edf6ef;}
.badge-rejected{color:#8b211b; border-color:#eec3c1; background:#fbeaea;}
.badge-active{color:#1e5c33; border-color:#b6dcc0; background:#edf6ef;}
.badge-inactive{color:var(--charcoal-40); border-color:var(--charcoal-15); background:#f1f2f2;}
.badge-member{color:var(--gold-dim); border-color:var(--gold); background:#f8f3e7;}
.badge-admin{color:#fff; border-color:var(--charcoal-90); background:var(--charcoal);}
.badge-chapter{color:var(--gold-soft); border-color:var(--gold); background:var(--charcoal-90);}

/* ---------- nav (portal subnav) ---------- */
.portal-nav{background:var(--white); border-bottom:1px solid var(--charcoal-15); position:sticky; top:0; z-index:50;}
.portal-nav .wrap{display:flex; gap:4px; overflow-x:auto; padding:0 var(--gutter);}
.portal-nav a{display:block; padding:16px 14px; font-size:.78rem; letter-spacing:.04em; color:var(--charcoal-70); white-space:nowrap; border-bottom:2px solid transparent;}
.portal-nav a:hover{color:var(--gold);}
.portal-nav a.active{color:var(--charcoal-90); border-bottom-color:var(--gold);}

/* ---------- directory / search ---------- */
.search-bar{display:flex; gap:12px; flex-wrap:wrap; margin-bottom:24px;}
.search-bar input, .search-bar select{flex:1; min-width:160px; padding:11px 13px; border:1px solid var(--charcoal-15); font:400 .9rem var(--sans); color:var(--charcoal);}
.search-bar input:focus, .search-bar select:focus{outline:none; border-color:var(--gold);}

/* ---------- member card ---------- */
.member-card{background:#fff; border:1px solid var(--charcoal-15); padding:22px; transition:box-shadow .3s, transform .3s;}
.member-card:hover{box-shadow:0 16px 40px rgba(27,31,32,.1); transform:translateY(-3px);}
.member-card .avatar{width:54px; height:54px; border-radius:50%; background:var(--charcoal-90); color:var(--gold-soft); display:flex; align-items:center; justify-content:center; font-family:var(--serif); font-size:1.2rem; margin-bottom:14px;}
.member-card h4{font-size:1.02rem; margin-bottom:4px;}
.member-card .m-industry{font-size:.78rem; color:var(--gold-dim); margin-bottom:10px;}
.member-card .m-meta{font-size:.8rem; color:var(--charcoal-70);}

/* ---------- accordion steps (multi-step form) ---------- */
.step-indicator{display:flex; gap:10px; margin-bottom:30px; flex-wrap:wrap;}
.step-indicator .step{display:flex; align-items:center; gap:10px; font-size:.74rem; letter-spacing:.04em; color:var(--charcoal-40); padding:8px 14px; border:1px solid var(--charcoal-15); background:#fff;}
.step-indicator .step.active{color:var(--charcoal-90); border-color:var(--gold); background:#f8f3e7;}
.step-indicator .step.done{color:var(--gold-dim); border-color:var(--gold-soft);}
.step-indicator .step .n{width:22px; height:22px; border-radius:50%; border:1px solid currentColor; display:flex; align-items:center; justify-content:center; font-size:.7rem;}

.step-panel{display:none;}
.step-panel.active{display:block;}

/* ---------- covenant / callout ---------- */
.callout{background:var(--charcoal-90); color:#fff; padding:22px 24px; font-family:var(--serif); font-style:italic; font-size:.95rem; line-height:1.75; border-left:3px solid var(--gold);}
.callout strong{color:var(--gold-soft); font-style:normal;}

/* ---------- pagination ---------- */
.pagination{display:flex; gap:8px; margin-top:22px; flex-wrap:wrap;}
.pagination a, .pagination span{padding:8px 13px; border:1px solid var(--charcoal-15); font-size:.8rem; color:var(--charcoal-70);}
.pagination a:hover{border-color:var(--gold); color:var(--gold-dim);}
.pagination .current{background:var(--charcoal-90); color:var(--gold-soft); border-color:var(--charcoal-90);}

/* ---------- misc ---------- */
.muted{color:var(--charcoal-40);}
.small{font-size:.82rem;}
.right{text-align:right;}
.center{text-align:center;}
.stack-sm > * + *{margin-top:10px;}
.divider{height:1px; background:var(--charcoal-15); margin:24px 0;}
.flex-between{display:flex; justify-content:space-between; align-items:center; gap:14px; flex-wrap:wrap;}
.empty-state{padding:50px 20px; text-align:center; color:var(--charcoal-40); border:1px dashed var(--charcoal-15);}