/* ==========================================================================
   AFRICAN HOUR — Design Tokens & Base Styles
   Palette: black / red / gold / green — blended to the African Hour Show logo
   Signature motif: the "timecode dial" — a ring of broadcast tick marks,
   echoing both a clock ("Hour") and an on-air VU dial (talk radio).
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600;9..144,700&family=Inter:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500&display=swap');

:root{
  /* --- color tokens --- */
  --ah-black:       #0A0A0C;   /* primary dark ground */
  --ah-black-soft:  #16171C;   /* panels on dark */
  --ah-ink:         #16171A;   /* body text on light */
  --ah-blue:        #9E2B23;   /* primary action — logo red */
  --ah-blue-bright: #F2B01E;   /* accent — logo gold */
  --ah-blue-pale:   #FAF3E0;   /* tinted section bg */
  --ah-white:       #FFFFFF;

  --ah-line: rgba(255,255,255,0.12);
  --ah-line-dark: rgba(10,10,12,0.10);

  /* --- type --- */
  --font-display: 'Fraunces', Georgia, serif;
  --font-body: 'Inter', -apple-system, Segoe UI, sans-serif;
  --font-mono: 'IBM Plex Mono', 'Courier New', monospace;

  /* --- layout --- */
  --maxw: 1180px;
  --radius: 14px;
  --radius-sm: 8px;
  --shadow: 0 12px 30px -14px rgba(10,10,12,0.35);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  font-family:var(--font-body);
  color:var(--ah-ink);
  background:var(--ah-white);
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
h1,h2,h3,h4{ font-family:var(--font-display); margin:0 0 .5em; line-height:1.1; font-weight:600; }
p{ margin:0 0 1em; }
ul{ margin:0; padding:0; list-style:none; }
button{ font-family:inherit; cursor:pointer; }
:focus-visible{ outline:3px solid var(--ah-blue-bright); outline-offset:2px; }

.wrap{ max-width:var(--maxw); margin:0 auto; padding:0 24px; }
.eyebrow{
  font-family:var(--font-mono);
  font-size:.72rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--ah-blue-bright);
  display:inline-flex;
  align-items:center;
  gap:.5em;
}
.eyebrow::before{
  content:"";
  width:7px;height:7px;border-radius:50%;
  background:var(--ah-blue-bright);
  box-shadow:0 0 0 3px rgba(242,176,30,.25);
}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5em;
  padding:.8em 1.5em;
  border-radius:999px;
  font-weight:600; font-size:.92rem;
  border:1px solid transparent;
  transition:transform .15s ease, background .15s ease, color .15s ease, border-color .15s ease;
}
.btn:hover{ transform:translateY(-2px); }
.btn-primary{ background:var(--ah-blue); color:var(--ah-white); }
.btn-primary:hover{ background:#C43A2C; }
.btn-outline{ border-color:var(--ah-line-dark); color:var(--ah-ink); background:transparent; }
.btn-outline:hover{ border-color:var(--ah-blue); color:var(--ah-blue); }
.btn-ghost-dark{ border-color:var(--ah-line); color:var(--ah-white); }
.btn-ghost-dark:hover{ border-color:var(--ah-blue-bright); color:var(--ah-blue-bright); }
.btn-sm{ padding:.5em 1.1em; font-size:.82rem; }

/* ==========================================================================
   HEADER / SITE NAV
   ========================================================================== */
.site-header{
  background:#31302C;
  color:var(--ah-white);
  position:sticky; top:0; z-index:50;
  border-bottom:1px solid var(--ah-line);
}
.site-header .wrap{
  display:flex; align-items:center; justify-content:space-between;
  height:92px;
}
.logo{ display:flex; align-items:center; gap:.65em; }
.logo-mark{ width:68px; height:68px; flex-shrink:0; }
.logo-word{ font-family:var(--font-display); font-size:1.18rem; letter-spacing:.01em; white-space:nowrap; }
.logo-word b{ color:var(--ah-blue-bright); font-weight:700; }

.main-nav ul{ display:flex; gap:2px; align-items:center; }
.main-nav a{
  display:block; padding:.6em 1em; font-size:.92rem; font-weight:500;
  border-radius:999px; color:rgba(255,255,255,0.78);
  transition:background .15s ease, color .15s ease;
}
.main-nav a:hover{ color:var(--ah-white); background:rgba(255,255,255,0.06); }
.main-nav a.active{ color:var(--ah-white); background:var(--ah-blue); }

.nav-toggle{
  display:none; background:none; border:0; color:var(--ah-white);
  width:40px; height:40px; align-items:center; justify-content:center;
}
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after{
  content:""; display:block; width:22px; height:2px; background:currentColor; position:relative; transition:.2s;
}
.nav-toggle span::before{ position:absolute; top:-7px; }
.nav-toggle span::after{ position:absolute; top:7px; }

@media (max-width:1000px){
  .nav-toggle{ display:flex; }
  .main-nav{
    position:absolute; top:100%; left:0; right:0; background:#31302C;
    border-bottom:0;
    max-height:0; overflow:hidden; transition:max-height .25s ease;
  }
  .main-nav.open{ max-height:400px; border-bottom:1px solid var(--ah-line); }
  .main-nav ul{ flex-direction:column; align-items:stretch; padding:8px 24px 18px; gap:4px; }
  .main-nav a{ padding:.75em 1em; }
}

/* ==========================================================================
   HERO (home)
   ========================================================================== */
.hero{
  background:
    radial-gradient(760px 360px at 88% -10%, rgba(158,43,35,0.32), transparent 62%),
    var(--ah-black);
  color:var(--ah-white);
  position:relative;
  overflow:hidden;
  padding:96px 0 84px;
}
.hero-photo{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; opacity:.10; z-index:0;
  filter:blur(9px) saturate(0.85);
  transform:scale(1.06); /* hides the blurred edges */
}
.hero-dial{
  position:absolute; right:-120px; top:50%; transform:translateY(-50%);
  width:520px; height:520px; opacity:.5;
}
.hero .wrap{ position:relative; z-index:2; }
.hero-inner{ max-width:640px; }
.hero h1{ font-size:clamp(2.2rem, 5vw, 3.6rem); color:var(--ah-white); }
.hero h1 em{ font-style:normal; color:var(--ah-blue-bright); }
.hero p.lede{ font-size:1.12rem; color:rgba(255,255,255,0.78); max-width:52ch; }
.hero-actions{ display:flex; gap:14px; margin-top:1.8em; flex-wrap:wrap; }
.hero-stats{ display:flex; gap:36px; margin-top:3em; flex-wrap:wrap; }
.hero-stats div b{ display:block; font-family:var(--font-display); font-size:1.6rem; color:var(--ah-white); }
.hero-stats div span{ font-family:var(--font-mono); font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; color:rgba(255,255,255,0.55); }

/* ==========================================================================
   SECTIONS / MISSION-VISION
   ========================================================================== */
section{ padding:80px 0; }
.section-head{ max-width:640px; margin-bottom:2.6em; }
.section-head h2{ font-size:clamp(1.7rem, 3.4vw, 2.4rem); }
.tag-row{ margin-bottom:.9em; }

.mv-grid{ display:grid; grid-template-columns:1fr 1fr; gap:24px; }
.mv-card{
  background:var(--ah-blue-pale); border-radius:var(--radius); padding:34px;
  border:1px solid rgba(158,43,35,0.12);
}
.mv-card.dark{ background:var(--ah-black); color:var(--ah-white); }
.mv-card .eyebrow{ margin-bottom:.9em; }
.mv-card.dark .eyebrow{ color:var(--ah-blue-bright); }
.mv-card p{ font-size:1.05rem; color:inherit; opacity:.92; }

/* ---------- theme / category cards (4 pillars) ---------- */
.theme-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
.theme-card{
  border:1px solid var(--ah-line-dark); border-radius:var(--radius);
  padding:28px 24px; background:var(--ah-white); box-shadow:var(--shadow);
  transition:transform .18s ease, border-color .18s ease;
  display:flex; flex-direction:column; gap:14px; height:100%;
}
.theme-card:hover{ transform:translateY(-4px); border-color:var(--ah-blue); }
.theme-icon{ width:44px; height:44px; color:var(--ah-blue); }
.theme-card h3{ font-size:1.18rem; }
.theme-card p{ font-size:.92rem; color:#4b4d53; flex:1; }
.theme-card .btn{ align-self:flex-start; }

@media (max-width:980px){ .theme-grid{ grid-template-columns:1fr 1fr; } .mv-grid{ grid-template-columns:1fr; } }
@media (max-width:560px){ .theme-grid{ grid-template-columns:1fr; } }

/* ==========================================================================
   CATEGORY PAGE — banner, filters
   ========================================================================== */
.cat-banner{
  background:var(--ah-black); color:var(--ah-white); padding:64px 0 0;
  position:relative; overflow:hidden;
}
.cat-banner .wrap{ position:relative; z-index:2; }
.cat-banner h1{ color:var(--ah-white); font-size:clamp(2rem,4.4vw,3rem); }
.cat-banner p{ color:rgba(255,255,255,.75); max-width:60ch; }
.cat-ticks{ position:absolute; inset:0; opacity:.18; }
.theme-photo-band{ position:relative; height:220px; margin-top:32px; overflow:hidden; }
.theme-photo-band img{ width:100%; height:100%; object-fit:cover; display:block; }
.theme-photo-band::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(10,10,12,0) 40%, rgba(10,10,12,.55) 100%);
}
.theme-photo-band .band-cap{
  position:absolute; left:24px; bottom:48px; z-index:2; color:#fff;
  font-family:var(--font-mono); font-size:.72rem; letter-spacing:.05em; text-transform:uppercase;
}
@media (max-width:600px){ .theme-photo-band{ height:150px; } }

/* ---------- culture-in-pictures gallery ---------- */
.gallery-grid{ display:grid; grid-template-columns:repeat(4,1fr); grid-auto-rows:170px; gap:14px; margin-top:32px; }
.gallery-item{ position:relative; border-radius:var(--radius-sm); overflow:hidden; background:#eee; }
.gallery-item img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .35s ease; }
.gallery-item:hover img{ transform:scale(1.06); }
.gallery-item.tall{ grid-row:span 2; }
.gallery-item.wide{ grid-column:span 2; }
.gallery-cap{
  position:absolute; left:0; right:0; bottom:0; padding:22px 12px 8px 12px; color:#fff;
  font-family:var(--font-mono); font-size:.7rem; letter-spacing:.03em;
  background:linear-gradient(to top, rgba(10,10,12,.82), transparent);
}
@media (max-width:900px){ .gallery-grid{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:640px){
  .gallery-grid{ grid-template-columns:repeat(2,1fr); grid-auto-rows:140px; }
  .gallery-item.wide{ grid-column:span 2; }
  .gallery-item.tall{ grid-row:span 1; }
}

/* ---------- home page community strip ---------- */
.community-strip{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-top:2.2em; }
.community-strip .c-item{ border-radius:var(--radius-sm); overflow:hidden; aspect-ratio:4/5; }
.community-strip .c-item img{ width:100%; height:100%; object-fit:cover; display:block; }
@media (max-width:760px){ .community-strip{ grid-template-columns:repeat(2,1fr); } }

.toolbar{
  display:flex; flex-wrap:wrap; gap:14px; align-items:center; justify-content:space-between;
  background:var(--ah-white); border:1px solid var(--ah-line-dark); border-radius:var(--radius);
  padding:16px 20px; margin-top:-30px; position:relative; z-index:3; box-shadow:var(--shadow);
}
.toolbar input[type="search"]{
  flex:1; min-width:200px; border:1px solid var(--ah-line-dark); border-radius:999px;
  padding:.65em 1.1em; font-family:inherit; font-size:.92rem;
}
.chip-row{ display:flex; gap:8px; flex-wrap:wrap; }
.chip{
  border:1px solid var(--ah-line-dark); background:var(--ah-white); border-radius:999px;
  padding:.4em .95em; font-size:.8rem; font-weight:600; color:#4b4d53;
}
.chip.active{ background:var(--ah-black); border-color:var(--ah-black); color:var(--ah-white); }
.result-count{ font-family:var(--font-mono); font-size:.75rem; color:#8a8d94; }

/* ---------- video card grid ---------- */
.video-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:26px; margin-top:40px; }
@media (max-width:980px){ .video-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:680px){ .video-grid{ grid-template-columns:1fr; } }

.video-card{
  border:1px solid var(--ah-line-dark); border-radius:var(--radius); overflow:hidden;
  background:var(--ah-white); display:flex; flex-direction:column;
  transition:box-shadow .2s ease, transform .2s ease;
}
.video-card:hover{ box-shadow:var(--shadow); transform:translateY(-3px); }
.video-thumb{
  aspect-ratio:16/9; position:relative; background:linear-gradient(135deg,var(--ah-blue),#0A0A0C);
  display:flex; align-items:center; justify-content:center; overflow:hidden;
}
.video-thumb img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.video-thumb iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }
.video-thumb .thumb-fallback{ color:rgba(255,255,255,.7); font-size:.78rem; text-align:center; padding:0 16px; }
.video-thumb span.dur{
  position:absolute; right:8px; bottom:8px; background:rgba(10,10,12,0.75); color:#fff;
  font-family:var(--font-mono); font-size:.7rem; padding:2px 7px; border-radius:4px; z-index:2;
}
.play-btn{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:52px; height:52px; border-radius:50%; background:rgba(10,10,12,.45); border:1.5px solid rgba(255,255,255,.75);
  display:flex; align-items:center; justify-content:center; color:#fff; z-index:2; font-size:1rem;
  transition:background .15s ease, transform .15s ease;
}
.play-btn:hover{ background:var(--ah-blue); transform:translate(-50%,-50%) scale(1.08); }
.video-body{ padding:18px 18px 6px; display:flex; flex-direction:column; gap:8px; flex:1; }
.video-cat{ font-family:var(--font-mono); font-size:.68rem; letter-spacing:.08em; text-transform:uppercase; color:var(--ah-blue); }
.video-title{ font-size:1.02rem; font-weight:700; font-family:var(--font-body); line-height:1.3; }
.video-desc{ font-size:.86rem; color:#5b5d63; margin-bottom:0; }
.video-meta{ display:flex; justify-content:space-between; align-items:center; font-size:.78rem; color:#8a8d94; margin-top:auto; padding-top:10px; }

/* ratings / stars */
.stars{ display:inline-flex; gap:2px; }
.stars button{ background:none; border:0; padding:0; width:18px; height:18px; color:#c7c9ce; }
.stars button.filled{ color:var(--ah-blue); }
.rating-line{ display:flex; align-items:center; gap:8px; font-size:.78rem; color:#5b5d63; padding:10px 18px 0; }

/* card footer: comments / suggestion toggles */
.card-actions{
  display:flex; border-top:1px solid var(--ah-line-dark); margin-top:14px;
}
.card-actions button{
  flex:1; background:none; border:0; padding:.75em .5em; font-size:.78rem; font-weight:600;
  color:#5b5d63; display:flex; align-items:center; justify-content:center; gap:6px;
  border-right:1px solid var(--ah-line-dark);
}
.card-actions button:last-child{ border-right:0; }
.card-actions button:hover, .card-actions button.on{ color:var(--ah-blue); background:var(--ah-blue-pale); }
.card-actions svg{ width:15px; height:15px; }

.panel{ display:none; border-top:1px solid var(--ah-line-dark); padding:14px 18px 18px; background:#FBF7EC; }
.panel.open{ display:block; }
.panel h4{ font-size:.8rem; text-transform:uppercase; letter-spacing:.06em; font-family:var(--font-mono); font-weight:500; color:#8a8d94; margin-bottom:.8em; }

.comment-list{ display:flex; flex-direction:column; gap:10px; margin-bottom:12px; max-height:180px; overflow:auto; }
.comment{ font-size:.85rem; background:#fff; border:1px solid var(--ah-line-dark); border-radius:var(--radius-sm); padding:8px 12px; }
.comment b{ display:block; font-size:.78rem; color:var(--ah-blue); }

.mini-form{ display:flex; gap:8px; }
.mini-form input, .mini-form textarea{
  flex:1; min-width:0; width:100%; border:1px solid var(--ah-line-dark); border-radius:var(--radius-sm);
  padding:.6em .8em; font-family:inherit; font-size:.85rem; resize:none;
}
.mini-form button{ flex-shrink:0; }
.mini-form button{
  background:var(--ah-blue); color:#fff; border:0; border-radius:var(--radius-sm);
  padding:0 16px; font-weight:600; font-size:.85rem;
}
.mini-form button:hover{ background:#C43A2C; }

/* ---------- Q&A accordion ---------- */
.qa-section{ background:var(--ah-blue-pale); }
.qa-list{ display:flex; flex-direction:column; gap:10px; margin-top:1.5em; }
.qa-item{ background:#fff; border:1px solid rgba(158,43,35,0.14); border-radius:var(--radius-sm); overflow:hidden; }
.qa-q{
  width:100%; text-align:left; background:none; border:0; padding:16px 20px;
  display:flex; justify-content:space-between; align-items:center; gap:12px;
  font-weight:600; font-size:.96rem;
}
.qa-q .qa-plus{ transition:transform .2s ease; color:var(--ah-blue); flex-shrink:0; }
.qa-item.open .qa-q .qa-plus{ transform:rotate(45deg); }
.qa-a{ max-height:0; overflow:hidden; transition:max-height .25s ease; padding:0 20px; font-size:.9rem; color:#4b4d53; }
.qa-item.open .qa-a{ max-height:240px; padding-bottom:16px; }
.ask-box{ margin-top:28px; background:#fff; border:1px dashed rgba(158,43,35,0.35); border-radius:var(--radius); padding:22px; }
.ask-box form{ display:flex; gap:10px; margin-top:10px; flex-wrap:wrap; }
.ask-box input{ flex:1; min-width:220px; border:1px solid var(--ah-line-dark); border-radius:999px; padding:.75em 1.2em; font-family:inherit; }

/* ---------- suggestion banner (site-wide) ---------- */
.suggest-cta{ background:#31302C; color:#fff; }
.suggest-cta .wrap{ display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap; }
.suggest-cta h2{ color:#fff; font-size:1.7rem; margin:0; }
.suggest-cta p{ color:rgba(255,255,255,.7); margin:.3em 0 0; }
.suggest-form{ display:flex; gap:10px; flex-wrap:wrap; }
.suggest-form input{ border-radius:999px; border:1px solid var(--ah-line); background:rgba(255,255,255,0.06); color:#fff; padding:.8em 1.3em; min-width:260px; font-family:inherit; }
.suggest-form input::placeholder{ color:rgba(255,255,255,.5); }
/* identity fields (name/email/country) — light boxes need dark text; keep last so nothing overrides */
.suggest-form .id-fields{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:8px; width:100%; margin-bottom:8px; }
.suggest-form .id-fields input{ border:1px solid rgba(255,255,255,.25); background:#fff !important; border-radius:var(--radius-sm); padding:.6em .8em; font-family:inherit; font-size:.82rem; min-width:0; color:#1c1c22 !important; }
.suggest-form .id-fields input::placeholder{ color:#6e7076 !important; }
.mini-form .id-fields input{ font-size:.8rem; color:#1c1c22; }
@media (max-width:560px){ .suggest-form .id-fields, .mini-form .id-fields{ grid-template-columns:1fr; } .suggest-form .id-fields input{ min-width:0; } }

/* ---------- bio card (about page) ---------- */
.bio-wrap{ display:grid; grid-template-columns:280px 1fr; gap:40px; align-items:start; }
.bio-card{
  border:1px solid var(--ah-line-dark); border-radius:var(--radius); overflow:hidden;
  box-shadow:var(--shadow); background:#fff;
}
.bio-photo{ aspect-ratio:1/1; background:linear-gradient(160deg,var(--ah-blue),var(--ah-black)); display:flex; align-items:center; justify-content:center; }
.bio-photo svg{ width:56%; height:56%; color:rgba(255,255,255,.85); }
.bio-card-body{ padding:20px; text-align:center; }
.bio-card-body h3{ font-size:1.15rem; margin-bottom:.15em; }
.bio-role{ font-family:var(--font-mono); font-size:.72rem; letter-spacing:.06em; text-transform:uppercase; color:var(--ah-blue); }
.bio-social{ display:flex; gap:10px; justify-content:center; margin-top:14px; }
.bio-social a{ width:34px; height:34px; border-radius:50%; border:1px solid var(--ah-line-dark); display:flex; align-items:center; justify-content:center; color:var(--ah-ink); }
.bio-social a:hover{ background:var(--ah-blue); color:#fff; border-color:var(--ah-blue); }
.bio-copy h2{ margin-top:0; }
.bio-copy blockquote{ font-family:var(--font-display); font-size:1.3rem; color:var(--ah-blue); border-left:3px solid var(--ah-blue); padding-left:18px; margin:1.4em 0; }
@media (max-width:760px){ .bio-wrap{ grid-template-columns:1fr; } .bio-card{ max-width:320px; margin:0 auto; } }

/* ==========================================================================
   FOOTER
   ========================================================================== */
.site-footer{ background:#F0B02A; color:rgba(26,18,3,.8); padding:60px 0 26px; }
.footer-grid{ display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:36px; }
.footer-brand p{ color:rgba(26,18,3,.68); font-size:.9rem; max-width:32ch; }
.footer-col h4{ color:#221803; font-family:var(--font-mono); font-size:.75rem; letter-spacing:.08em; text-transform:uppercase; margin-bottom:1em; }
.footer-col ul{ display:flex; flex-direction:column; gap:.6em; }
.footer-col a{ font-size:.9rem; color:rgba(26,18,3,.75); }
.footer-col a:hover{ color:#9E2B23; }
.footer-bottom{
  display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:10px;
  border-top:1px solid rgba(26,18,3,.22); margin-top:44px; padding-top:22px;
  font-size:.78rem; color:rgba(26,18,3,.6);
}
.footer-social{ display:flex; gap:10px; }
.footer-social a{ width:32px; height:32px; border-radius:50%; border:1px solid rgba(26,18,3,.3); display:flex; align-items:center; justify-content:center; color:rgba(26,18,3,.75); }
.footer-social a:hover{ border-color:#9E2B23; color:#9E2B23; }
@media (max-width:820px){ .footer-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:520px){ .footer-grid{ grid-template-columns:1fr; } }

/* ---------- booking embed (about page) ---------- */
.booking-embed{
  max-width:760px; margin:2em auto 0; background:#fff; border-radius:var(--radius);
  border:1px solid rgba(158,43,35,0.14); box-shadow:var(--shadow); overflow:hidden; padding:6px;
}

/* utility */
.visually-hidden{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }


/* ---------- contact form (about page) ---------- */
.contact-form{ display:flex; flex-direction:column; gap:14px; background:#fff; border:1px solid var(--ah-line-dark); border-radius:var(--radius); padding:26px; box-shadow:var(--shadow); max-width:860px; }
.contact-form .cf-row{ display:flex; gap:12px; flex-wrap:wrap; align-items:center; }
.contact-form input[type="text"], .contact-form input[type="email"]{ flex:1; min-width:180px; border:1px solid var(--ah-line-dark); border-radius:999px; padding:.8em 1.2em; font-family:inherit; font-size:.94rem; }
.contact-form textarea{ width:100%; min-height:160px; resize:vertical; border:1px solid var(--ah-line-dark); border-radius:var(--radius-sm); padding:1em 1.2em; font-family:inherit; font-size:.94rem; line-height:1.5; }
.contact-form .cf-actions{ justify-content:space-between; }
.contact-form .file-wrap{ display:flex; flex-direction:column; gap:2px; font-size:.72rem; color:#8a8d94; }
.contact-form input[type="file"]{ font-size:.8rem; font-family:inherit; }


/* ---------- motion ---------- */
@keyframes fadeUp{ from{ opacity:0; transform:translateY(26px); } to{ opacity:1; transform:none; } }
@keyframes heroPhotoIn{ from{ opacity:0; } to{ opacity:.10; } }
@keyframes dialSpin{ from{ transform:translateY(-50%) rotate(0deg); } to{ transform:translateY(-50%) rotate(360deg); } }
@keyframes kenBurns{ from{ transform:scale(1); } to{ transform:scale(1.09); } }

.hero-inner > *{ opacity:0; animation:fadeUp .85s ease forwards; }
.hero-inner > *:nth-child(1){ animation-delay:.05s; }
.hero-inner > *:nth-child(2){ animation-delay:.18s; }
.hero-inner > *:nth-child(3){ animation-delay:.32s; }
.hero-inner > *:nth-child(4){ animation-delay:.48s; }
.hero-inner > *:nth-child(5){ animation-delay:.64s; }
.hero-photo{ animation:heroPhotoIn 1.8s ease both; }
.hero-dial{ animation:dialSpin 140s linear infinite; }

/* Faces across the continent — slow, stately drift */
.community-strip .c-item{ border-radius:var(--radius-sm); }
.community-strip .c-item img{ animation:kenBurns 18s ease-in-out infinite alternate; will-change:transform; }
.community-strip .c-item:nth-child(2) img{ animation-delay:4.5s; }
.community-strip .c-item:nth-child(3) img{ animation-delay:9s; }
.community-strip .c-item:nth-child(4) img{ animation-delay:13.5s; }

/* scroll-in reveals (class added by js) */
.reveal{ opacity:0; transform:translateY(26px); transition:opacity .8s ease, transform .8s ease; }
.reveal.in{ opacity:1; transform:none; }

@media (prefers-reduced-motion: reduce){
  .hero-inner > *, .hero-photo{ animation:none; opacity:1; }
  .hero-photo{ opacity:.10; }
  .hero-dial, .community-strip .c-item img{ animation:none; }
  .reveal{ opacity:1; transform:none; transition:none; }
}

/* footer brand on gold */
.site-footer .logo{ flex-direction:column; align-items:flex-start; gap:10px; }
.site-footer .logo-word{ color:#221803; white-space:nowrap; }
.site-footer .logo-word b{ color:#9E2B23; }

/* ---------- responsive polish ---------- */
@media (max-width:640px){
  .site-header .wrap{ height:68px; padding:0 14px; gap:10px; }
  .site-header .logo{ gap:.5em; min-width:0; }
  .site-header .logo img{ height:44px !important; border-radius:8px !important; }
  .logo-word{ font-size:clamp(.78rem, 3.4vw, 1rem); letter-spacing:0; }
  section{ padding:56px 0; }
  .hero{ padding:64px 0 56px; }
  .hero-stats{ gap:22px; }
  .site-footer .logo img{ height:60px !important; }
  .toolbar{ margin-top:16px; }
}
@media (max-width:360px){
  .site-header .logo img{ height:38px !important; }
  .logo-word{ font-size:.72rem; }
}

/* ---------- click-to-enlarge feature cards ---------- */
.zoom-overlay{ position:fixed; inset:0; background:rgba(10,10,12,.72); z-index:98; opacity:0; pointer-events:none; transition:opacity .25s ease; }
.zoom-overlay.on{ opacity:1; pointer-events:auto; }
.video-card{ cursor:zoom-in; }
.video-card.zoomed{
  position:fixed; z-index:99; top:50%; left:50%; transform:translate(-50%,-50%);
  width:min(680px,94vw); max-height:88vh; overflow:auto; cursor:default;
  overscroll-behavior:contain; -webkit-overflow-scrolling:touch;
  box-shadow:0 40px 90px -20px rgba(0,0,0,.65);
}
.zoom-close{
  position:sticky; top:10px; margin-left:calc(100% - 46px); z-index:3;
  width:36px; height:36px; border-radius:50%; border:0; background:rgba(10,10,12,.75); color:#fff;
  font-size:1rem; display:flex; align-items:center; justify-content:center;
}
/* ---------- gallery lightbox ---------- */
.gallery-item, .community-strip .c-item{ cursor:zoom-in; }
.lightbox{ position:fixed; inset:0; z-index:100; display:flex; align-items:center; justify-content:center; background:rgba(10,10,12,.88); cursor:zoom-out; }
.lightbox img{ max-width:94vw; max-height:90vh; border-radius:10px; box-shadow:0 40px 90px -20px rgba(0,0,0,.8); }

/* ---------- galerie photo cards ---------- */
.photo-card .video-thumb{ aspect-ratio:4/3; }
.photo-card .video-thumb img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.video-card.zoomed .video-thumb{ aspect-ratio:auto; min-height:320px; }
/* ---------- award photo slot ---------- */
.award-photo{
  aspect-ratio:16/7; background:repeating-linear-gradient(45deg,#FAF3E0,#FAF3E0 12px,#F4EAD0 12px,#F4EAD0 24px);
  border-bottom:1px solid var(--ah-line-dark); display:flex; align-items:center; justify-content:center;
  text-align:center; color:#A08A55; font-family:var(--font-mono); font-size:.72rem; letter-spacing:.06em; text-transform:uppercase;
  cursor:zoom-in;
}
.award-photo img{ width:100%; height:100%; object-fit:cover; display:block; }
.video-card.zoomed .award-photo{ aspect-ratio:auto; }
.video-card.zoomed .award-photo img{ height:auto; max-height:60vh; object-fit:contain; background:#0A0A0C; }
.award-photo small{ text-transform:none; letter-spacing:0; color:#B8A377; }
.award-card{ cursor:zoom-in; }