/* ============================================================================
   ARJUN SHOOTING CLUB — full-viewport scroll-snap cinema, techy/precise tone.
   Palette from the range photography: range-black, target-bone, signal-orange.
   Display: Oswald condensed (embedded). Committed single dark world — the hall.
   ============================================================================ */

@font-face{
  font-family:"Oswald";
  src:url("fonts/oswald.woff2") format("woff2");
  font-weight:300 700; font-style:normal; font-display:swap;
}

:root{
  color-scheme:dark;
  --black:  #0B0D0F;
  --black-2:#111417;
  --panel:  #15181C;
  --bone:   #F0E9D8;
  --bone-2: #BFB9A8;
  --muted:  #6E7681;
  --orange: #E8752E;
  --orange-2:#F0925A;
  --ring:   #2A2E33;
  --line:   rgba(240,233,216,.14);
  --line-2: rgba(240,233,216,.06);

  --disp:"Oswald","Arial Narrow","Helvetica Neue",sans-serif;
  --body:"Helvetica Neue",Helvetica,"Segoe UI",Arial,sans-serif;
  --mono:"SFMono-Regular","SF Mono","JetBrains Mono",Menlo,Consolas,monospace;
  --ease:cubic-bezier(0.16,1,0.3,1);
  --snapease:cubic-bezier(0.6,0,0.2,1);
}

*{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0; background:var(--black); color:var(--bone);
  font-family:var(--body); line-height:1.6; overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
::selection{ background:var(--orange); color:var(--black); }
a{ color:inherit; }
:focus-visible{ outline:2px solid var(--orange-2); outline-offset:3px; }
.mono{ font-family:var(--mono); }
.acc{ color:var(--orange); }

h1,h2,h3{ font-family:var(--disp); font-weight:600; text-transform:uppercase; letter-spacing:.01em; line-height:.98; margin:0; }

/* ---------------- calibration load ---------------- */
.cal{
  position:fixed; inset:0; z-index:200; background:var(--black);
  display:flex; align-items:center; justify-content:center;
  transition:opacity .5s var(--ease), visibility 0s linear .5s;
}
.cal.done{ opacity:0; visibility:hidden; }
.cal-h,.cal-v{ position:absolute; background:var(--orange); opacity:.7; }
.cal-h{ left:0; right:0; height:1px; top:0; animation:calH 1s var(--snapease) forwards; }
.cal-v{ top:0; bottom:0; width:1px; left:0; animation:calV 1s var(--snapease) forwards; }
@keyframes calH{ to{ top:50%; } }
@keyframes calV{ to{ left:50%; } }
.cal-read{ position:absolute; left:50%; top:50%; transform:translate(18px,18px); font-size:13px; color:var(--bone-2); }
.cal-read #calNum{ font-size:30px; color:var(--bone); letter-spacing:.06em; }
.cal-lbl{ font-size:9.5px; letter-spacing:.3em; color:var(--muted); }
@media (prefers-reduced-motion:reduce){ .cal{ display:none; } }

/* ---------------- fixed chrome ---------------- */
.bar{
  position:fixed; top:0; left:0; right:0; z-index:100;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:14px clamp(18px,3.5vw,44px);
  background:linear-gradient(180deg, rgba(11,13,15,.92), rgba(11,13,15,0));
}
.brand{
  font-family:var(--disp); font-weight:700; font-size:20px; letter-spacing:.14em;
  text-decoration:none; display:flex; align-items:center; gap:10px;
}
.brand .thin{ font-weight:300; letter-spacing:.3em; font-size:11px; color:var(--bone-2); margin-left:2px; }
.brand .ring{
  width:16px; height:16px; border-radius:50%; border:2px solid var(--orange); position:relative; flex:none;
}
.brand .ring::after{ content:""; position:absolute; inset:4px; border-radius:50%; background:var(--orange); }
.links{ display:flex; align-items:center; gap:6px; }
.links a{
  font-family:var(--mono); font-size:11px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--bone-2); text-decoration:none; padding:9px 12px; transition:color .2s;
}
.links a:hover{ color:var(--bone); }
.links a.cta{
  border:1px solid var(--orange); color:var(--orange); padding:10px 18px;
  transition:background .2s, color .2s;
}
.links a.cta:hover{ background:var(--orange); color:var(--black); }
.burger{ display:none; background:none; border:1px solid var(--line); color:var(--bone); font-size:20px; padding:4px 12px; cursor:pointer; }
@media (max-width:900px){
  .links{ display:none; position:fixed; inset:0; background:rgba(11,13,15,.97); flex-direction:column; justify-content:center; gap:10px; }
  .links.open{ display:flex; }
  .links a{ font-size:15px; }
  .burger{ display:block; position:relative; z-index:101; }
}

/* progress rail */
.rail{
  position:fixed; right:clamp(10px,2vw,26px); top:50%; transform:translateY(-50%); z-index:90;
  display:flex; flex-direction:column; gap:14px;
}
.rail span{
  font-size:9px; letter-spacing:.2em; color:var(--muted); cursor:pointer;
  padding-left:14px; position:relative; transition:color .3s;
}
.rail span::before{
  content:""; position:absolute; left:0; top:50%; transform:translateY(-50%);
  width:6px; height:1px; background:var(--muted); transition:width .3s var(--ease), background .3s;
}
.rail span.on{ color:var(--orange); }
.rail span.on::before{ width:10px; background:var(--orange); }
@media (max-width:900px){ .rail{ display:none; } }

/* ---------------- the deck ---------------- */
@media (min-width:901px){
  .deck{ height:100dvh; overflow-y:auto; scroll-snap-type:y mandatory; scroll-behavior:smooth; }
  .panel{ scroll-snap-align:start; }
  @media (prefers-reduced-motion:reduce){ .deck{ scroll-snap-type:none; scroll-behavior:auto; } }
}
.panel{
  min-height:100dvh; position:relative; display:flex; flex-direction:column; justify-content:center;
  padding:96px clamp(18px,4vw,56px) 56px; overflow:hidden;
}
.p-in{ max-width:1180px; margin:0 auto; width:100%; position:relative; z-index:2; }
.sight{ font-size:10.5px; letter-spacing:.34em; color:var(--orange); margin:0 0 18px; }
.panel h2{ font-size:clamp(38px,6.2vw,84px); }
.lede{ max-width:52ch; color:var(--bone-2); font-size:clamp(15px,1.6vw,18px); margin:22px 0 0; }
.bgimg{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; opacity:.55;
}
.bgimg.dim{ opacity:.3; }
.range::after, .coach::after{
  content:""; position:absolute; inset:0; z-index:1;
  background:linear-gradient(90deg, rgba(11,13,15,.94) 30%, rgba(11,13,15,.5) 70%, rgba(11,13,15,.85));
}

/* buttons */
.btn{
  display:inline-block; font-family:var(--disp); font-weight:600; text-transform:uppercase; letter-spacing:.12em;
  font-size:15px; text-decoration:none; cursor:pointer; border:0;
  background:var(--orange); color:var(--black); padding:16px 30px;
  transition:transform .25s var(--ease), background .25s;
}
.btn:hover{ background:var(--orange-2); }
.btn.wide{ width:100%; text-align:center; }

/* ---------------- hero ---------------- */
.hero{ padding-top:110px; }
.hero-grid{
  max-width:1240px; margin:0 auto; width:100%;
  display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(24px,4vw,64px); align-items:center;
}
.hero h1{ font-size:clamp(54px,8.6vw,124px); }
.hero .lede{ max-width:44ch; }
.cta-row{ display:flex; align-items:center; gap:22px; margin-top:30px; flex-wrap:wrap; }
.hint{ font-size:10px; letter-spacing:.16em; color:var(--muted); max-width:24ch; line-height:1.7; }
.scroll-cue{
  position:absolute; bottom:18px; left:50%; transform:translateX(-50%);
  font-size:9.5px; letter-spacing:.3em; color:var(--muted); animation:cue 2.2s ease-in-out infinite;
}
@keyframes cue{ 0%,100%{ transform:translate(-50%,0); opacity:.5; } 50%{ transform:translate(-50%,6px); opacity:1; } }
@media (prefers-reduced-motion:reduce){ .scroll-cue{ animation:none; } }

/* the lane — first-person range viewport */
.hero-target{ display:flex; justify-content:center; }
.t-wrap{ position:relative; width:min(50vw,620px); }
#target{
  display:block; width:100%; aspect-ratio:3/2; cursor:none;
  box-shadow:0 0 0 1px var(--line), 0 0 90px rgba(232,117,46,.14), 0 34px 80px rgba(0,0,0,.65);
  background:#050607;
  touch-action:manipulation;
}
#target:focus-visible{ outline:2px solid var(--orange-2); outline-offset:6px; }
.t-read{
  position:absolute; left:50%; transform:translateX(-50%); bottom:-64px;
  display:flex; gap:20px; align-items:center; font-size:11px; white-space:nowrap;
}
.t-row span{ display:block; font-size:8.5px; letter-spacing:.22em; color:var(--muted); }
.t-row b{ font-weight:700; color:var(--bone); font-size:15px; font-variant-numeric:tabular-nums; }
.t-row b#tLast{ color:var(--orange); }
.t-reset{
  background:none; border:1px solid var(--line); color:var(--bone-2); font-size:9.5px; letter-spacing:.18em;
  padding:7px 12px; cursor:pointer; transition:border-color .2s, color .2s;
}
.t-reset:hover{ border-color:var(--orange); color:var(--orange); }

/* ---------------- range stats ---------------- */
.stats{ display:flex; gap:clamp(20px,4vw,64px); margin-top:40px; flex-wrap:wrap; }
.st b{ display:block; font-family:var(--mono); font-weight:700; font-size:clamp(30px,4vw,54px); color:var(--bone); font-variant-numeric:tabular-nums; letter-spacing:-.02em; }
.st span{ font-size:12px; color:var(--muted); letter-spacing:.04em; }
.marq{ position:absolute; left:0; right:0; bottom:0; z-index:2; border-top:1px solid var(--line-2); overflow:hidden; background:rgba(11,13,15,.7); }
.marq-in{ display:inline-flex; white-space:nowrap; gap:0; padding:11px 0; font-size:10.5px; letter-spacing:.3em; color:var(--muted); animation:marq 26s linear infinite; }
.marq-in b{ color:var(--orange); font-weight:400; padding:0 18px; }
.marq-in span{ padding:0 18px; }
@keyframes marq{ to{ transform:translateX(-50%); } }
@media (prefers-reduced-motion:reduce){ .marq-in{ animation:none; } }

/* ---------------- disciplines ---------------- */
.disc .p-in{ margin-bottom:30px; }
.disc-grid{
  max-width:1180px; margin:0 auto; width:100%;
  display:grid; grid-template-columns:1fr 1fr; gap:18px;
}
.d-card{
  position:relative; display:block; text-decoration:none; overflow:hidden; min-height:44vh;
  border:1px solid var(--line-2); background:var(--panel);
}
.d-card img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center 20%;
  opacity:.7; transition:transform .8s var(--ease), opacity .4s;
}
.d-card:hover img{ transform:scale(1.05); opacity:.9; }
.d-copy{
  position:relative; z-index:2; height:100%; min-height:44vh; display:flex; flex-direction:column; justify-content:flex-end;
  padding:26px; background:linear-gradient(180deg, transparent 30%, rgba(11,13,15,.92) 78%);
}
.d-copy h3{ font-size:clamp(26px,3vw,40px); }
.d-spec{ font-size:10px; letter-spacing:.24em; color:var(--orange); margin:8px 0 10px; }
.d-copy p:not(.d-spec){ color:var(--bone-2); font-size:14px; max-width:40ch; margin:0; }
.d-go{ font-size:10.5px; letter-spacing:.22em; color:var(--bone); margin-top:16px; opacity:0; transform:translateX(-8px); transition:opacity .3s, transform .3s var(--ease); }
.d-card:hover .d-go{ opacity:1; transform:none; }

/* ---------------- fees ---------------- */
.fees-grid{
  max-width:1240px; margin:0 auto; width:100%;
  display:grid; grid-template-columns:1fr 1fr; gap:clamp(24px,4vw,64px); align-items:center;
}
.fees-img{ margin-top:28px; width:min(320px,80%); border:1px solid var(--line-2); }
.price-list{ display:flex; flex-direction:column; gap:10px; }
.pr{
  border:1px solid var(--line-2); background:var(--panel); padding:16px 20px;
  display:grid; grid-template-columns:1fr auto; gap:2px 18px; align-items:center;
  transition:border-color .25s, transform .25s var(--ease);
}
.pr:hover{ border-color:var(--orange); transform:translateX(6px); }
.pr.featured{ border-color:var(--orange); background:linear-gradient(90deg, rgba(232,117,46,.12), var(--panel) 60%); }
.pr-top{ display:flex; align-items:center; gap:10px; }
.pr-top b{ font-family:var(--disp); font-weight:600; letter-spacing:.1em; font-size:16px; }
.tag{ font-size:8.5px; letter-spacing:.2em; border:1px solid var(--orange); color:var(--orange); padding:3px 8px; }
.tag.save{ border-color:#5FBE8C; color:#5FBE8C; }
.pr-amt{ grid-row:1 / 3; grid-column:2; font-weight:700; font-size:clamp(18px,2vw,26px); color:var(--bone); font-variant-numeric:tabular-nums; }
.pr p{ margin:0; font-size:12.5px; color:var(--muted); grid-column:1; }

/* ---------------- coaching ---------------- */
.creed{ list-style:none; display:flex; gap:10px; padding:0; margin:30px 0 0; flex-wrap:wrap; }
.creed li{
  font-size:10px; letter-spacing:.24em; color:var(--bone-2); border:1px solid var(--line);
  padding:8px 14px; transition:border-color .25s, color .25s;
}
.creed li:hover{ border-color:var(--orange); color:var(--orange); }
.lineage{ max-width:52ch; color:var(--muted); font-size:14px; margin:30px 0 0; border-left:2px solid var(--orange); padding-left:18px; }

/* ---------------- visit ---------------- */
.visit{ justify-content:space-between; padding-bottom:0; }
.visit-grid{
  max-width:1240px; margin:auto; width:100%;
  display:grid; grid-template-columns:1fr 1fr; gap:clamp(24px,4vw,72px); align-items:center;
}
.v-facts{ display:grid; grid-template-columns:1fr 1fr; gap:16px 28px; margin-top:30px; }
.v-facts span{ display:block; font-size:8.5px; letter-spacing:.24em; color:var(--muted); }
.v-facts b{ font-size:13px; letter-spacing:.08em; color:var(--bone); font-weight:700; }
.v-form{ background:var(--panel); border:1px solid var(--line-2); padding:clamp(20px,3vw,32px); display:flex; flex-direction:column; gap:16px; }
.vf{ display:flex; flex-direction:column; gap:7px; }
.vf label{ font-family:var(--mono); font-size:9px; letter-spacing:.24em; color:var(--muted); }
.vf input,.vf select{
  background:var(--black); border:1px solid var(--line); color:var(--bone);
  font-family:var(--body); font-size:15px; padding:13px 14px;
}
.vf input:focus,.vf select:focus{ border-color:var(--orange); outline:none; }
.vf input::placeholder{ color:var(--muted); }
.vf-row{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.vf-note{ font-size:9px; letter-spacing:.22em; color:var(--muted); text-align:center; margin:0; }
.foot{
  display:flex; justify-content:space-between; gap:14px; flex-wrap:wrap;
  border-top:1px solid var(--line-2); padding:18px 0 22px; margin-top:40px; font-size:10px; letter-spacing:.14em; color:var(--bone-2);
}
.foot .dim2{ color:var(--muted); }

/* ---------------- brand logo + staff + gallery ---------------- */
.blogo{ width:30px; height:30px; object-fit:contain; flex:none; }
.staff{ display:flex; gap:26px; margin-top:26px; flex-wrap:wrap; }
.sf b{ display:block; font-family:var(--disp); font-weight:600; letter-spacing:.08em; font-size:16px; }
.sf span{ font-size:8.5px; letter-spacing:.18em; color:var(--muted); max-width:30ch; display:block; margin-top:4px; line-height:1.8; }
.gal{ justify-content:center; gap:34px; }
.strip{ overflow:hidden; margin:0 calc(-1 * clamp(18px,4vw,56px)); }
.strip-in{ display:flex; gap:14px; width:max-content; animation:strip 60s linear infinite; padding:4px 0; }
.strip:hover .strip-in{ animation-play-state:paused; }
.strip-in img{ height:clamp(200px,36vh,340px); width:auto; border:1px solid var(--line-2); filter:saturate(.85) contrast(1.03); transition:filter .3s, transform .3s var(--ease); }
.strip-in img:hover{ filter:none; transform:scale(1.02); }
@keyframes strip{ to{ transform:translateX(-50%); } }
@media (prefers-reduced-motion:reduce){
  .strip{ overflow-x:auto; }
  .strip-in{ animation:none; }
}
@media (max-width:900px){ .strip-in img{ height:180px; } }

/* ---------------- reveals ---------------- */
.rv{ opacity:0; transform:translateY(30px); transition:opacity .9s var(--ease), transform .9s var(--ease); }
.rv.in{ opacity:1; transform:none; }
.rv2{ transition-delay:.12s; } .rv3{ transition-delay:.24s; } .rv4{ transition-delay:.36s; }
@media (prefers-reduced-motion:reduce){
  .rv{ opacity:1; transform:none; transition:none; }
  .btn:hover,.pr:hover,.d-card:hover img{ transform:none; }
}

/* ---------------- mobile ---------------- */
@media (max-width:900px){
  .panel{ min-height:auto; padding:90px 20px 48px; }
  .hero{ min-height:100dvh; }
  .hero-grid, .fees-grid, .visit-grid{ grid-template-columns:1fr; }
  .disc-grid{ grid-template-columns:1fr; }
  .hero h1{ font-size:clamp(46px,14.5vw,72px); }  /* sized to STILLNESS */
  .panel h2{ font-size:clamp(32px,10vw,54px); }
  .t-wrap{ width:min(92vw,560px); margin:16px auto 8px; }
  .t-read{
    position:static; transform:none; margin-top:14px;
    flex-wrap:wrap; justify-content:center; white-space:normal; row-gap:10px; width:100%;
  }
  .stats{ display:grid; grid-template-columns:1fr 1fr; gap:22px; }
  .cta-row{ flex-direction:column; align-items:flex-start; }
  .v-facts{ grid-template-columns:1fr 1fr; }
  .vf-row{ grid-template-columns:1fr; }
  .scroll-cue{ display:none; }
}