:root {
  --navy: #061c46;
  --navy-2: #102c5d;
  --blue: #1148b5;
  --gold: #f4ad16;
  --green: #079447;
  --red: #e42b32;
  --paper: #f7f9fc;
  --text: #263246;
  --muted: #6f7b8f;
  --line: #e3e8f0;
  --display: 'Barlow Condensed', sans-serif;
  --body: 'Montserrat', sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 112px; }
body { margin: 0; color: var(--text); background: var(--paper); font-family: var(--body); line-height: 1.7; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
button { font: inherit; }
.container { width: min(1500px, calc(100% - clamp(32px, 6vw, 104px))); margin: auto; }

.scroll-progress { position: fixed; z-index: 100; top: 0; left: 0; width: 0; height: 3px; background: linear-gradient(90deg, var(--blue) 0 25%, var(--gold) 25% 50%, var(--green) 50% 75%, var(--red) 75%); }
.header { position: absolute; z-index: 20; top: 18px; left: 0; right: 0; padding: 0 clamp(12px, 2vw, 28px); color: #fff; }
.nav { display: flex; align-items: center; width: min(1500px, calc(100% - 24px)); height: 96px; margin: auto; padding: 0 24px 0 18px; border: 1px solid rgba(255,255,255,.18); border-radius: 18px; background: linear-gradient(110deg, rgba(4,25,65,.94), rgba(9,48,105,.78)); box-shadow: 0 18px 50px rgba(2,14,38,.3), inset 0 1px rgba(255,255,255,.12); backdrop-filter: blur(18px) saturate(125%); }
.logo { display: flex; align-items: center; gap: 15px; margin-right: auto; text-transform: uppercase; text-shadow: 0 2px 16px rgba(0,0,0,.35); }
.logo img { width: 76px; height: 76px; object-fit: contain; filter: drop-shadow(0 7px 16px rgba(0,0,0,.22)); }
.logo-wordmark { display: flex; flex-direction: column; gap: 2px; min-width: 170px; line-height: 1; text-transform: uppercase; }
.logo-wordmark b { color: #fff; font: 800 2rem/1 var(--display); letter-spacing: .045em; }
.logo-wordmark small { color: #ffd878; font: 700 1rem/1.2 var(--body); letter-spacing: .16em; }
.navlinks { display: flex; gap: clamp(18px, 2.2vw, 40px); }
.navlinks a { position: relative; padding: 12px 2px; color: rgba(255,255,255,.88); font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; text-shadow: 0 2px 12px rgba(0,0,0,.28); transition: .25s; }
.navlinks a::after { content: ''; position: absolute; left: 2px; right: 100%; bottom: 3px; height: 2px; background: var(--gold); transition: right .25s; }
.navlinks a:hover, .navlinks a.active { color: #fff; transform: translateY(-1px); }
.navlinks a:hover::after, .navlinks a.active::after { right: 2px; }
.navlinks .nav-register { isolation: isolate; overflow: hidden; padding: 12px 18px; border: 1px solid rgba(255,216,120,.65); border-radius: 9px; color: #fff; background: linear-gradient(135deg,var(--red),#f2543f); box-shadow: 0 10px 24px rgba(228,43,50,.3); animation: navRegisterGlow 2s ease-in-out infinite; transition: transform .25s,box-shadow .25s,border-color .25s,filter .25s; }
.navlinks .nav-register::after { display: none; }
.navlinks .nav-register::before, .mobile-register::before { content: ''; position: absolute; z-index: 1; top: -35%; bottom: -35%; left: 0; width: 38%; border-radius: 50%; background: linear-gradient(90deg,transparent,rgba(255,255,255,.72),transparent); filter: blur(.5px); pointer-events: none; animation: navRegisterShine 2s ease-in-out infinite; }
.nav-register-label { position: relative; z-index: 2; }
.navlinks .nav-register:hover, .navlinks .nav-register:focus-visible { color: #fff; transform: translateY(-3px) scale(1.045); border-color: #fff0bd; filter: saturate(1.12) brightness(1.06); box-shadow: 0 16px 34px rgba(228,43,50,.55),0 0 0 4px rgba(255,216,120,.2); }
.navlinks .nav-register:focus-visible, .mobile-register:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.mobile-register { display: none; position: relative; isolation: isolate; overflow: hidden; transition: transform .25s,box-shadow .25s,border-color .25s,filter .25s; }
.mobile-register-label, .mobile-register-arrow { position: relative; z-index: 2; }
@keyframes navRegisterGlow { 0%,100% { border-color:rgba(255,216,120,.68);box-shadow:0 8px 22px rgba(228,43,50,.34),0 0 0 0 rgba(255,216,120,.46) } 50% { border-color:#ffe5a4;box-shadow:0 12px 30px rgba(228,43,50,.52),0 0 0 7px rgba(255,216,120,0) } }
@keyframes navRegisterShine { 0%,42% { transform:translateX(-190%) skewX(-22deg);opacity:0 } 48% { opacity:.9 } 72% { transform:translateX(290%) skewX(-22deg);opacity:.2 } 73%,100% { transform:translateX(290%) skewX(-22deg);opacity:0 } }
.menu { display: none; border: 1px solid rgba(255,255,255,.2); border-radius: 10px; padding: 6px 11px; color: #fff; background: rgba(255,255,255,.08); font-size: 1.35rem; }

.about-hero { position: relative; min-height: 690px; display: flex; align-items: center; overflow: hidden; color: #fff; background: url('../images/Haryana_Circle_Kabaddi/haryana-circle-2.png?v=mat-20260806') center/cover; }
.about-hero::before { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(2,17,49,.96), rgba(5,35,85,.72) 48%, rgba(2,20,51,.2)), linear-gradient(0deg, rgba(2,15,42,.76), transparent 52%, rgba(2,15,42,.48)); }
.about-hero::after { content: ''; position: absolute; right: -90px; bottom: -140px; width: 420px; height: 420px; border: 70px solid rgba(244,173,22,.14); border-radius: 50%; }
.about-hero .container { position: relative; z-index: 2; padding-top: 130px; }
.hero-panel { max-width: 780px; padding: clamp(30px,4vw,52px); border: 1px solid rgba(255,255,255,.14); border-left: 4px solid var(--gold); border-radius: 0 22px 22px 0; background: linear-gradient(120deg, rgba(5,29,72,.8), rgba(8,42,91,.45)); box-shadow: 0 28px 80px rgba(1,12,34,.3); backdrop-filter: blur(9px); }
.breadcrumb { margin-bottom: 22px; color: rgba(255,255,255,.65); font-size: .7rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.breadcrumb a { color: #ffe09a; }
.eyebrow { display: inline-flex; align-items: center; gap: 10px; color: var(--blue); font-size: .68rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; }
.hero-panel .eyebrow { color: #ffe09a; }
.eyebrow::before { content: ''; width: 30px; height: 3px; border-radius: 8px; background: linear-gradient(90deg, var(--gold), var(--red)); }
.about-hero h1 { max-width: 720px; margin: 18px 0 22px; font: 800 clamp(4.2rem,7vw,7.2rem)/.88 var(--display); letter-spacing: -.025em; text-transform: uppercase; text-wrap: balance; text-shadow: 0 18px 44px rgba(1,12,34,.62); }
.about-hero p { max-width: 650px; margin: 0; color: rgba(255,255,255,.88); font-size: 1rem; }

.chairman-section { position: relative; isolation: isolate; overflow: hidden; padding: clamp(76px,8vw,126px) 0; color: #fff; background: radial-gradient(circle at 78% 22%, rgba(24,92,197,.32), transparent 30%), linear-gradient(125deg, #031534 0%, #08265a 56%, #071d43 100%); }
.chairman-section::before { content: ''; position: absolute; z-index: -1; inset: 0; opacity: .26; background-image: linear-gradient(rgba(255,255,255,.055) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.055) 1px, transparent 1px); background-size: 66px 66px; mask-image: linear-gradient(90deg, #000, transparent 78%); }
.chairman-section::after { content: 'APKL'; position: absolute; z-index: -1; right: -1.5vw; bottom: -9vw; color: rgba(255,255,255,.026); font: 800 clamp(12rem,28vw,34rem)/.7 var(--display); letter-spacing: -.05em; }
.chairman-glow { position: absolute; z-index: -1; border-radius: 50%; filter: blur(2px); pointer-events: none; }
.chairman-glow-one { width: 360px; height: 360px; right: -170px; top: -160px; border: 58px solid rgba(244,173,22,.13); }
.chairman-glow-two { width: 170px; height: 170px; left: -85px; bottom: -65px; border: 34px solid rgba(228,43,50,.12); }
.chairman-grid { display: grid; grid-template-columns: minmax(330px,.82fr) minmax(420px,1.18fr); gap: clamp(52px,7vw,116px); align-items: center; }
.chairman-portrait { position: relative; width: min(100%,560px); margin: 0; }
.chairman-frame { position: relative; overflow: hidden; aspect-ratio: 4/5; border: 1px solid rgba(255,216,120,.38); border-radius: 24px 24px 80px 24px; background: #0a244e; box-shadow: 0 36px 90px rgba(0,7,24,.55); }
.chairman-frame::before { content: ''; position: absolute; z-index: 2; inset: 0; border: 10px solid rgba(255,255,255,.055); border-radius: inherit; pointer-events: none; }
.chairman-frame::after { content: ''; position: absolute; z-index: 2; left: 0; right: 0; bottom: 0; height: 36%; background: linear-gradient(transparent, rgba(2,15,42,.56)); pointer-events: none; }
.chairman-frame img { width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.chairman-portrait figcaption { position: absolute; z-index: 3; right: -28px; bottom: 34px; min-width: 285px; padding: 18px 24px; border: 1px solid rgba(255,255,255,.18); border-left: 4px solid var(--gold); border-radius: 8px; background: rgba(5,30,76,.9); box-shadow: 0 18px 45px rgba(0,8,28,.36); backdrop-filter: blur(14px); }
.chairman-portrait figcaption span, .chairman-signoff span { display: block; color: #ffd878; font-size: .62rem; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; }
.chairman-portrait figcaption strong { display: block; margin-top: 5px; color: #fff; font: 800 1.45rem/1 var(--display); letter-spacing: .035em; text-transform: uppercase; }
.ambassador-association-role { display:flex;align-items:center;gap:8px;width:fit-content;margin-top:12px;padding:9px 11px;border:1px solid rgba(255,216,120,.7);border-radius:7px;color:#fff;background:linear-gradient(135deg,rgba(244,173,22,.32),rgba(244,173,22,.12));box-shadow:0 8px 22px rgba(244,173,22,.16),inset 0 1px rgba(255,255,255,.13);font-size:.63rem;font-weight:800;line-height:1.35;letter-spacing:.065em;text-transform:uppercase;text-shadow:0 2px 8px rgba(0,0,0,.26) }
.ambassador-association-role::before { content:'★';flex:0 0 auto;color:#ffd878;font-size:.78rem;text-shadow:0 0 12px rgba(255,216,120,.5) }
.chairman-copy { max-width: 760px; }
.chairman-copy .eyebrow { color: #ffd878; }
.chairman-copy h2 { max-width: 720px; margin: 18px 0 28px; font: 800 clamp(3.7rem,6vw,6.8rem)/.88 var(--display); letter-spacing: -.025em; text-transform: uppercase; text-wrap: balance; }
.chairman-copy p { max-width: 690px; margin: 0 0 18px; color: rgba(255,255,255,.7); font-size: .94rem; }
.chairman-copy .chairman-lead { color: #fff; font-size: clamp(1.05rem,1.5vw,1.28rem); font-weight: 600; line-height: 1.6; }
.chairman-principles { display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; margin: 34px 0; }
.chairman-principles span { padding: 16px 14px; border: 1px solid rgba(255,255,255,.13); border-radius: 9px; color: rgba(255,255,255,.82); background: rgba(255,255,255,.055); font-size: .61rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.chairman-principles b { margin-right: 7px; color: var(--gold); }
.chairman-signoff { padding-left: 18px; border-left: 3px solid var(--gold); }
.chairman-signoff strong { display: block; margin-top: 5px; color: #fff; font: 700 1.15rem/1.1 var(--display); letter-spacing: .04em; text-transform: uppercase; }

.brand-ribbon { overflow: hidden; border-block: 1px solid var(--line); background: #fff; }
.brand-ribbon-track { display: flex; width: max-content; animation: ribbon 24s linear infinite; }
.brand-ribbon span { display: flex; align-items: center; gap: 14px; padding: 16px 30px; color: #526078; font-size: .65rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; white-space: nowrap; }
.brand-ribbon span::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--dot); }
.brand-ribbon span:nth-child(4n+1) { --dot: var(--blue); }.brand-ribbon span:nth-child(4n+2) { --dot: var(--gold); }.brand-ribbon span:nth-child(4n+3) { --dot: var(--green); }.brand-ribbon span:nth-child(4n) { --dot: var(--red); }
@keyframes ribbon { to { transform: translateX(-50%); } }

.about-section { padding: clamp(85px,8vw,130px) 0; }
.about-section.alt { background: linear-gradient(180deg, #fff, #eaf1ff); }
.story-grid, .recognition-grid { display: grid; grid-template-columns: 1.02fr .98fr; gap: clamp(50px,7vw,110px); align-items: center; }
.section-copy h2, .section-head h2, .cta h2 { margin: 14px 0 28px; font: 800 clamp(3rem,5vw,5rem)/.94 var(--display); letter-spacing: -.02em; text-transform: uppercase; }
.section-copy p, .section-head p { color: var(--muted); font-size: .94rem; }
.story-media, .recognition-media { position: relative; }
.story-media img, .recognition-media img { width: 100%; height: 520px; object-fit: cover; border-radius: 18px; box-shadow: 0 28px 70px rgba(16,44,93,.18); }
.story-media::before, .recognition-media::before { content: ''; position: absolute; z-index: -1; width: 76%; height: 76%; right: -18px; bottom: -18px; border-radius: 18px; background: linear-gradient(135deg, var(--gold), var(--red)); opacity: .9; }
.founded-tag { position: absolute; left: -30px; bottom: 34px; min-width: 135px; padding: 18px 22px; border-radius: 12px; color: #fff; background: linear-gradient(135deg, #08285f, var(--blue)); box-shadow: 0 16px 38px rgba(17,72,181,.3); text-transform: uppercase; font-size: .62rem; letter-spacing: .12em; }
.founded-tag b { display: block; margin-top: 3px; color: var(--gold); font: 800 2.4rem/1 var(--display); }

.stat-strip { padding: 30px 0; color: #fff; background: linear-gradient(110deg, #08285f, var(--blue) 48%, #0a3e77); }
.stat-grid { display: grid; grid-template-columns: repeat(4,1fr); }
.stat-item { padding: 22px; border-right: 1px solid rgba(255,255,255,.14); text-align: center; }
.stat-item:last-child { border: 0; }
.stat-item b { display: block; color: var(--gold); font: 800 3.1rem/1 var(--display); }
.stat-item span { font-size: .65rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }

.section-head { max-width: 760px; margin-bottom: 54px; }
.committee-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 24px; }
.committee-card, .value-card { position: relative; overflow: hidden; padding: 32px 27px; border: 1px solid var(--line); border-radius: 14px; background: #fff; box-shadow: 0 14px 40px rgba(33,45,64,.06); transition: .3s; }
.committee-card::before, .value-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: var(--accent,var(--blue)); }
.committee-card:nth-child(2), .value-card:nth-child(2) { --accent: var(--gold); }.committee-card:nth-child(3), .value-card:nth-child(3) { --accent: var(--green); }.committee-card:nth-child(4) { --accent: var(--red); }
.committee-card:hover, .value-card:hover { transform: translateY(-7px); box-shadow: 0 24px 58px rgba(33,45,64,.12); }
.committee-avatar { display: grid; place-items: center; width: 60px; height: 60px; margin-bottom: 23px; border-radius: 50%; color: #fff; background: linear-gradient(135deg, #08285f, var(--blue)); font: 800 1.35rem var(--display); }
.committee-card h3, .value-card h3 { margin: 0 0 6px; font: 800 1.55rem var(--display); text-transform: uppercase; }
.role, .num { color: var(--accent,var(--blue)); font-size: .65rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.committee-card p, .value-card p { margin: 18px 0 0; color: var(--muted); font-size: .78rem; }

.recognition-grid { grid-template-columns: 1.05fr .95fr; }
.badge-row { display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; margin-top: 30px; }
.badge { padding: 16px; border: 1px solid #dbe5f5; border-radius: 10px; color: var(--muted); background: #fff; font-size: .58rem; letter-spacing: .08em; text-transform: uppercase; }
.badge b { display: block; margin-top: 5px; color: var(--navy-2); font-size: .7rem; }
.values-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 25px; }
.value-card { padding: 38px 32px; }
.value-card h3 { margin-top: 22px; font-size: 1.8rem; }

.cta { position: relative; overflow: hidden; padding: 95px 0; color: #fff; text-align: center; background: linear-gradient(135deg, rgba(5,30,76,.94), rgba(17,72,181,.88)), url('../images/Haryana_Circle_Kabaddi/haryana-circle-5.png?v=mat-20260806') center/cover; }
.cta h2 { margin-top: 0; }
.cta p { color: rgba(255,255,255,.75); }
.cta-buttons { display: flex; justify-content: center; gap: 12px; margin-top: 30px; }
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 56px; padding: 0 28px; border-radius: 9px; font-size: .7rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; transition: .25s; }
.btn:hover { transform: translateY(-3px); }.btn-solid { color: #fff; background: linear-gradient(135deg,var(--red),#f2543f); box-shadow: 0 14px 32px rgba(228,43,50,.3); }.btn-outline { border: 1px solid rgba(255,255,255,.28); color: #fff; background: rgba(255,255,255,.08); }

footer { padding-top: 90px; color: rgba(255,255,255,.66); background: linear-gradient(135deg,#061c46,#102c5d); }
.footer-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 70px; padding-bottom: 65px; }
.footer-grid h3 { margin: 0 0 22px; color: var(--gold); font: 800 1.3rem var(--display); text-transform: uppercase; }
.footer-grid a { display: block; width: fit-content; margin: 11px 0; font-size: .72rem; transition: .2s; }.footer-grid a:hover { color: #fff; transform: translateX(4px); }
.copy { padding: 24px 0; border-top: 1px solid rgba(255,255,255,.11); font-size: .68rem; text-align: center; }

.reveal { opacity: 0; transform: translateY(30px); transition: .7s cubic-bezier(.2,.8,.2,1); }.reveal.seen { opacity: 1; transform: none; }

@media(max-width:1050px) { .navlinks { gap: 15px; }.navlinks a { font-size: .64rem; }.committee-grid { grid-template-columns: repeat(2,1fr); } }
@media(max-width:900px) {
  .header { top: 10px; padding: 0 4px; }.nav { width: calc(100% - 16px); height: 82px; padding: 0 16px; }.logo { gap: 10px; }.logo img { width: 62px; height: 62px; }.logo-wordmark { min-width: 138px; }.logo-wordmark b { font-size: 1rem; }.logo-wordmark small { font-size: .52rem; letter-spacing: .12em; }
  .menu { display: grid; place-items: center; width: 43px; height: 43px; flex: 0 0 auto; padding: 0; }.navlinks { display: none; position: absolute; top: 92px; left: 12px; right: 12px; padding: 18px; border: 1px solid rgba(255,255,255,.12); border-radius: 14px; background: rgba(4,25,65,.98); box-shadow: 0 22px 50px rgba(2,14,38,.35); flex-direction: column; }.navlinks.open { display: flex; }.navlinks .nav-register { display: none; }
  .mobile-register { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 44px; margin: 0 10px 0 12px; padding: 0 16px; border: 1px solid rgba(255,216,120,.82); border-radius: 10px; color: #fff; background: linear-gradient(135deg,var(--red),#f2543f); font-size: .61rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; animation: navRegisterGlow 2s ease-in-out infinite; }
  .mobile-register-arrow { color:#ffd878;font-size:.85rem;transition:transform .2s }.mobile-register:hover,.mobile-register:focus-visible { transform:translateY(-3px) scale(1.045);border-color:#fff0bd;filter:saturate(1.12) brightness(1.06);box-shadow:0 16px 34px rgba(228,43,50,.55),0 0 0 4px rgba(255,216,120,.2) }.mobile-register:hover .mobile-register-arrow { transform:translateX(2px) }
  .chairman-grid { grid-template-columns: 1fr; }.chairman-portrait { width: min(82%,560px); margin-inline: auto; }.chairman-copy { max-width: 760px; margin-inline: auto; }.story-grid, .recognition-grid { grid-template-columns: 1fr; }.recognition-media { grid-row: 1; }.committee-grid { grid-template-columns: repeat(2,1fr); }.values-grid { grid-template-columns: 1fr; }.footer-grid { grid-template-columns: repeat(2,1fr); }
}
@media(max-width:600px) {
  .container { width: min(100% - 24px,1500px); }.nav { padding:0 10px }.logo { gap:7px;margin-right:auto }.logo img { width:52px;height:52px }.logo-wordmark { width:106px;min-width:106px }.logo-wordmark b { font-size:.85rem;letter-spacing:.035em }.logo-wordmark small { font-size:.42rem;letter-spacing:.09em }.mobile-register { min-height:40px;margin:0 7px;padding:0 11px;border-radius:8px;font-size:.54rem }.menu { width:40px;height:40px;font-size:1.2rem }.about-hero { min-height: 720px; }.about-hero .container { padding-top: 120px; }.hero-panel { padding: 28px 22px; }.about-hero h1 { font-size: 3.8rem; }.about-hero p { font-size: .86rem; }
  .chairman-section { padding: 64px 0 72px; }.chairman-grid { gap: 54px; }.chairman-portrait { width: 100%; }.chairman-frame { border-radius: 18px 18px 48px 18px; }.chairman-portrait figcaption { right: 12px; bottom: 14px; min-width: 205px; padding: 15px 18px; }.chairman-copy h2 { font-size: 3.6rem; }.chairman-principles { grid-template-columns: 1fr; gap: 8px; }.chairman-principles span { padding: 13px 14px; }
  .brand-ribbon span { padding: 14px 22px; }.story-media img, .recognition-media img { height: 380px; }.founded-tag { left: 12px; bottom: 12px; }.stat-grid { grid-template-columns: repeat(2,1fr); }.stat-item:nth-child(2) { border-right: 0; }.committee-grid, .badge-row, .footer-grid { grid-template-columns: 1fr; }.cta-buttons { flex-direction: column; align-items: stretch; }.reveal { opacity: 1; transform: none; }
}
@media(prefers-reduced-motion:reduce) { * { scroll-behavior: auto !important; }.brand-ribbon-track,.navlinks .nav-register,.mobile-register,.navlinks .nav-register::before,.mobile-register::before { animation: none; }.navlinks .nav-register::before,.mobile-register::before { display:none }.reveal { opacity: 1; transform: none; transition: none; } }