:root{
  --black:#050505;
  --panel:#0b0a08;
  --gold:#e4ae3d;
  --gold2:#a9741e;
  --ivory:#f3efe8;
  --muted:#b9b4ac;
  --line:#342713;
  --serif:Georgia,'Times New Roman',serif;
  --sans:Arial,Helvetica,sans-serif
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--black);
  color:var(--ivory);
  font-family:var(--sans);
  font-weight:300
}
a{color:inherit;text-decoration:none}

.site-header{
  height:100px;
  position:fixed;
  z-index:50;
  top:0;
  left:0;
  right:0;
  padding:0 4.2vw;
  display:flex;
  align-items:center;
  background:linear-gradient(180deg,rgba(8,7,5,.96),rgba(4,4,4,.9));
  border-bottom:1px solid rgba(228,174,61,.18);
  box-shadow:0 12px 44px rgba(0,0,0,.28);
  backdrop-filter:blur(16px)
}
.brand{
  display:flex;
  align-items:center;
  min-width:300px;
  color:var(--gold);
  position:relative;
  isolation:isolate
}
.brand-emblem{
  width:84px;
  height:84px;
  position:relative;
  display:grid;
  place-items:center;
  flex:0 0 auto;
  border-radius:50%;
  overflow:hidden;
  box-shadow:0 0 18px rgba(228,174,61,.16),0 0 0 1px rgba(228,174,61,.32)
}
.brand-emblem:before,
.brand-emblem:after{
  content:"";
  position:absolute;
  inset:-10px;
  border-radius:50%;
  pointer-events:none
}
.brand-emblem:before{
  background:conic-gradient(from 0deg,transparent 0 58%,rgba(238,186,76,.46) 66%,transparent 76% 100%);
  animation:emblemGlow 12s linear infinite;
  opacity:.78
}
.brand-emblem:after{
  inset:7px;
  border:1px solid rgba(228,174,61,.24);
  box-shadow:0 0 24px rgba(228,174,61,.16),inset 0 0 14px rgba(228,174,61,.12)
}
.brand-mark{
  width:100%;
  height:100%;
  position:relative;
  z-index:1;
  object-fit:cover;
  border-radius:50%;
  transform:scale(1.24)
}
.brand-text{
  display:flex;
  flex-direction:column;
  margin-left:13px
}
.brand strong{
  font:40px/1 var(--serif);
  letter-spacing:5px
}
.brand small{
  font:12px/1.8 var(--serif);
  letter-spacing:3px
}
.main-nav{
  margin:auto;
  display:flex;
  align-self:stretch;
  align-items:center;
  gap:42px
}
.main-nav a{
  height:100%;
  display:flex;
  align-items:center;
  position:relative;
  text-transform:uppercase;
  font-size:12px;
  letter-spacing:.6px
}
.main-nav a:after{
  content:"";
  position:absolute;
  bottom:23px;
  left:0;
  width:0;
  height:2px;
  background:var(--gold);
  transition:.25s
}
.main-nav a:hover,.main-nav a.active{color:var(--gold)}
.main-nav a.active:after{width:100%}
.header-cta{
  border:1px solid #8b6420;
  padding:16px 22px;
  text-transform:uppercase;
  color:#edbd51;
  font-size:12px;
  letter-spacing:.8px;
  transition:background .25s,border-color .25s,box-shadow .25s,color .25s
}
.header-cta span{margin-right:10px}
.header-cta:hover{
  background:rgba(228,174,61,.1);
  border-color:var(--gold);
  box-shadow:0 0 24px rgba(228,174,61,.14)
}
.menu-toggle{display:none;background:none;border:0}
@keyframes emblemGlow{
  to{transform:rotate(360deg)}
}

.hero{
  height:1000px;
  min-height:760px;
  position:relative;
  overflow:hidden;
  padding-top:100px
}
.hero-bg{
  position:absolute;
  inset:100px 0 0;
  background:url('assets/hero-background.png') center/cover no-repeat;
  animation:slowDrift 16s ease-in-out infinite alternate;
  transform:scale(1.03)
}
#ribbonCanvas{
  position:absolute;
  inset:100px 0 0;
  width:100%;
  height:calc(100% - 100px);
  pointer-events:none;
  mix-blend-mode:screen;
  opacity:.62
}
.hero-shade{
  position:absolute;
  inset:100px 0 0;
  background:
    radial-gradient(circle at 19% 35%,rgba(228,174,61,.18),transparent 28%),
    linear-gradient(90deg,rgba(0,0,0,.58) 0,rgba(0,0,0,.18) 52%,transparent),
    linear-gradient(0deg,#050505 0,transparent 30%)
}
@keyframes slowDrift{
  from{transform:scale(1.03) translate3d(-.3%,0,0)}
  to{transform:scale(1.075) translate3d(.5%,-.4%,0)}
}
.hero-content{
  position:relative;
  z-index:2;
  margin:98px 0 0 5.7vw;
  max-width:650px
}
.eyebrow{
  text-transform:uppercase;
  color:#d5a33b;
  font-size:14px;
  letter-spacing:4px;
  margin:0 0 20px
}
.hero h1,.section h2{
  font:normal 68px/1.05 var(--serif);
  letter-spacing:-1.6px;
  margin:0
}
.hero h1 em,.section h2 em{font-style:normal;color:var(--gold)}
.gold-rule{
  display:block;
  width:132px;
  border-top:1px solid var(--gold);
  margin:32px 0
}
.lead{
  font-size:17px;
  line-height:1.65;
  color:#c4c0ba
}
.actions{
  display:flex;
  gap:24px;
  margin-top:34px
}
.button{
  min-height:54px;
  padding:0 27px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  text-transform:uppercase;
  font-size:12px;
  letter-spacing:.7px;
  border:1px solid #a47728;
  background:transparent;
  color:var(--ivory);
  cursor:pointer;
  transition:transform .25s,box-shadow .25s,border-color .25s,background .25s,color .25s,filter .25s
}
.button b{
  font-size:20px;
  margin-left:18px;
  font-weight:normal
}
.button.gold{
  background:linear-gradient(100deg,#efbd50,#dca036);
  border-color:#e9b54a;
  color:#090806;
  box-shadow:0 16px 34px rgba(191,132,35,.18)
}
.button.outline{background:rgba(0,0,0,.5)}
.button:hover{
  filter:brightness(1.12);
  transform:translateY(-2px);
  box-shadow:0 18px 40px rgba(228,174,61,.2)
}
.button.outline:hover{
  border-color:var(--gold);
  color:var(--gold);
  background:rgba(228,174,61,.07)
}

.intro-link{
  position:absolute;
  z-index:3;
  right:5vw;
  top:520px;
  display:flex;
  align-items:center;
  font:13px var(--sans)
}
.play{
  width:52px;
  height:52px;
  border:1px solid var(--gold);
  border-radius:50%;
  display:grid;
  place-items:center;
  color:var(--gold);
  margin-right:14px
}

.practice-strip{
  position:absolute;
  z-index:4;
  left:7.7vw;
  right:6.7vw;
  bottom:18px;
  display:grid;
  grid-auto-flow:column;
  grid-auto-columns:minmax(280px,1fr);
  gap:15px;
  overflow-x:auto;
  padding-bottom:12px;
  scroll-snap-type:x mandatory;
  scrollbar-width:none;
  -ms-overflow-style:none
}
.practice-strip::-webkit-scrollbar{display:none}
.practice-strip>a{
  height:260px;
  border:1px solid #3b2e1a;
  background:rgba(5,5,5,.78);
  padding:28px 22px;
  text-align:center;
  display:flex;
  flex-direction:column;
  align-items:center;
  transition:.3s;
  scroll-snap-align:start
}
.practice-strip>a:hover{
  border-color:#a87a27;
  background:rgba(18,14,8,.9);
  transform:translateY(-6px)
}
.service-icon{
  height:58px;
  font:42px/1 var(--serif);
  color:var(--gold)
}
.practice-strip h3{
  font:19px var(--serif);
  margin:10px 0 12px
}
.practice-strip p{
  margin:0;
  color:#aaa69f;
  font-size:12px;
  line-height:1.7
}
.practice-strip b{
  margin-top:auto;
  color:var(--gold);
  font-size:22px;
  font-weight:normal
}

.section{
  min-height:760px;
  padding:120px 7.7vw;
  position:relative;
  border-top:1px solid #1e170d
}
.section h2{font-size:58px}
.section-copy{max-width:600px}
.section-copy>p:not(.eyebrow),
.section-heading>p:not(.eyebrow){
  color:var(--muted);
  line-height:1.8;
  font-size:16px
}

.about{
  display:grid;
  grid-template-columns:1fr 1fr;
  align-items:center;
  gap:9vw;
  background:radial-gradient(circle at 80% 45%,#1c1408,transparent 30%)
}
.text-link{
  color:var(--gold);
  display:inline-block;
  margin-top:20px;
  text-transform:uppercase;
  font-size:12px;
  letter-spacing:1px
}
.values-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  border:1px solid var(--line)
}
.values-grid article{
  min-height:190px;
  padding:40px;
  border:1px solid var(--line);
  display:flex;
  flex-direction:column;
  background:linear-gradient(145deg,#100d08,#070605);
  box-shadow:0 20px 54px rgba(0,0,0,.18)
}
.values-grid strong{
  font:52px var(--serif);
  color:var(--gold)
}
.values-grid span{
  color:var(--muted);
  font-size:13px;
  margin-top:12px
}

.practice,
.team{background:#080706}
.section-heading{
  text-align:center;
  max-width:760px;
  margin:0 auto 42px
}
.practice-carousel{
  display:grid;
  grid-auto-flow:column;
  grid-auto-columns:minmax(320px,1fr);
  gap:18px;
  overflow-x:auto;
  padding:14px 6px 18px;
  scroll-snap-type:x mandatory;
  scrollbar-width:none;
  -ms-overflow-style:none;
  mask-image:linear-gradient(90deg,transparent 0,#000 6%,#000 94%,transparent 100%)
}
.practice-carousel::-webkit-scrollbar{display:none}
.practice-carousel article{
  min-height:320px;
  background:linear-gradient(180deg,#0c0a07,#070605);
  border:1px solid #3b2e1a;
  padding:34px;
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
  scroll-snap-align:start;
  position:relative;
  overflow:hidden;
  transition:transform .25s,border-color .25s,background .25s
}
.practice-carousel article:before{
  content:"";
  position:absolute;
  inset:auto -30px -60px auto;
  width:160px;
  height:160px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(228,174,61,.12),transparent 65%);
  pointer-events:none
}
.practice-carousel article:hover{
  transform:translateY(-6px);
  border-color:#a87a27;
  background:linear-gradient(180deg,#120e08,#090806)
}
.practice-carousel span,
.role{
  color:var(--gold);
  font-size:11px;
  letter-spacing:2px;
  text-transform:uppercase
}
.practice-carousel h3,
.team-grid h3{
  font:25px var(--serif);
  margin:26px 0 15px
}
.practice-carousel p,
.team-grid p{
  color:var(--muted);
  font-size:13px;
  line-height:1.7;
  margin:0
}

.team{
  background:radial-gradient(circle at 50% 35%,#1b1206,transparent 35%),#060606
}
.team-block{
  max-width:1180px;
  margin:0 auto 42px
}
.team-kicker{
  margin:0 0 20px;
  text-transform:uppercase;
  color:var(--gold);
  font-size:12px;
  letter-spacing:3px
}
.team-grid{
  display:grid;
  gap:28px
}
.founders-grid{
  grid-template-columns:repeat(3,1fr)
}
.support-grid{
  grid-template-columns:repeat(auto-fit,minmax(190px,1fr))
}
.team-grid article{
  min-width:0;
  border:1px solid var(--line);
  padding-bottom:30px;
  background:#090806;
  transition:transform .25s,border-color .25s,box-shadow .25s
}
.team-grid article:hover{
  transform:translateY(-4px);
  border-color:rgba(228,174,61,.38);
  box-shadow:0 20px 54px rgba(0,0,0,.24)
}
.portrait{
  height:320px;
  display:grid;
  place-items:center;
  background:
    radial-gradient(circle at 50% 35%,rgba(228,174,61,.16),transparent 34%),
    linear-gradient(145deg,#1a160f,#080706);
  border-bottom:1px solid var(--line)
}
.portrait span{
  font:70px var(--serif);
  color:#6e5223
}
.team-grid article>p,
.team-grid article>h3,
.team-grid article>a{
  margin-left:28px;
  margin-right:28px
}
.team-grid article>.role{margin-top:26px}
.team-grid article>a{
  color:var(--gold);
  font-size:12px;
  text-transform:uppercase
}

.courts{
  display:grid;
  grid-template-columns:1fr 1fr;
  align-items:center;
  gap:8vw;
  background:linear-gradient(110deg,#090806,#050505)
}
.court-art svg{
  width:100%;
  fill:none;
  stroke:#ba852c;
  stroke-width:2;
  filter:drop-shadow(0 0 16px rgba(208,153,53,.25))
}
.section-copy ul{
  list-style:none;
  padding:0;
  margin:28px 0 36px
}
.section-copy li{
  padding:12px 0;
  border-bottom:1px solid var(--line);
  color:#c9c3b9;
  font-size:14px
}
.section-copy li:before{
  content:'—';
  color:var(--gold);
  margin-right:12px
}

.contact{
  display:grid;
  grid-template-columns:.8fr 1.2fr;
  gap:9vw;
  background:radial-gradient(circle at 80% 50%,#1a1207,transparent 40%)
}
.contact-details{margin-top:40px}
.contact-details p{color:var(--ivory)!important}
.contact-details a{
  color:var(--ivory);
  transition:color .2s
}
.contact-details a:hover{color:var(--gold)}
.contact-details small{
  display:block;
  color:var(--gold);
  text-transform:uppercase;
  letter-spacing:2px;
  margin-bottom:6px
}
.contact-panel{
  background:
    linear-gradient(145deg,rgba(18,14,8,.98),rgba(7,6,5,.98)),
    #090806;
  border:1px solid rgba(228,174,61,.24);
  padding:42px;
  align-self:center;
  box-shadow:0 24px 70px rgba(0,0,0,.28),inset 0 1px 0 rgba(255,255,255,.04)
}
.contact-panel h3{
  margin:0 0 16px;
  font:34px/1.1 var(--serif);
  color:var(--ivory)
}
.contact-panel>p:not(.eyebrow){
  color:#c9c3b9;
  line-height:1.8;
  margin:0
}
.contact-actions{
  display:flex;
  flex-wrap:wrap;
  gap:14px;
  margin-top:34px
}

footer{
  padding:60px 7.7%;
  border-top:1px solid var(--line);
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:28px;
  align-items:end;
  color:#908b82
}
.footer-brand{min-width:0}
.footer-mark{
  transform:scale(1.2)
}
.footer-emblem{
  width:58px;
  height:58px
}
.footer-brand strong{font-size:34px}
footer nav{
  display:flex;
  justify-content:flex-end;
  gap:25px;
  font-size:12px;
  text-transform:uppercase
}
footer>small{text-align:right}

.reveal{
  opacity:0;
  transform:translateY(25px);
  transition:opacity .7s,transform .7s
}
.reveal.visible{
  opacity:1;
  transform:none
}

@media(max-width:1100px){
  .main-nav{gap:18px}
  .brand{min-width:220px}
  .hero{height:920px}
  .header-cta{display:none}
  .team-grid{gap:15px}
  .practice-carousel{grid-auto-columns:minmax(280px,85vw)}
  .support-grid{grid-template-columns:repeat(2,1fr)}
}

@media(max-width:720px){
  .site-header{
    height:100px;
    padding:0 20px
  }
  .brand{min-width:0}
  .brand-emblem{
    width:56px;
    height:56px
  }
  .footer-emblem{
    width:48px;
    height:48px
  }
  .brand strong{font-size:27px}
  .brand small{font-size:8px}
  .menu-toggle{
    display:flex;
    margin-left:auto;
    width:34px;
    height:30px;
    flex-direction:column;
    justify-content:center;
    gap:6px
  }
  .menu-toggle i{display:block;border-top:1px solid var(--gold)}
  .main-nav{
    position:absolute;
    top:100px;
    left:0;
    right:0;
    display:none;
    flex-direction:column;
    align-items:stretch;
    gap:0;
    background:#070707;
    padding:15px 25px;
    border-bottom:1px solid var(--line)
  }
  .main-nav.open{display:flex}
  .main-nav a{padding:15px 0}
  .main-nav a:after{bottom:5px}
  .hero{
    height:960px;
    padding-top:100px
  }
  .hero-bg,
  #ribbonCanvas,
  .hero-shade{
    inset:100px 0 0;
    height:calc(100% - 100px)
  }
  .hero-bg{background-position:58% center}
  .hero-content{margin:75px 22px 0}
  .eyebrow{
    font-size:10px;
    letter-spacing:2.5px
  }
  .hero h1{font-size:43px}
  .lead{font-size:13px}
  .lead br{display:none}
  .actions{
    flex-direction:column;
    gap:12px;
    align-items:stretch
  }
  .button{width:100%}
  .intro-link{display:none}
  .practice-strip{
    left:22px;
    right:22px;
    bottom:18px;
    grid-auto-columns:minmax(250px,80vw)
  }
  .practice-strip>a{height:190px}
  .section{
    padding:85px 22px;
    min-height:auto
  }
  .section h2{font-size:40px}
  .about,
  .courts,
  .contact{
    grid-template-columns:1fr;
    gap:60px
  }
  .values-grid article{
    padding:22px;
    min-height:140px
  }
  .values-grid strong{font-size:30px}
  .practice-carousel{
    grid-auto-columns:minmax(250px,82vw);
    gap:14px;
    margin-inline:-6px;
    padding-inline:6px 6px
  }
  .practice-carousel article{
    min-height:280px;
    padding:26px
  }
  .practice-carousel h3{font-size:22px}
  .team-grid,
  .founders-grid,
  .support-grid{
    grid-template-columns:1fr
  }
  .portrait{height:250px}
  .contact{gap:50px}
  .contact-panel{
    padding:28px
  }
  .contact-actions{align-items:stretch}
  footer{grid-template-columns:1fr}
  footer nav{
    justify-content:flex-start;
    flex-wrap:wrap
  }
  footer>small{text-align:left}
}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .hero-bg{animation:none}
  .brand-emblem:before{animation:none}
  .reveal{
    opacity:1;
    transform:none;
    transition:none
  }
}