/* Zingano BJJ & Muay Thai — shared stylesheet. Created 2026-10-08 (design Phase 2).
   Order: tokens, shared page rules, Phase 1 design rules (html-prefixed so they win over page rules). */
:root{
  /* text tones (decision pending: --text-2 may become #C9D1CC on black surfaces only) */
  --text-1:#f0f4f1;
  --text-2:#f0f4f1;
  /* type scale */
  --fs-12:12px; --fs-14:14px; --fs-16:16px; --fs-18:18px; --fs-28:28px; --fs-40:40px; --fs-64:64px; --fs-96:96px;
  /* spacing scale */
  --space-1:4px; --space-2:8px; --space-4:16px; --space-6:24px; --space-8:32px; --space-12:48px; --space-16:64px; --space-24:96px;
  /* radii */
  --radius-sm:4px; --radius-md:8px;
  --black:#0a0d0b;
  --black-soft:#111714;
  --black-card:#161d19;
  --green:#016E45;
  --green-dark:#01472D;
  --green-light:#019A60;
  --yellow:#FFF500;
  --yellow-dark:#CCC000;
  --blue:#2a5fa8;
  --white:#f0f4f1;
  --muted:#f0f4f1;
  --border:rgba(255,255,255,0.07);
  --font-display:'Bebas Neue',sans-serif;
  --font-body:'DM Sans',sans-serif;
}
/* ---- shared rules (identical on 4+ pages) ---- */
.section-title .green { color: var(--green-light); }
.btn-green {
      background: var(--green);
      color: var(--white);
    }
.btn-green:hover { background: var(--green-light); transform: translateY(-2px); }
@media(max-width:880px){
.nav-links { display:none; }
}
@media (max-width: 600px) {
.page-hero { height: auto; padding: 60px 0 50px; }
}
h1.hero-title em { font-style:normal; color:var(--yellow); }
.sec-tag { display:inline-block; font-size:12px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--yellow); padding:4px 12px; border:1px solid rgba(245,216,0,.35); border-radius:2px; background:rgba(245,216,0,.06); }
h2.sec-title { font-family:var(--font-display); font-size:clamp(36px,5vw,58px); line-height:1; margin:14px 0 20px; }
h2.sec-title em { font-style:normal; color:var(--yellow); }
.grid-3 { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
@media(max-width:820px){
.grid-3 { grid-template-columns:1fr; }
}
.why-feature .icon { font-size:28px; margin-bottom:12px; }
.card a { color:var(--yellow); text-decoration:none; font-size:13px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; display:inline-block; margin-top:14px; }
.commute { background:var(--black-soft); padding:40px 0; border-top:1px solid var(--border); border-bottom:1px solid var(--border); }
.commute-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; text-align:center; }
@media(max-width:820px){
.commute-grid { grid-template-columns:repeat(2,1fr); }
}
.commute-item .v { font-family:var(--font-display); font-size:42px; color:var(--yellow); line-height:1; }
.faq-icon { font-size:20px; color:var(--yellow); flex-shrink:0; transition:transform .3s; }
.commute-item .l { font-size:13px; color:var(--white); margin-top:6px; letter-spacing:.05em; }
.faq-a p { padding:0 0 18px; font-size:14px; color:var(--white); line-height:1.7; }
.faq-item:last-child { border-bottom:1px solid var(--border); }
.footer-areas { display: flex; justify-content: center; align-items: center; gap: 8px 22px; flex-wrap: wrap; margin: -12px 0 36px; }
.cta { background:var(--green); padding:80px 0; text-align:center; }
.footer-areas span { font-size: 13px; letter-spacing: .12em; text-transform: uppercase; color: var(--yellow); }
.cta h2 { font-family:var(--font-display); font-size:clamp(36px,5vw,56px); line-height:1; margin-bottom:14px; }
.footer-areas a { font-size: 14px; color: var(--white); text-decoration: none; transition: color .2s; }
.footer-areas a:hover { color: var(--yellow); }
.cta h2 em { font-style:normal; color:var(--yellow); }
.cta p { font-size:17px; max-width:560px; margin:0 auto 28px; color:var(--white); }
.ft-grid { display:grid; grid-template-columns:1.5fr 1fr 1fr 1fr; gap:32px; margin-bottom:32px; }
@media(max-width:820px){
.ft-grid { grid-template-columns:1fr 1fr; }
}
.ft-grid h4 { font-family:var(--font-display); font-size:18px; letter-spacing:.06em; color:var(--yellow); margin-bottom:14px; }
.ft-grid a, .ft-grid p { display:block; color:var(--white); font-size:14px; text-decoration:none; line-height:2; }
.ft-grid a:hover { color:var(--yellow); }
.ft-bot { text-align:center; padding-top:20px; border-top:1px solid var(--border); font-size:12px; color:var(--white); }
.ft-bot a { color: var(--white); text-decoration: none; }
.ft-bot a:hover { color: var(--yellow); }
@media (max-width: 380px) {
.container { padding: 0 14px; }
.nav-logo-text .line2 { display: none !important; }
.nav-logo-text .line1 { font-size: 16px !important; }
.nav-logo img { height: 32px !important; }
.hero-title { font-size: 40px !important; }
.section-title { font-size: 26px !important; }
.page-hero h1 { font-size: 30px !important; }
.founder-facts { grid-template-columns: 1fr !important; }
.stats-grid { grid-template-columns: 1fr !important; }
.stat-item:nth-last-child(-n+2) { border-bottom: 1px solid rgba(255,255,255,.12) !important; }
.stat-item:last-child { border-bottom: none !important; }
}
@media(max-width:1180px) {
.nav-links, .nav-cta { display:none !important; }
.hamburger { display:flex !important; }
}
.mobile-menu a.mm-cta { background:#FFF500; color:#0a0d0b !important; text-align:center; border-radius:3px; margin-top:20px; font-weight:700 !important; padding:14px 0; text-transform:uppercase; letter-spacing:.06em; }
/* ---- Phase 1 design rules (tap targets, no scroll-fade, card links) ---- */
html .reveal, html .reveal.visible{opacity:1!important;transform:none!important;transition:none!important}
@media (max-width:1180px){
html .mobile-menu a:not(.btn){display:block;min-height:48px;box-sizing:border-box}
}
@media (pointer:coarse),(max-width:900px){
html .footer-nav a, html .footer-areas a, html .footer-links a, html .program-card-link, html .loc-text a{display:inline-flex;align-items:center;min-height:44px}
html .footer-col a{display:flex;align-items:center;min-height:44px;margin-bottom:0}
html a[style*="border-bottom:1px solid var(--yellow)"]{display:inline-flex;align-items:center;min-height:44px}
html .brighton-card .btn{min-height:44px}
}
@media (pointer:coarse),(max-width:900px){
html .ft-grid a{display:flex;align-items:center;min-height:44px}
html .ft-bot a{display:inline-flex;align-items:center;min-height:44px}
html .footer-logo{min-height:44px}
}
html .program-card{position:relative}
html .program-card-link::after{content:"";position:absolute;inset:0}
/* ---- Follow us icons (home + contact) ---- */
.follow-icons{display:flex;justify-content:center;align-items:center;gap:36px}
.follow-icons a{display:inline-flex;padding:8px;border-radius:12px;transition:transform .2s}
.follow-icons a:hover{transform:translateY(-3px)}
.follow-icons a:active{transform:scale(.96)}
.follow-icons a:focus-visible{outline:2px solid var(--yellow);outline-offset:4px}