/* ============================================================================
   SPORT BRIDGE — Shared site chrome (header, footer, buttons, components)
   Loaded after tokens.css. Used by every page.
   ============================================================================ */

/* Bilingual visibility */
[data-lang="EN"] [data-sr] { display: none; }
[data-lang="SR"] [data-en] { display: none; }

/* ── Header ─────────────────────────────────────────────────────────────── */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(13, 30, 51, 0.82);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--hair);
}
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; height: 96px; gap: var(--s-5); }
.brand-lockup { display: flex; align-items: center; gap: 14px; flex-shrink: 0; }
.brand-lockup img { height: 60px; width: auto; }
.nav { display: flex; align-items: center; gap: 30px; }
.nav a { font-size: var(--t-sm); color: var(--cream-dim); transition: color var(--dur-fast) var(--ease); white-space: nowrap; }
.nav a:hover, .nav a.active { color: var(--gold); }
.header-cta { display: flex; align-items: center; gap: 18px; flex-shrink: 0; }
.lang-pill {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em; white-space: nowrap;
  color: var(--steel-dim); border: 1px solid var(--hair); border-radius: var(--radius-pill);
  padding: 5px 12px; cursor: pointer; transition: border-color var(--dur-fast);
}
.lang-pill:hover { border-color: var(--hair-gold); }
.lang-pill b { color: var(--gold); }
/* ── Mobile nav (burger) ──────────────────────────────────────────────── */
.nav-toggle {
  display: none; position: relative; z-index: 60;
  background: none; border: 0; cursor: pointer;
  flex-direction: column; gap: 5px; padding: 8px; margin: -8px;
}
.nav-toggle span { display: block; width: 24px; height: 2px; background: var(--cream); border-radius: 2px; transition: transform var(--dur) var(--ease), opacity var(--dur-fast); }
.site-header.nav-open .nav-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.site-header.nav-open .nav-toggle span:nth-child(2) { opacity: 0; }
.site-header.nav-open .nav-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.nav .nav-cta { display: none; }
.nav-scrim { display: none; }

@media (max-width: 1000px) {
  .header-cta .btn { display: none; }
  .nav-toggle { display: flex; }
  .nav {
    position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    padding: var(--s-3) var(--s-6) var(--s-6);
    background: var(--navy-deep); border-top: 1px solid var(--hair);
    border-bottom: 1px solid var(--hair-gold);
    box-shadow: 0 28px 50px rgba(7,15,28,0.55);
    max-height: calc(100vh - 96px); overflow-y: auto;
    opacity: 0; visibility: hidden; transform: translateY(-10px);
    transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease), visibility var(--dur);
  }
  .site-header.nav-open .nav { opacity: 1; visibility: visible; transform: translateY(0); }
  .nav a { font-size: 1.2rem; font-family: var(--serif); color: var(--cream); padding: 13px 2px; border-bottom: 1px solid var(--hair); }
  .nav a.active { color: var(--gold); }
  .nav .nav-cta { display: inline-flex; margin-top: var(--s-4); align-self: flex-start; }
  .nav-scrim {
    display: block; position: fixed; inset: 0; background: rgba(7,15,28,0.5);
    opacity: 0; visibility: hidden; transition: opacity var(--dur) var(--ease); z-index: 40;
  }
  .nav-scrim.show { opacity: 1; visibility: visible; }
}

/* ── Buttons ────────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--sans); font-size: var(--t-sm); font-weight: 600;
  letter-spacing: 0.01em; padding: 14px 26px; border-radius: var(--radius);
  cursor: pointer; border: 1px solid transparent;
  transition: all var(--dur) var(--ease); white-space: nowrap;
}
.btn-primary { background: var(--grad-gold); color: var(--navy-deep); box-shadow: var(--shadow-gold); }
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 12px 40px rgba(201,162,78,0.30); }
.btn-ghost { background: transparent; color: var(--gold); border-color: var(--hair-gold); }
.btn-ghost:hover { border-color: var(--gold); background: rgba(201,162,78,0.07); }
.btn-arrow { transition: transform var(--dur) var(--ease); }
.btn:hover .btn-arrow { transform: translateX(4px); }

/* ── Eyebrow / section headers ──────────────────────────────────────────── */
.sec-head { max-width: 56ch; margin-bottom: var(--s-7); }
.sec-head .eyebrow { display: block; margin-bottom: var(--s-4); }
.sec-head h2 { font-family: var(--serif); font-size: var(--t-h2); line-height: var(--lh-snug); }
.sec-head p { margin-top: var(--s-4); color: var(--cream-dim); font-size: var(--t-lead); line-height: var(--lh-relaxed); }

/* ── Chips ──────────────────────────────────────────────────────────────── */
.chip-tag { display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px; border: 1px solid var(--hair-gold); border-radius: var(--radius-pill); font-size: 12px; font-weight: 600; letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--gold); }
.chip-tag .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--gold); }
.chip-steel { border-color: var(--hair); color: var(--steel); }
.chip-steel .dot { background: var(--steel); }

/* ── Service card ───────────────────────────────────────────────────────── */
.svc-card {
  background: var(--navy-panel); border: 1px solid var(--hair);
  border-radius: var(--radius-lg); padding: var(--s-6);
  transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
  position: relative; overflow: hidden; height: 100%;
}
.svc-card::after { content: ''; position: absolute; left: 0; top: 0; height: 100%; width: 3px; background: var(--grad-gold); transform: scaleY(0); transform-origin: top; transition: transform var(--dur) var(--ease); }
.svc-card:hover { transform: translateY(-4px); border-color: var(--hair-gold); }
.svc-card:hover::after { transform: scaleY(1); }
.svc-card .svc-num { font-family: var(--mono); font-size: var(--t-mono); color: var(--gold); }
.svc-card h3 { font-family: var(--serif); font-size: var(--t-h4); margin: var(--s-4) 0 var(--s-3); line-height: var(--lh-snug); }
.svc-card p { font-size: var(--t-sm); color: var(--cream-dim); }

/* ── Recurring band ─────────────────────────────────────────────────────── */
.gap-band { text-align: center; padding-block: var(--s-10); position: relative; overflow: hidden; }
.gap-band::before { content: ''; position: absolute; inset: 0; background: var(--glow-gold); transform: translateY(20%); pointer-events: none; }
.gap-band .quote { font-family: var(--serif); font-size: clamp(1.75rem, 4vw, 3.25rem); line-height: 1.2; max-width: 24ch; margin-inline: auto; position: relative; }
.gap-band .quote .gold { color: var(--gold); }

/* ── Footer ─────────────────────────────────────────────────────────────── */
.site-footer { background: var(--navy-deep); border-top: 1px solid var(--hair); padding-block: var(--s-8) var(--s-6); }
.footer-top { display: flex; justify-content: space-between; gap: var(--s-6); flex-wrap: wrap; padding-bottom: var(--s-7); border-bottom: 1px solid var(--hair); }
.footer-brand img { height: 78px; margin-bottom: var(--s-4); }
.footer-brand p { font-size: var(--t-sm); color: var(--steel-dim); max-width: 38ch; }
.footer-cols { display: flex; gap: var(--s-8); flex-wrap: wrap; }
.footer-col h4 { font-size: var(--t-eyebrow); font-weight: 600; letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--gold); margin-bottom: var(--s-4); }
.footer-col a { display: block; font-size: var(--t-sm); color: var(--cream-dim); margin-bottom: 10px; transition: color var(--dur-fast); }
.footer-col a:hover { color: var(--gold); }
.footer-bottom { display: flex; justify-content: space-between; padding-top: var(--s-5); flex-wrap: wrap; gap: var(--s-3); }
.footer-bottom .mono { font-size: 12px; }

/* ── Reveal: CSS-only, scroll-driven, degrades to fully visible ─────────── */
.reveal { opacity: 1; transform: none; }
@keyframes revealIn { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .reveal { animation: revealIn linear both; animation-timeline: view(); animation-range: entry 0% entry 34%; }
  }
}

/* ── Duotone photo placeholder ──────────────────────────────────────────── */
.img-ph {
  border-radius: var(--radius-lg); position: relative; overflow: hidden; border: 1px solid var(--hair);
  background:
    linear-gradient(rgba(13,30,51,0.50), rgba(13,30,51,0.80)),
    repeating-linear-gradient(135deg, var(--navy-raise) 0 14px, var(--navy-panel) 14px 28px);
}
.img-ph .img-tag { position: absolute; left: 20px; bottom: 18px; font-family: var(--mono); font-size: 11px; color: var(--steel); letter-spacing: 0.1em; }


/* ── Founder portraits + bio modal (added for client feedback) ───────────── */
.founder{cursor:pointer}
.founder .portrait img{width:100%;height:100%;object-fit:cover;display:block}
.f-more{margin-top:var(--s-4);background:none;border:0;padding:0;font:inherit;color:var(--gold);font-weight:600;font-size:var(--t-sm);cursor:pointer;display:inline-flex;gap:6px;align-items:center}
.f-more .arr{transition:transform var(--dur) var(--ease)}
.founder:hover .f-more .arr{transform:translateX(4px)}
.bio-overlay{position:fixed;inset:0;background:rgba(7,15,28,.72);backdrop-filter:blur(4px);display:none;align-items:flex-start;justify-content:center;padding:5vh 5vw;z-index:1000;overflow-y:auto}
.bio-overlay.open{display:flex}
.bio-modal{position:relative;background:var(--navy-panel);border:1px solid var(--hair-gold);border-radius:var(--radius-lg);max-width:760px;width:100%;padding:clamp(1.5rem,4vw,3rem);box-shadow:var(--shadow-3)}
.bio-close{position:absolute;top:12px;right:18px;background:none;border:0;color:var(--cream-dim);font-size:30px;line-height:1;cursor:pointer}
.bio-close:hover{color:var(--gold)}
.bio-head{display:flex;gap:var(--s-5);align-items:center;margin-bottom:var(--s-5);padding-bottom:var(--s-5);border-bottom:1px solid var(--hair)}
.bio-photo{width:96px;height:96px;border-radius:50%;object-fit:cover;border:1px solid var(--hair-gold);flex:none}
.bio-name{font-family:var(--serif);font-size:var(--t-h3)}
.bio-role{font-size:var(--t-eyebrow);font-weight:600;letter-spacing:var(--tracking-caps);text-transform:uppercase;color:var(--gold);margin-top:4px}
.bio-body{max-height:58vh;overflow-y:auto}
.bio-body p{color:var(--cream-dim);font-size:var(--t-sm);line-height:var(--lh-relaxed);margin-bottom:var(--s-4)}
@media(max-width:560px){.bio-head{flex-direction:column;text-align:center}}