/* ==========================================================================
   AHVA Master Theme
   Location: /assets/css/themes/master-style.css
   Scope: shared variables, utilities, common components
   ========================================================================== */

/* ---------------------------
   Theme variables (defaults)
   --------------------------- */
:root{
  /* Surfaces */
  --ahva-bg:            #1a1e22;      /* page background */
  --ahva-card:          #0f1216;      /* card surface */
  --ahva-card-sub:      rgba(20,24,28,.85);
  --ahva-card-border:   rgba(255,255,255,.06);
  --ahva-muted-surface: #20252d;      /* lighter gray band/panel */

  /* Text */
  --ahva-text:          #c8d2dc;
  --ahva-text-muted:    #aeb8c2;
  --ahva-text-strong:   #ffffff;

  /* Accents */
  --accent-blue:        #0b66ff;
  --accent-cyan:        #22d3ee;
  --accent-indigo:      #6366f1;
  --accent-purple:      #965aff;      /* for purple glow borders */

  /* Elevation (shadows) */
  --ahva-elev-1:        0 6px 18px rgba(0,0,0,.28);
  --ahva-elev-2:        0 10px 28px rgba(0,0,0,.35);
  --ahva-elev-3:        0 12px 40px rgba(0,0,0,.38);

  /* Layout */
  --page-max:           1100px;
  --page-max-narrow:    980px;
  --site-nav-h:         64px;         /* real value set after header partial loads */

  /* Z layers */
  --z-header:           2147483000;
  --z-over-header:      2147483200;

  /* Panelized frames (insights/quick actions/quote wrapper) */
  --panel-bg:           #2f343b;                  /* mid-grey */
  --panel-border:       rgba(255,255,255,.06);
  --panel-shadow:       0 12px 40px rgba(0,0,0,.35);
}

/* ---------------------------
   Base
   --------------------------- */
*,*::before,*::after{ box-sizing:border-box; }
html, body{
  margin:0; padding:0;
  background:var(--ahva-bg);
  color:var(--ahva-text);
  font-family: "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  line-height:1.6;
}
img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; }

/* Containers */
.container{ max-width: var(--page-max); margin-inline:auto; padding-inline:20px; }
.container-980{ max-width: var(--page-max-narrow); margin-inline:auto; padding-inline:20px; }

/* Spacer that matches fixed header height (used where needed) */
#header-spacer{ height: var(--site-nav-h); }

/* --------------------------------------------------------------------------
   Utilities
   -------------------------------------------------------------------------- */
.max-1100{ max-width: var(--page-max); }
.max-980{  max-width: var(--page-max-narrow); }
.mx-auto{  margin-left:auto; margin-right:auto; }

.surface-card{
  background: var(--ahva-card);
  border: 1px solid var(--ahva-card-border);
  border-radius: 16px;
  box-shadow: var(--ahva-elev-2);
}
.surface-muted{ background: var(--ahva-muted-surface); }

.elev-1{ box-shadow: var(--ahva-elev-1); }
.elev-2{ box-shadow: var(--ahva-elev-2); }
.elev-3{ box-shadow: var(--ahva-elev-3); }

.text-strong{ color: var(--ahva-text-strong) !important; }
.text-muted{  color: var(--ahva-text-muted) !important; }

.section{ padding: 40px 16px; }
.section-tight{ padding: 24px 16px; }

.no-overlay::before,
.no-overlay::after{ content:none !important; background:none !important; }

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */
.btn{
  --btn-pad-y: 10px;
  --btn-pad-x: 16px;
  display:inline-flex; align-items:center; justify-content:center;
  padding: var(--btn-pad-y) var(--btn-pad-x);
  border-radius: 999px;
  text-decoration:none;
  font-weight:700;
  line-height:1;
  gap:.5rem;
  transition: transform .12s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease;
}
.btn-primary{
  color:#0b0f14;
  background: linear-gradient(135deg, #82f7ff, #ffc16e);
  border:0;
  box-shadow: var(--ahva-elev-2);
}
.btn-primary:hover{ transform: translateY(-1px); box-shadow: var(--ahva-elev-3); }

.btn-outline{
  color: var(--ahva-text-strong);
  background: transparent;
  border: 2px solid rgba(255,255,255,.75);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.btn-outline:hover{ transform: translateY(-1px); }

.btn--glassy{
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.28);
  color: var(--ahva-text-strong);
  backdrop-filter: blur(8px) saturate(130%);
  -webkit-backdrop-filter: blur(8px) saturate(130%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.25),
    0 6px 16px rgba(0,0,0,0.25);
}
.btn--glassy:hover{
  background: rgba(255,255,255,0.10);
  border-color: rgba(255,255,255,0.40);
  transform: translateY(-1px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.35),
    0 10px 22px rgba(0,0,0,0.32);
}
.btn--xs{ --btn-pad-y: 7px; --btn-pad-x: 12px; font-size: 13px; }
.btn--w75{  width:75px;  min-width:75px; }
.btn--w150{ width:150px; min-width:150px; }

/* --------------------------------------------------------------------------
   Hero (homepage pattern)
   -------------------------------------------------------------------------- */
.hero{
  position: relative;
  height: 30vh; min-height: 240px; max-height: 800px;
  overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  text-align: center; color: #fff;
  /* default image; pages can override */
  background: url("/assets/img/ahva-hero@2x.jpg") center center / cover no-repeat;
}
.hero::after{
  content:""; position:absolute; inset:0;
  background: rgba(0,0,0,0.45); z-index:0;      /* legibility darken */
}
.hero .hero-content{
  position: relative; z-index: 1;
  max-width: 900px; padding: 0 20px;
}
.hero .kicker{
  font-size: 1rem; letter-spacing:.5px;
  display:inline-flex; align-items:center; gap:6px;
  background: rgba(0,0,0,0.6); padding:4px 10px; border-radius:6px;
  margin-bottom: 1rem;
}
.hero h1{ font-size: 2.8rem; margin:.5rem 0; line-height:1.2; }
.hero p { font-size: 1.1rem; color:#e5e5e5; margin-top:.5rem; }
@media (max-width: 768px){
  .hero { height: 35vh; min-height: 240px; }
  .hero h1 { font-size: 2rem; }
  .hero p   { font-size: 1rem; }
}

/* Page-specific hero image hook */
.hero.hero--home{
  background-image: url('/assets/img/hero-membership.png');
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

/* Only the shadow box overlaps header if used */
.overlap-header{
  position: relative;
  z-index: var(--z-over-header);
  transform: translateY(calc(-1 * var(--site-nav-h)));
}

/* --------------------------------------------------------------------------
   Shadow box helpers (opt-in)
   -------------------------------------------------------------------------- */
.hero-shadow-wrap{
  width:100%; max-width: 940px; margin-inline:auto;
  transform: translateY(var(--hero-box-shift, 0));
  pointer-events:auto; position: relative; z-index: var(--z-over-header);
}
.hero-shadow-box{
  background: rgba(12,16,22,.6);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 16px;
  padding: clamp(18px, 2.6vw, 28px);
  box-shadow: 0 22px 60px rgba(0,0,0,.45), 0 6px 18px rgba(0,0,0,.35);
  backdrop-filter: blur(6px) saturate(120%);
  -webkit-backdrop-filter: blur(6px) saturate(120%);
  text-align: center;
}
.hero-shadow-box.is-purple-glow{
  border-color: color-mix(in srgb, var(--accent-purple) 80%, transparent);
  box-shadow:
    0 22px 60px rgba(0,0,0,.45),
    0 6px 18px rgba(0,0,0,.35),
    0 0 12px color-mix(in srgb, var(--accent-purple) 28%, transparent);
}
.hero-shadow-box .eyebrow{ opacity:.95; font-weight:700; letter-spacing:.3px; margin:0; }
.hero-shadow-box h1{
  margin:.25rem 0 .25rem; font-weight:800; letter-spacing:.02em;
  font-size: clamp(1.4rem, 2.1vw, 2.1rem); line-height: 1.15; color: var(--ahva-text-strong);
}
.hero-shadow-box .lead{
  margin:0 auto; color:#c7d8ec;
  font-size: clamp(.95rem, 1.15vw, 1.05rem); max-width: 60ch;
}
.hero-shadow-box .hero-cta{ display:flex; gap:12px; margin-top:8px; flex-wrap:wrap; justify-content:center; }

/* --------------------------------------------------------------------------
   Cards
   -------------------------------------------------------------------------- */
.card{
  background: var(--ahva-card);
  border: 1px solid var(--ahva-card-border);
  border-radius: 16px;
  box-shadow: var(--ahva-elev-2);
  overflow: hidden;
}
.card .p{ padding: 18px 18px 20px; }
.card-200{ height:200px; display:flex; flex-direction:column; overflow:hidden; }
.card-175{ height:175px; display:flex; flex-direction:column; overflow:hidden; }
.card .p-flex{ display:flex; flex-direction:column; flex:1 1 auto; }
.card .cta-bottom{ margin-top:auto; }

/* --------------------------------------------------------------------------
   Bands / Sections
   -------------------------------------------------------------------------- */
/* Light gray parent band (used for Get Involved parent container) */
.band-muted{ background: var(--ahva-muted-surface); padding: 24px 16px; }

/* --------------------------------------------------------------------------
   Footer (shared)
   -------------------------------------------------------------------------- */
.site-footer { background:#11161c; padding: 2rem 1rem; color:#bbb; }
.footer-wrap  { max-width: var(--page-max); margin: 0 auto; }
.footer-grid  { display:flex; flex-wrap:wrap; gap:2rem; justify-content:space-between; }
.footer-brand img { height: 98px; width:auto; }

.footer-cards { display:flex; gap:2rem; }
.foot-card    { max-width: 200px; background: transparent; border: none; box-shadow: none; }
.foot-title   { font-size: .9rem; margin-bottom: .5rem; font-weight: 700; color:#fff; }
.foot-text    { font-size: .85rem; line-height: 1.4; }

.footer-meta { margin-top: 1.5rem; font-size: .8rem; text-align:center; color:#777; }

/* --------------------------------------------------------------------------
   Header helpers (non-destructive; header CSS lives in the partial)
   -------------------------------------------------------------------------- */
#site-header{ position: fixed; top:0; left:0; right:0; z-index: var(--z-header); }
/* Use #header-spacer where you need layout pushed below fixed header */

/* --------------------------------------------------------------------------
   Panelized frames (insights/quick actions/quote wrapper)
   -------------------------------------------------------------------------- */
.hero-quote{ padding: clamp(24px, 5vw, 56px) 0; }
.hero-quote .container{ padding-inline:20px; }

.hero-quote__frame,
.hero-quote__frame--panel{
  max-width: var(--page-max);
  margin: 0 auto;
  padding: clamp(24px, 3.5vw, 48px);
  background: var(--panel-bg) !important;               /* mid grey */
  border: 1px solid var(--panel-border);
  border-radius: 22px;
  box-shadow: var(--panel-shadow);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  position: relative;
}
.hero-quote__frame::after{
  content:"";
  position:absolute; left:8%; right:8%; bottom:-18px;
  height:22px; border-radius:50%;
  background: radial-gradient(ellipse at center, rgba(0,0,0,.30) 0%, rgba(0,0,0,0) 70%);
  filter: blur(6px); pointer-events:none;
}
.hero-quote__text{
  margin:0; color:#f8fafc; font-weight:650;
  line-height:1.15; font-size: clamp(20px, 4.5vw, 23px);
}

/* --------------------------------------------------------------------------
   Insights (Blog)
   -------------------------------------------------------------------------- */
.insights-band{ background:#1a1e22; padding:56px 20px 72px; }
.insights-wrap{ max-width: var(--page-max); margin:0 auto; display:block; }

.insights-header{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  margin:0 0 18px; text-align:left;
}
.insights-header .insights-icon{
  width:28px; height:28px; flex:0 0 28px; display:block;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,.35));
}
.insights-title{
  color:#fff; font-size:clamp(20px,3.4vw,22px);
  font-weight:650; margin:0; line-height:1.2;
}
.insights-lead{
  margin:6px 0 0; color:var(--ahva-text-muted);
  max-width:70ch; font-size:clamp(14px,1.6vw,18px); width:100%;
}

.insights-grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:28px;
}
@media (max-width: 960px){ .insights-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width: 640px){ .insights-grid{ grid-template-columns:1fr; } }

.insight-card{
  background: var(--ahva-card);
  border-radius: 16px; overflow:hidden;
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
  display:flex; flex-direction:column;
}
.insight-media{
  position:relative; background:#000; aspect-ratio:3/2;
  overflow:hidden; flex:0 0 auto;
}
.insight-media img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; opacity:.95;
  transition: transform .35s ease, opacity .25s ease;
}
.insight-link{
  display:flex; flex-direction:column; justify-content:flex-start;
  background: var(--ahva-card-sub);
  padding:24px 22px 28px; flex:1 1 auto; text-decoration:none;
}
.insight-card:hover .insight-media img{ transform:scale(1.04); opacity:1; }
.insight-title{
  color:#fff; margin:0 0 10px; font-weight:800;
  font-size:clamp(18px,2vw,28px); line-height:1.25;
}
.insight-excerpt{
  color:#c8d2dc; margin:0;
  font-size:clamp(14px,1.4vw,16px); line-height:1.6;
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
}

/* Optional full-width join card variant */
.insight-card--join { grid-column: 1 / -1; padding: clamp(20px, 3vw, 28px); }
.insight-card--join .join-card{
  background: var(--ahva-card-sub);
  border: 1px solid #2b3440;
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
  padding: clamp(18px, 2.2vw, 24px);
}

/* --------------------------------------------------------------------------
   Join (panelized)
   -------------------------------------------------------------------------- */
.join-section-pro { padding: 28px 0 64px; background: transparent; }
.join-section-pro .container{ max-width: var(--page-max); margin:0 auto; }

.join-section-pro .hero-quote__frame.join-frame{
  max-width: var(--page-max);
  margin: 0 auto; padding: 40px 28px;
  background: var(--panel-bg) !important; border:1px solid var(--panel-border);
  box-shadow: var(--panel-shadow); border-radius:22px;
}
.join-head{ margin-bottom:24px; position:relative; padding-bottom:22px; }
.join-head .eyebrow{
  display:inline-block; font-size:.85rem; letter-spacing:.08em; text-transform:uppercase;
  color:#7ea6ff; background:rgba(14,84,255,.12); border:1px solid rgba(14,84,255,.35);
  padding:4px 10px; border-radius:999px; margin-bottom:10px;
}
.join-title{
  margin:6px 0 10px; font-weight:800; font-size:clamp(26px,3.2vw,34px);
  color:#fff; text-align:center;
}
.join-title::after{
  content:""; position:absolute; left:50%; transform:translateX(-50%);
  bottom:-10px; width:clamp(140px, 28vw, 340px); height:3px; border-radius:3px;
  background: linear-gradient(90deg, #22d3ee, #60a5fa); opacity:.95;
}
.join-lead{
  color:#c7d2de; margin:0 0 10px; max-width:900px; text-align:left;
  margin-inline:auto;
}
.join-benefits{ margin:12px 0 0; padding-left:1.1rem; list-style:none; display:grid; gap:6px; }
.join-benefits li{ display:flex; gap:10px; align-items:flex-start; color:#d5dee8; }

.join-card{
  margin-top:28px; background:var(--ahva-card);
  border:1px solid #2a3542; border-radius:16px; padding:22px;
  box-shadow:0 10px 28px rgba(0,0,0,.35);
}
.join-card__title{ margin:0 0 12px; color:#eaf2fb; font-size:1.25rem; font-weight:700; }

.join-form{ display:grid; gap:14px; }
.join-form .form-row{ display:grid; gap:14px; align-items:start; }
.join-form .form-row.two{ grid-template-columns:1fr 1fr; }
@media (max-width: 760px){ .join-form .form-row.two{ grid-template-columns:1fr; } }

.join-form .form-field label{
  display:block; text-align:left; font-size:.9rem; color:#c7d2de; margin:0 0 6px;
}
.join-form input, .join-form textarea{
  width:100%; background:#0f172a; color:#f8fafc; border:1px solid #415065;
  border-radius:10px; padding:12px 12px; line-height:1.25;
  transition:border-color .2s ease, box-shadow .2s ease;
}
.join-form textarea{ resize:vertical; }
.join-form input:focus, .join-form textarea:focus{
  outline:none; border-color: var(--accent-blue);
  box-shadow: 0 0 0 3px rgba(11,102,255,.2);
}
.join-form .actions{ align-items:center; display:flex; gap:14px; flex-wrap:wrap; margin-top:4px; }

.btn-join{
  background:#2b89ff; color:#fff; padding:10px 16px; border:none; border-radius:10px;
  cursor:pointer; font-weight:700; transition: background .2s ease;
  box-shadow: 0 10px 28px rgba(11,102,255,.28);
}
.btn-join:hover{ background:#1d6fde; box-shadow: 0 12px 36px rgba(11,102,255,.38); }
.btn-join:focus-visible{
  outline:none;
  box-shadow: 0 0 0 3px rgba(11,102,255,.45), 0 12px 36px rgba(11,102,255,.38);
}

/* --------------------------------------------------------------------------
   Misc polish
   -------------------------------------------------------------------------- */
.hero::before, .hero::after { mix-blend-mode: normal !important; } /* guard */

/* Allow the home page (and any page) to hide header actions via body class */
.hide-header-actions .header-actions {
  display: none !important;
}

/* Ensure hero for home uses the membership image */
.hero.hero--home{
  background-image: url('/assets/img/hero-membership.png');
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}
/* Badge wrapper used before section titles (e.g., blog icon) */
.icon-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:32px;
  height:32px;
  border-radius:8px;
  background: var(--accent-blue, #2563eb);
  color:#fff;                                /* <- powers SVG stroke via currentColor */
  border:1px solid rgba(255,255,255,.08);
  box-shadow: 0 8px 24px rgba(2, 6, 23, 0.4),
              inset 0 1px 0 rgba(255,255,255,.06);
  flex:0 0 32px;                             /* don’t squish */
}

/* Make sure the SVG inherits the color and sizes nicely */
.icon-badge svg{
  display:block;
  width:20px;
  height:20px;
  stroke: currentColor;
}

/* Title row so the badge and heading align correctly */
.titleline{
  display:flex;
  align-items:center;
  gap:10px;
}

.format-toolbar {
  display: flex;
  gap: .5rem;
  flex-wrap: wrap;
  align-items: center;
  background: var(--ahva-panel-bg);
  border: 1px solid var(--ahva-border, rgba(255,255,255,.08));
  box-shadow: var(--ahva-shadow, 0 6px 24px rgba(0,0,0,.25));
  border-radius: 12px;
  padding: .5rem;
  margin-bottom: .5rem;
}
.fmt-btn {
  appearance: none;
  border: 1px solid var(--ahva-border, rgba(255,255,255,.12));
  background: var(--ahva-panel-elev, rgba(255,255,255,.02));
  color: var(--ahva-text, #e8e8ef);
  border-radius: 10px;
  padding: .4rem .6rem;
  font-weight: 600;
  cursor: pointer;
}
.fmt-btn:hover, .fmt-btn:focus {
  outline: none;
  border-color: var(--ahva-accent, #75dfff);
  box-shadow: 0 0 0 2px color-mix(in oklab, var(--ahva-accent) 30%, transparent);
}
#reply-body {
  background: var(--ahva-panel-bg);
  color: var(--ahva-text);
  border: 1px solid var(--ahva-border, rgba(255,255,255,.12));
  border-radius: 12px;
  padding: .75rem .9rem;
}

.format-toolbar {
  display: flex;
  gap: .5rem;
  flex-wrap: wrap;
  align-items: center;
  background: var(--ahva-panel-bg);
  border: 1px solid var(--ahva-border, rgba(255,255,255,.08));
  box-shadow: var(--ahva-shadow, 0 6px 24px rgba(0,0,0,.25));
  border-radius: 12px;
  padding: .5rem;
  margin-bottom: .5rem;
}
.fmt-btn {
  appearance: none;
  border: 1px solid var(--ahva-border, rgba(255,255,255,.12));
  background: var(--ahva-panel-elev, rgba(255,255,255,.02));
  color: var(--ahva-text, #e8e8ef);
  border-radius: 10px;
  padding: .4rem .6rem;
  font-weight: 600;
  cursor: pointer;
}
.fmt-btn:hover, .fmt-btn:focus {
  outline: none;
  border-color: var(--ahva-accent, #75dfff);
  box-shadow: 0 0 0 2px color-mix(in oklab, var(--ahva-accent) 30%, transparent);
}
#reply-body {
  background: var(--ahva-panel-bg);
  color: var(--ahva-text);
  border: 1px solid var(--ahva-border, rgba(255,255,255,.12));
  border-radius: 12px;
  padding: .75rem .9rem;
}

/* Age Gate */
.agegate { position: fixed; inset: 0; display: none; z-index: 2000;
  background: rgba(0,0,0,.6); backdrop-filter: blur(3px); }
.agegate[open] { display: grid; place-items: center; }

.agegate__panel { width: min(560px, 92vw);
  background: var(--ahva-panel-bg, #151a20);
  color: var(--ahva-text, #e8ecf1);
  border: 1px solid var(--ahva-border, rgba(255,255,255,.08));
  border-radius: 16px; box-shadow: 0 30px 80px rgba(0,0,0,.55);
  padding: 18px; }
.agegate__header h2 { margin: 0; font-weight: 800; }

.agegate__sub { margin: 8px 0 12px; color: var(--ahva-muted, #a7b3c2); }

.agegate__quick { display: flex; gap: .5rem; flex-wrap: wrap; margin-bottom: .5rem; }
.agegate__or { text-align: center; color: var(--ahva-muted); margin: .25rem 0 .75rem; font-size: .9rem; }

.agegate__form { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; }
.agegate__input { width: 64px; text-align: center; padding: .55rem .4rem;
  background:#0f141a; color: var(--ahva-text); border-radius: 10px;
  border:1px solid rgba(255,255,255,.12); font-weight: 700; }
.agegate__input--year { width: 90px; }
.agegate__sep { color: var(--ahva-muted); padding: 0 .15rem; }

.agegate__btn { border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06); color: var(--ahva-text);
  border-radius: 10px; padding: .55rem .8rem; font-weight: 800; cursor: pointer; }
.agegate__btn:hover { border-color: var(--ahva-accent, #74e0ff);
  box-shadow: 0 8px 18px rgba(116,224,255,.14); }

.agegate__btn--primary { background:
  linear-gradient(180deg, var(--ahva-accent,#74e0ff),
  color-mix(in oklab, var(--ahva-accent,#74e0ff) 70%, #0b0f14 30%));
  color:#081017; border-color: color-mix(in oklab, var(--ahva-accent) 60%, #000 40%); }

.agegate__error { min-height: 1.2rem; margin:.6rem 0 0; color: #ff9a9a; font-weight: 700; }

/* Hide body scroll when gate is open */
html.agegate--locked, body.agegate--locked { overflow: hidden; }

/* Screen reader utility already used elsewhere, included for safety */
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); border:0; }

.hero .kicker {
  font-size: 1rem;
  letter-spacing: 0.5px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(0,0,0,0.6);
  padding: 4px 10px;
  border-radius: 6px;
  margin-bottom: 1rem;
}