/* =========================================================
   ABC Network — public site design system
   Palette pulled directly from the logo: navy / maroon / sky blue
   ========================================================= */

:root{
  --navy:#2D3563;
  --navy-deep:#1E2547;
  --maroon:#7A271F;
  --maroon-deep:#5E1D17;
  --blue:#009ED6;
  --blue-deep:#0080AD;
  --paper:#FAF8F4;
  --paper-raised:#FFFFFF;
  --ink:#22284A;
  --text-dim:#5C6178;
  --line:#E7E3D8;
  --rule:#D9D4C4;
}
*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:'IBM Plex Sans', sans-serif;
  -webkit-font-smoothing:antialiased;
  line-height:1.55;
}
h1,h2,h3,h4,.display{
  font-family:'Fraunces', serif;
  font-weight:600;
  letter-spacing:-0.01em;
  color:var(--navy);
  margin:0 0 .4em;
}
p{ margin:0 0 1em; }
a{ color:var(--blue-deep); text-decoration:none; }
a:hover{ text-decoration:underline; }
img{ max-width:100%; display:block; }
ul{ padding-left:1.2em; }

.wrap{ max-width:1140px; margin:0 auto; padding:0 28px; }

/* ===== Top nav ===== */
.site-header{
  position:sticky; top:0; z-index:100;
  background:rgba(250,248,244,0.94);
  backdrop-filter:blur(6px);
  border-bottom:1px solid var(--line);
}
.nav-row{ display:flex; align-items:center; justify-content:space-between; padding:14px 0; }
.brand{ display:flex; align-items:center; gap:10px; text-decoration:none; }
.brand img{ height:42px; width:auto; }
.brand .brand-text{ font-family:'Fraunces'; font-weight:700; font-size:20px; color:var(--navy); line-height:1.1; }
.brand .brand-text small{ display:block; font-family:'IBM Plex Sans'; font-weight:500; font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--maroon); margin-top:2px; }

.nav-links{ display:flex; align-items:center; gap:6px; }
.nav-links a{
  padding:8px 14px; border-radius:20px; font-size:14px; font-weight:500;
  color:var(--ink); text-decoration:none;
}
.nav-links a:hover{ background:rgba(45,53,99,0.06); }
.nav-links a.active{ background:var(--navy); color:#fff; }
.nav-links a.cta{ background:var(--maroon); color:#fff; margin-left:8px; }
.nav-links a.cta:hover{ background:var(--maroon-deep); }

.menu-toggle{ display:none; background:none; border:1px solid var(--line); border-radius:8px; padding:8px 11px; font-size:16px; cursor:pointer; }
@media (max-width:860px){
  .menu-toggle{ display:inline-block; }
  .nav-links{
    position:fixed; top:0; right:-280px; height:100vh; width:260px;
    background:var(--navy); flex-direction:column; align-items:flex-start;
    padding:90px 24px 24px; gap:4px; transition:right .25s; box-shadow:-20px 0 40px rgba(0,0,0,.2);
  }
  .nav-links.open{ right:0; }
  .nav-links a{ color:#e7e2d4; width:100%; }
  .nav-links a:hover{ background:rgba(255,255,255,0.08); }
  .nav-links a.active{ background:var(--blue); color:#fff; }
}

/* ===== Hero ===== */
.hero{
  position:relative;
  padding:76px 0 84px;
  overflow:hidden;
  background:
    radial-gradient(circle at 85% 20%, rgba(0,158,214,0.10), transparent 45%),
    radial-gradient(circle at 12% 85%, rgba(122,39,31,0.08), transparent 40%);
}
.hero-grid{ display:grid; grid-template-columns:1.15fr .85fr; gap:40px; align-items:center; }
@media (max-width:860px){ .hero-grid{ grid-template-columns:1fr; } }
.eyebrow{
  display:inline-block; font-size:11.5px; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  color:var(--maroon); background:rgba(122,39,31,0.08); padding:5px 12px; border-radius:20px; margin-bottom:16px;
}
.hero h1{ font-size:42px; line-height:1.08; margin-bottom:18px; }
.hero .lede{ font-size:16.5px; color:var(--text-dim); max-width:520px; margin-bottom:28px; }
.hero-actions{ display:flex; gap:12px; flex-wrap:wrap; }

.hero-badge-cluster{ position:relative; display:flex; justify-content:center; }
.ring-badge{
  width:230px; height:230px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  position:relative;
}
.ring-badge::before{
  content:""; position:absolute; inset:0; border-radius:50%;
  background:conic-gradient(var(--navy) 0 33%, var(--maroon) 33% 66%, var(--blue) 66% 100%);
  -webkit-mask:radial-gradient(farthest-side, transparent calc(100% - 14px), #000 calc(100% - 14px));
  mask:radial-gradient(farthest-side, transparent calc(100% - 14px), #000 calc(100% - 14px));
}
.ring-badge img{ width:120px; height:auto; position:relative; z-index:1; }

/* ===== Buttons ===== */
.btn{
  display:inline-flex; align-items:center; gap:8px;
  font-family:'IBM Plex Sans'; font-size:14px; font-weight:600;
  padding:11px 22px; border-radius:26px; border:1px solid transparent;
  cursor:pointer; text-decoration:none;
}
.btn.navy{ background:var(--navy); color:#fff; }
.btn.navy:hover{ background:var(--navy-deep); text-decoration:none; }
.btn.maroon{ background:var(--maroon); color:#fff; }
.btn.maroon:hover{ background:var(--maroon-deep); text-decoration:none; }
.btn.blue{ background:var(--blue); color:#fff; }
.btn.blue:hover{ background:var(--blue-deep); text-decoration:none; }
.btn.outline{ background:transparent; border-color:var(--navy); color:var(--navy); }
.btn.outline:hover{ background:var(--navy); color:#fff; text-decoration:none; }
.btn.sm{ padding:7px 16px; font-size:12.5px; }
.btn:disabled{ opacity:.5; cursor:not-allowed; }

/* ===== Sections ===== */
section{ padding:64px 0; }
.section-head{ max-width:640px; margin-bottom:40px; }
.section-head .eyebrow{ margin-bottom:10px; }
.section-head h2{ font-size:30px; }
.section-head p{ color:var(--text-dim); font-size:15px; }
.alt-bg{ background:var(--paper-raised); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }

/* ===== Feature / value cards ===== */
.grid-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.grid-4{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
@media (max-width:860px){ .grid-3{ grid-template-columns:1fr; } .grid-4{ grid-template-columns:repeat(2,1fr);} }
@media (max-width:520px){ .grid-4{ grid-template-columns:1fr; } }

.feature-card{
  background:var(--paper-raised); border:1px solid var(--line); border-radius:14px;
  padding:26px 24px; position:relative; overflow:hidden;
}
.feature-card .icon-dot{ width:44px; height:44px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-family:'Fraunces'; font-weight:700; font-size:18px; color:#fff; margin-bottom:16px;}
.feature-card h3{ font-size:17px; margin-bottom:8px; }
.feature-card p{ font-size:13.5px; color:var(--text-dim); margin-bottom:0; }
.icon-dot.c-navy{ background:var(--navy); }
.icon-dot.c-maroon{ background:var(--maroon); }
.icon-dot.c-blue{ background:var(--blue); }

/* ===== Stat strip ===== */
.stat-strip{
  display:grid; grid-template-columns:repeat(4,1fr);
  background:var(--navy); border-radius:16px; overflow:hidden; color:#fff;
}
@media (max-width:700px){ .stat-strip{ grid-template-columns:repeat(2,1fr); } }
.stat-strip .cell{ padding:26px 22px; border-right:1px solid rgba(255,255,255,0.12); text-align:center; }
.stat-strip .cell:last-child{ border-right:none; }
.stat-strip .num{ font-family:'Fraunces'; font-size:32px; font-weight:700; }
.stat-strip .lbl{ font-size:12px; text-transform:uppercase; letter-spacing:.1em; color:#c7cbe0; margin-top:4px; }

/* ===== Member cards (public directory) ===== */
.member-card{
  background:var(--paper-raised); border:1px solid var(--line); border-radius:14px;
  padding:22px; text-align:center; text-decoration:none; color:inherit; display:block;
  transition:transform .15s, box-shadow .15s;
}
.member-card:hover{ transform:translateY(-3px); box-shadow:0 14px 30px -18px rgba(34,40,74,0.35); text-decoration:none; }
.member-avatar{
  width:76px; height:76px; border-radius:50%; margin:0 auto 14px;
  display:flex; align-items:center; justify-content:center;
  font-family:'Fraunces'; font-size:24px; font-weight:700; color:#fff;
  position:relative;
}
.member-avatar::after{
  content:""; position:absolute; inset:-5px; border-radius:50%;
  border:2px solid var(--blue); opacity:.5;
}
.member-card h4{ font-size:15.5px; margin-bottom:2px; }
.member-card .biz{ font-size:12.5px; color:var(--text-dim); margin-bottom:10px; }
.member-card .tag{ display:inline-block; font-size:11px; background:var(--paper); border:1px solid var(--line); padding:3px 10px; border-radius:20px; color:var(--navy); }

/* ===== Directory toolbar ===== */
.toolbar{ display:flex; gap:10px; margin-bottom:30px; flex-wrap:wrap; align-items:center; }
.search-box{ flex:1; min-width:220px; padding:11px 16px; border:1px solid var(--line); border-radius:24px; background:var(--paper-raised); font-size:14px; }
.chip-filter{ padding:9px 16px; border:1px solid var(--line); border-radius:24px; background:var(--paper-raised); font-size:13px; color:var(--navy); }

/* ===== Forms ===== */
.form-card{ background:var(--paper-raised); border:1px solid var(--line); border-radius:16px; padding:32px; }
.field{ margin-bottom:18px; }
.field label{ display:block; font-size:13px; font-weight:600; margin-bottom:6px; color:var(--navy); }
.field input, .field select, .field textarea{
  width:100%; padding:11px 14px; border:1px solid var(--line); border-radius:9px;
  font-family:inherit; font-size:14px; background:var(--paper); color:var(--ink);
}
.field input:focus, .field select:focus, .field textarea:focus{ outline:2px solid var(--blue); outline-offset:1px; border-color:var(--blue); }
.field textarea{ min-height:110px; resize:vertical; }
.field-row{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
@media (max-width:560px){ .field-row{ grid-template-columns:1fr; } }
.helper{ font-size:12px; color:var(--text-dim); margin-top:5px; }
.field .error-msg{ font-size:12px; color:var(--maroon); margin-top:4px; display:none; }
.field.has-error input, .field.has-error select, .field.has-error textarea{ border-color:var(--maroon); }
.field.has-error .error-msg{ display:block; }
.checkbox-field{ display:flex; align-items:flex-start; gap:8px; font-size:13px; color:var(--text-dim); }
.checkbox-field input{ width:auto; margin-top:3px; }

.alert{ padding:12px 18px; border-radius:10px; margin-bottom:20px; font-size:13.5px; }
.alert-success{ background:#E4F1E8; color:#2C6B3F; }

/* ===== Pricing / membership tiers ===== */
.tier-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
@media (max-width:860px){ .tier-grid{ grid-template-columns:1fr; } }
.tier-card{ background:var(--paper-raised); border:1px solid var(--line); border-radius:16px; padding:28px 24px; position:relative; }
.tier-card.featured{ border-color:var(--maroon); box-shadow:0 20px 40px -24px rgba(122,39,31,0.35); }
.tier-card .featured-badge{ position:absolute; top:-12px; right:24px; background:var(--maroon); color:#fff; font-size:11px; padding:4px 12px; border-radius:20px; font-weight:600; }
.tier-card .price{ font-family:'Fraunces'; font-size:34px; color:var(--navy); margin:10px 0 4px; }
.tier-card .price span{ font-size:14px; font-family:'IBM Plex Sans'; color:var(--text-dim); font-weight:400; }
.tier-card ul{ list-style:none; padding:0; margin:18px 0 22px; font-size:13.5px; }
.tier-card li{ padding:7px 0; border-bottom:1px dashed var(--rule); color:var(--text-dim); }
.tier-card li:last-child{ border-bottom:none; }
.tier-card li::before{ content:"\2713"; color:var(--blue); font-weight:700; margin-right:8px; }

/* ===== Accordion (policies) ===== */
.accordion-item{ background:var(--paper-raised); border:1px solid var(--line); border-radius:12px; margin-bottom:12px; overflow:hidden; }
.accordion-trigger{
  width:100%; text-align:left; background:none; border:none; cursor:pointer;
  padding:18px 22px; display:flex; justify-content:space-between; align-items:center;
  font-family:'Fraunces'; font-size:16px; font-weight:600; color:var(--navy);
}
.accordion-trigger .plus{ font-size:20px; color:var(--maroon); transition:transform .2s; }
.accordion-item.open .accordion-trigger .plus{ transform:rotate(45deg); }
.accordion-panel{ max-height:0; overflow:hidden; transition:max-height .25s ease; padding:0 22px; }
.accordion-item.open .accordion-panel{ padding-bottom:20px; }
.accordion-panel p, .accordion-panel ul{ font-size:13.5px; color:var(--text-dim); }

/* ===== Timeline (about) ===== */
.timeline{ position:relative; padding-left:28px; border-left:2px solid var(--line); }
.timeline-item{ position:relative; margin-bottom:26px; }
.timeline-item::before{ content:""; position:absolute; left:-34px; top:4px; width:12px; height:12px; border-radius:50%; background:var(--blue); border:3px solid var(--paper); }
.timeline-item .year{ font-family:'IBM Plex Mono'; font-size:12px; color:var(--maroon); font-weight:600; }
.timeline-item h4{ font-size:15.5px; margin:4px 0 4px; }
.timeline-item p{ font-size:13.5px; color:var(--text-dim); margin:0; }

/* ===== Quote / testimonial ===== */
.quote-card{ background:var(--navy); color:#fff; border-radius:16px; padding:32px; }
.quote-card p{ font-family:'Fraunces'; font-size:19px; font-style:italic; line-height:1.5; margin-bottom:14px; }
.quote-card .who{ font-size:13px; color:#c7cbe0; }

/* ===== Member profile page ===== */
.profile-hero{ display:flex; gap:24px; align-items:center; flex-wrap:wrap; margin-bottom:36px; }
.profile-avatar{ width:110px; height:110px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-family:'Fraunces'; font-size:34px; font-weight:700; color:#fff; flex-shrink:0;}
.profile-meta{ font-size:13px; color:var(--text-dim); margin-top:6px; }
.profile-body-grid{ display:grid; grid-template-columns:2fr 1fr; gap:28px; }
@media (max-width:860px){ .profile-body-grid{ grid-template-columns:1fr; } }
.info-list{ list-style:none; padding:0; margin:0; }
.info-list li{ display:flex; justify-content:space-between; padding:10px 0; border-bottom:1px solid var(--line); font-size:13.5px; }
.info-list li span:first-child{ color:var(--text-dim); }
.info-list li span:last-child{ font-weight:600; color:var(--navy); }

/* ===== Footer ===== */
.site-footer{ background:var(--navy-deep); color:#c7cbe0; padding:50px 0 26px; margin-top:40px; }
.footer-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:32px; margin-bottom:36px;}
@media (max-width:760px){ .footer-grid{ grid-template-columns:1fr 1fr; } }
.site-footer .brand-text{ color:#fff; }
.site-footer h5{ color:#fff; font-size:12.5px; text-transform:uppercase; letter-spacing:.1em; margin-bottom:14px; font-family:'IBM Plex Sans'; font-weight:600;}
.site-footer a{ color:#c7cbe0; display:block; font-size:13.5px; margin-bottom:9px; text-decoration:none; }
.site-footer a:hover{ color:#fff; text-decoration:none; }
.footer-bottom{ border-top:1px solid rgba(255,255,255,0.12); padding-top:20px; display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; font-size:12px; color:#8b90ab; }

.empty{ text-align:center; padding:50px 20px; color:var(--text-dim); }
.empty .glyph{ font-size:26px; margin-bottom:10px; }