:root{
    --red:#d6111d;
    --red-hot:#ff2230;
    --red-deep:#8e0a12;
    --black:#070707;
    --ink:#121212;
    --line:rgba(214,17,29,.9);
    --white:#f6f4f1;
    --muted:#a8a29c;
    --wrap:1240px;
  }
  *{box-sizing:border-box;margin:0;padding:0}
  html{scroll-behavior:smooth}
  body{
    font-family:"Barlow",system-ui,sans-serif;
    color:var(--white);
    background:var(--black);
    min-height:100vh;
    overflow-x:hidden;
  }
  a{color:inherit;text-decoration:none}
  img{display:block;max-width:100%}

  /* ---------- Black hardwood court background ---------- */
  .court-bg{position:fixed;inset:0;z-index:-2;background-color:#0c0b0a;
    background-image:
      /* sheen across the floor */
      radial-gradient(ellipse 80% 60% at 50% 35%, rgba(255,255,255,.07), transparent 70%),
      /* plank seams */
      repeating-linear-gradient(90deg, rgba(0,0,0,.85) 0 2px, transparent 2px 46px),
      /* plank-to-plank tone variation */
      repeating-linear-gradient(90deg, #141210 0 46px, #0d0c0b 46px 92px, #171513 92px 138px, #0f0e0d 138px 184px, #12110f 184px 230px),
      /* staggered plank ends */
      repeating-linear-gradient(0deg, transparent 0 318px, rgba(0,0,0,.7) 318px 320px);
  }
  .court-bg::before{ /* wood grain */
    content:"";position:absolute;inset:0;opacity:.55;mix-blend-mode:soft-light;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='460' height='640'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.012 0.42' numOctaves='3' seed='7'/%3E%3CfeColorMatrix values='0 0 0 0 1  0 0 0 0 .92  0 0 0 0 .85  0 0 0 1.4 -.35'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
    background-size:460px 640px;
  }
  .court-bg::after{ /* vignette */
    content:"";position:absolute;inset:0;
    background:radial-gradient(ellipse at 50% 40%, transparent 40%, rgba(0,0,0,.75) 100%);
  }
  .court-lines{position:fixed;inset:0;z-index:-1;width:100%;height:100%;pointer-events:none}
  .court-lines *{fill:none;stroke:var(--line);stroke-width:7;vector-effect:non-scaling-stroke}
  .court-lines .paint{fill:rgba(214,17,29,.10)}

  .wrap{width:min(var(--wrap),100% - 32px);margin-inline:auto}

  /* ---------- Top bar ---------- */
  .topbar{background:var(--red);position:relative;z-index:3;
    border-bottom:1px solid rgba(0,0,0,.4)}
  .topbar .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:46px;padding-left:140px}
  .org{font-family:"Kaushan Script","Brush Script MT",cursive;font-weight:400;font-size:21px;letter-spacing:.01em;line-height:1.1;color:#fff;text-shadow:2px 2px 0 #000,-1px -1px 0 #000,1px -1px 0 #000,-1px 1px 0 #000}
  .contact{display:inline-flex;align-items:center;gap:10px;height:32px;padding:0 20px 0 16px;background:var(--black);color:#fff;
    font:700 14px "Barlow Condensed","Arial Narrow",Arial,sans-serif;letter-spacing:.14em;text-transform:uppercase;
    clip-path:polygon(10px 0,100% 0,calc(100% - 10px) 100%,0 100%);transition:background .15s,color .15s;white-space:nowrap}
  .contact svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2}
  .contact:hover{background:#fff;color:var(--red)}

  /* ---------- Main nav ---------- */
  .nav{background:rgba(5,5,5,.94);backdrop-filter:blur(6px);position:sticky;top:0;z-index:5;
    border-bottom:3px solid var(--red)}
  .nav .wrap{display:flex;align-items:stretch;min-height:68px;position:relative}
  .logo-tile{position:absolute;left:0;top:-46px;width:124px;height:118px;background:var(--red);
    display:grid;place-items:center;z-index:4;
    clip-path:polygon(0 0,100% 0,100% 84%,50% 100%,0 84%);
    box-shadow:0 0 0 2px #000}
  .logo-tile img{width:108px;filter:drop-shadow(3px 3px 0 rgba(0,0,0,.5))}
  .nav ul{list-style:none;display:flex;margin-left:140px}
  .nav li{display:flex}
  .nav ul a{display:flex;align-items:center;padding:0 22px;position:relative;
    font:600 21px "Barlow Condensed","Arial Narrow",Arial,sans-serif;letter-spacing:.04em;text-transform:uppercase;color:#e9e6e2;white-space:nowrap;
    transition:color .15s}
  .nav ul a::after{content:"";position:absolute;left:22px;right:22px;bottom:-3px;height:3px;background:var(--white);
    transform:scaleX(0);transform-origin:left;transition:transform .2s}
  .nav ul a:hover{color:#fff}
  .nav ul a:hover::after{transform:scaleX(1)}
  .nav ul a[aria-current="page"]{background:var(--red);color:#fff;
    clip-path:polygon(10px 0,100% 0,calc(100% - 10px) 100%,0 100%)}
  .nav ul a[aria-current="page"]::after{display:none}
  .menu-btn{display:none;margin-left:auto;background:none;border:0;color:#fff;cursor:pointer;width:56px;align-items:center;justify-content:center}
  .menu-btn span,.menu-btn span::before,.menu-btn span::after{display:block;width:26px;height:3px;background:#fff;position:relative}
  .menu-btn span::before,.menu-btn span::after{content:"";position:absolute;left:0}
  .menu-btn span::before{top:-8px}.menu-btn span::after{top:8px}

  /* ---------- Hero banner ---------- */
  .hero{margin-top:44px;position:relative}
  .banner{position:relative;overflow:hidden;
    background:
      repeating-linear-gradient(115deg, rgba(255,255,255,.035) 0 2px, transparent 2px 22px),
      linear-gradient(100deg, var(--red-deep) 0%, var(--red) 45%, var(--red-hot) 100%);
    clip-path:polygon(0 0,100% 0,100% calc(100% - 34px),calc(100% - 34px) 100%,0 100%);
    padding:58px 56px 86px;
    display:grid;grid-template-columns:auto 1fr;align-items:center;gap:48px;
    border-top:4px solid #fff}
  .banner svg.arc{position:absolute;right:-140px;top:-120px;width:620px;opacity:.22;pointer-events:none}
  .banner svg.arc *{fill:none;stroke:#000;stroke-width:10}
  .banner .ghost{position:absolute;right:4%;top:50%;transform:translateY(-50%) rotate(8deg);width:min(38%,420px);opacity:.12;filter:grayscale(1) contrast(1.4);mix-blend-mode:multiply;pointer-events:none}
  .badge{width:240px;filter:drop-shadow(8px 8px 0 rgba(0,0,0,.5));position:relative}
  .title{text-align:center;position:relative}
  .kicker{display:flex;align-items:center;gap:16px;justify-content:center;
    font:400 30px "Bebas Neue",Impact,"Arial Narrow",sans-serif;letter-spacing:.14em;color:#fff}
  .kicker::before,.kicker::after{content:"";height:4px;flex:1;max-width:220px;background:#fff;
    clip-path:polygon(0 50%,100% 0,100% 100%)}
  .kicker::after{clip-path:polygon(0 0,100% 50%,0 100%)}
  h1{font:400 clamp(64px,9vw,138px)/.88 "Bebas Neue",Impact,"Arial Narrow",sans-serif;letter-spacing:.015em;color:#fff;margin:10px 0 18px;
    text-shadow:5px 5px 0 #000, 6px 6px 0 #000}
  .rule{height:5px;background:#fff;width:min(560px,90%);margin:0 auto;position:relative;
    clip-path:polygon(0 50%,8% 0,92% 0,100% 50%,92% 100%,8% 100%)}
  .verse{margin-top:22px;font:600 15px "Barlow Condensed","Arial Narrow",Arial,sans-serif;letter-spacing:.3em;text-transform:uppercase;color:rgba(255,255,255,.88)}
  .notch{position:absolute;left:50%;bottom:-1px;transform:translateX(-50%);width:200px;height:26px;background:var(--black);
    clip-path:polygon(0 100%,14% 0,86% 0,100% 100%)}

  /* ---------- Photo slideshow ---------- */
  .gallery{margin:56px auto 72px}
  .section-head{display:flex;align-items:end;justify-content:space-between;gap:16px;margin-bottom:16px}
  .section-head h2{font:400 46px/1 "Bebas Neue",Impact,"Arial Narrow",sans-serif;letter-spacing:.04em;display:flex;align-items:center;gap:14px}
  .section-head h2::before{content:"";width:14px;height:38px;background:var(--red);clip-path:polygon(40% 0,100% 0,60% 100%,0 100%)}
  .counter{font:700 18px "Barlow Condensed","Arial Narrow",Arial,sans-serif;letter-spacing:.12em;color:var(--muted)}
  .counter b{color:#fff}
  .show{position:relative;aspect-ratio:16/9;max-height:78vh;margin-inline:auto;background:#050505;overflow:hidden;
    border:2px solid #000;outline:2px solid var(--red);outline-offset:6px;
    clip-path:polygon(0 0,calc(100% - 28px) 0,100% 28px,100% 100%,28px 100%,0 calc(100% - 28px))}
  .slide{position:absolute;inset:0;opacity:0;transition:opacity .9s ease;display:grid;place-items:center}
  .slide.on{opacity:1}
  .slide img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;object-position:center;image-orientation:from-image}
  .ph{position:absolute;inset:0;display:grid;place-items:center;text-align:center;
    background:repeating-linear-gradient(115deg,#151515 0 3px,#0e0e0e 3px 26px)}
  .ph strong{display:block;font:400 clamp(60px,12vw,150px)/.9 "Bebas Neue",Impact,"Arial Narrow",sans-serif;color:transparent;-webkit-text-stroke:2px var(--red)}
  .ph span{display:block;margin-top:10px;font:600 15px "Barlow Condensed","Arial Narrow",Arial,sans-serif;letter-spacing:.25em;text-transform:uppercase;color:var(--muted)}
  .ph code{color:#fff;font-family:inherit}
  .arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:3;width:54px;height:54px;border:0;cursor:pointer;
    background:rgba(0,0,0,.65);color:#fff;display:grid;place-items:center;transition:background .15s}
  .arrow:hover{background:var(--red)}
  .arrow svg{width:22px;height:22px;stroke:currentColor;stroke-width:3;fill:none}
  .prev{left:0;clip-path:polygon(0 0,100% 0,82% 100%,0 100%)}
  .next{right:0;clip-path:polygon(18% 0,100% 0,100% 100%,0 100%)}
  .ticks{display:flex;gap:6px;margin-top:22px;flex-wrap:wrap}
  .ticks button{flex:1;min-width:18px;max-width:70px;height:6px;border:0;background:#2a2a2a;cursor:pointer;
    clip-path:polygon(4px 0,100% 0,calc(100% - 4px) 100%,0 100%)}
  .ticks button.on{background:var(--red)}
  .ticks button:hover{background:#555}.ticks button.on:hover{background:var(--red-hot)}

  /* ---------- Footer ---------- */
  footer{background:rgba(0,0,0,.92);border-top:3px solid var(--red)}
  footer .wrap{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:26px 0;flex-wrap:wrap;
    font:600 14px "Barlow Condensed","Arial Narrow",Arial,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
  footer strong{color:#fff;font-weight:700}

  /* ---------- Responsive ---------- */
  @media (max-width:1100px){
    .nav ul a{padding:0 14px;font-size:18px}
    .nav ul a::after{left:14px;right:14px}
    .badge{width:170px}
  }
  /* Tablets / small laptop windows: full menu stays visible, just tighter */
  @media (max-width:900px){
    .topbar .wrap{padding-left:104px}
    .org{font-size:16px}
    .logo-tile{width:92px;height:100px;top:-46px}.logo-tile img{width:80px}
    .nav ul{margin-left:100px;flex:1;justify-content:space-between}
    .nav ul a{padding:0 9px;font-size:16px;letter-spacing:.02em}
    .nav ul a::after{left:9px;right:9px}
    .banner{grid-template-columns:1fr;justify-items:center;padding:44px 22px 70px;gap:22px}
    .badge{width:150px}
    .kicker{font-size:22px}
    .banner svg.arc,.banner .ghost{display:none}
  }
  @media (max-width:780px){
    .logo-tile{width:80px;height:92px}.logo-tile img{width:70px}
    .topbar .wrap{padding-left:92px}
    .nav ul{margin-left:86px}
    .nav ul a{padding:0 6px;font-size:14px;letter-spacing:.01em}
    .nav ul a::after{left:6px;right:6px}
    .nav ul a[aria-current="page"]{padding:0 12px}
  }
  /* Phones only: dropdown menu */
  @media (max-width:660px){
    .menu-btn{display:flex}
    .nav .wrap{min-height:56px}
    .nav ul{display:none;position:absolute;top:100%;left:0;right:0;margin:3px 0 0;flex-direction:column;
      background:#050505;border-bottom:3px solid var(--red)}
    .nav.open ul{display:flex}
    .nav ul a{padding:16px 20px;font-size:20px;width:100%}
    .nav ul a[aria-current="page"]{clip-path:none}
  }
  @media (max-width:560px){
    .topbar .wrap{padding-top:6px;padding-bottom:6px;gap:10px}
    .org{font-size:14px}
    .contact{padding:0 14px;font-size:0;gap:0}
    .contact svg{width:20px;height:20px}
    .section-head h2{font-size:36px}
    .arrow{width:42px;height:42px}
  }
  @media (prefers-reduced-motion:reduce){.slide{transition:none}}